這是一篇關於自學Flutter的心得:
我從2019年4月份安裝了Flutter環境.學習了Dart語言,敲了一個電影列表的簡單Demo.
後來由於公司任務比較繁忙.一個人幹着2個人的活,還需要管理移動端.每晚11點下班,所以耽誤了學習.
現在由於疫情的情況,遲遲未能復工,需要在家自我隔離.加上公司目前在規劃,所以開發沒有那麼緊張,只是維護與開會討論需求.所以現在還是有時間的自我學習.提高自我.
2020年3月2號開始重新學了Dart語言,從Flutter重新搭建環境開始(去年我重裝了系統,導致環境變量沒有,那是用IDEA工具學習的,現在是使用Android Studio開發).
現在學到Flutter基礎,先將整理一些知識分享給大家.後續學完將做一個完整的Demo.
學習的代碼將上傳到github有興趣的同學可以下載:https://github.com/huagnzhiqiang/flutter_demo
還在繼續學習中,後續將持續更新.
1.界面結構:
- Material 應用
- AppBar：工具欄上的圖標按鈕（IconButton）
- TabBar：用標籤形式展示內容
- TabBar：自定義標籤欄的樣式
- Material：自定義按鈕水波紋樣式
- Drawer：抽屜（邊欄）
- Drawer：在抽屜裏使用 ListView， DrawerHeader，ListTile
- Drawer：抽屜的打開與關閉
- UserAccountDrawerHeader：抽屜裏的用戶帳號信息
- 用戶帳戶頭部的背景圖像
- 創建 DrawerDemo 小部件
- BottomNavigationBar：底部導航欄
- BottomNavigationBar：底部導航欄的激活狀態
- StatefulWidget：有狀態的小部件
2.基礎部件:
- Text：文字與文字樣式
- RichText：行內多樣式的文字
- Container：容器
- BoxDecoration：裝飾盒子
- BoxDecoration：邊框（border）
- BoxDecoration：圓角（borderRadius）
- BoxDecoration：陰影（borderShadow）
- BoxDecoration：形狀（shape）
- BoxDecoration：漸變（gradient）
- BoxDecoration：背景圖像（image）
3.佈局:
- 創建可配置的圖標徽章（IconBadge）小部件
- Row（橫排） 與 Column（豎排）
- mainAxis：主軸
- crossAxis：交叉軸
- SizedBox：固定尺寸的盒子
- Alignment：對齊
- Stack：一摞小部件
- AspectRatio：寬高比
- ConstrainedBox：帶限制的盒子
4.視圖:
- PageView：頁面視圖
- PageView：頁面視圖的屬性
- PageView：用 PageController 調整頁面的顯示
- PageView.builder 按需生成頁面
- GridView：網格視圖（GridView.count）
- GridView.extent
- GridView.builder 按需生成視圖項目
5.Sliver:
- SliverGrid：網格視圖
- SliverPadding（內邊距） 與 SliverSafeArea（安全區）
- SliverList：列表視圖
- SliverAppBar：應用工具欄
- 帶漸近動畫的可伸縮空間
6.路由Route:
- 一堆路由
- 打開新頁面並返回（push 與 pop）
- 帶名字的路由（ Navigator.pushNamed）
- 初始路由：initialRoute
- InkWell：添加濺墨動畫效果
7.表單Form:
- Theme：定製、使用、重置、覆蓋主題
- TextField：文本字段
- TextField：文本字段樣式（InputDecoration）
- TextField：監視文本字段的值的變化與提交
- TextField：使用 TextEditingController 監聽文本字段變化
- Form：表單
- Form：保存與獲取表單裏的數據
- Form：驗證表單裏的數據
- Form：自動驗證
- SnackBar：在屏幕底部動畫彈出提示欄
8.按鈕:
- FloatingActionButton：漂浮動作按鈕
- BottomAppBar：底部工具欄
- 創建演示小部件用的頁面
- FlatButton：文字按鈕
- RaisedButton：按鈕
- 按鈕主題：顏色、形狀
- OutlineButton：描邊按鈕
- 按鈕容器 Container：有固定寬度的按鈕
- 按鈕容器 Expanded：佔滿可用寬度的按鈕
- 按鈕容器 ButtonBar：一組帶邊距的橫排顯示按鈕
- PopupMenuButton：彈出式菜單按鈕
9.輸入:
- Checkbox：複選框
- CheckboxListTile：帶標籤與圖標的複選框
- Radio：單選按鈕
- RadioListTile：帶標籤與圖標的單選按鈕
- Switch：開關
- SwitchListTile：帶標籤與圖標的開關
- Slider：滑動選擇器
- 安裝第三方包（演示安裝 Intl 包）
- 顯示格式化日期
- showDatePicker：選擇日期
- showDatePicker：獲取選擇的日期（async）
- showTimePicker：時間選擇器
- Future：異步程序