前言
Flutter 作為Google出品的一個新興的跨平臺移動客戶端UI開發框架，正在被越來越多的開發者和組織使用，包括阿里的咸魚、騰訊的微信等。
示意圖
今天，我將詳細講解組件(widget)所有知識，內容如下：
1. 定義
Flutter里UI控件的統稱。
通過組合不同的Widget，可以實現用戶界面 & 交互
2. 類型
分為兩類：有狀態 & 無狀態，具體如下：
示意圖
3. 生命周期
生命周期從StatefulWidget.createState（）開始，具體如下：
示意圖
具體請看：Android Flutter：圖文詳解 組件Widget的生命周期
4. 具體使用
主要是分為兩種類型的使用：
- 無狀態組件：StatelessWidget
- 有狀態組件：StatefulWidget
4.1 StatelessWidget
// 1. 繼承StatelessWidget
class MyWidget extends StatelessWidget {
// 2. 復寫build方法
@override
Widget build(BuildContext context) {
// 3. 返回你需要的Widget視圖
return _buildMyWidget(context);
}
}
4.2 StatefulWidget
// 1. 繼承StatefulWidget
class MyWidget extends StatefulWidget {
// 2. 重寫createState()，返回一個State狀態
@override
State<StatefulWidget> createState() {
return new _MyWidgetState();
}
}
// 3. 實現State（繼承了State，包含了視圖和交互邏輯）
class _MyWidgetState extends State<MyWidget>{
// 4. 復寫build方法,返回你需要的Widget視圖
@override
Widget build(BuildContext context) {
return _buildMyWidget(context);
}
}
總結說明：
// 1. MyWidget：繼承了StatefulWidget + 依賴_MyWidgetState返回State
// 2. _MyWidgetState 又繼承了 State<MyWidget>，包含了視圖和交互邏輯
5. 常用組件
在Flutter里，封裝了許多常用Widget。下面我將通過講解這些Widget來演示StatelessWidget 和 StatefulWidget的具體使用，主要包括：
5.1 基礎屬性
主要包括：padding、margin、alignment、decoration。具體請看文章：
5.2 基礎組件
主要包括：
- 文本類型：Flutter Widget：文本組件Text、RichText、TextField
- 圖片類型：Flutter Widget：圖片組件Image、Icon、ImageIcon
- 按鈕類型：Flutter Widget：按鈕組件 - RaisedButton、FlatButton、OutlineButton、IconButton
5.3 基礎布局
主要包括：
- Container
- Row
- Column
- Expanded
- center
具體請看文章：Android Flutter：那些不可忽視的基礎布局！
5.4 導航欄
主要包括：
- 頂部導航欄：TabBar + TabBarView + TabController
- 底部導航欄：BottomNavigationBar
具體請看文章：
5.5 列表組件
Flutter常用的滾動型列表組件包括：GridView組件 + ListView組件
具體請看文章：
5.6 完整頁面
- 主要包括
Material App、Scaffold、AppBar - 具體請看文章：Flutter 完整頁面Widget：Material App、Scaffold、AppBar
至此，關于Flutter的組件Widget使用講解完畢。
6. 總結
- 本文主要講解了Flutter中Widget所有知識 & 常用組件庫；
- 接下來推出的文章，我將繼續講解Flutter的相關知識，包括更多的Widget用法、實例應用等，感興趣的讀者可以繼續關注我的博客哦：Carson_Ho的Android博客
請點贊！因為你們的贊同/鼓勵是我寫作的最大動力！
相關系列文章閱讀
Carson帶你學Android：學習方法
Carson帶你學Android：四大組件
Carson帶你學Android：自定義View
Carson帶你學Android：異步-多線程
Carson帶你學Android：性能優化
Carson帶你學Android：動畫
歡迎關注Carson_Ho的簡書！
不定期分享關于安卓開發的干貨，追求短、平、快，但卻不缺深度。
