Flutter中一切皆組件（Widget），一個(gè)Flutter項(xiàng)目可以看作是大量的Widget堆砌而成，類似于堆樂高積木。

因?yàn)榫W(wǎng)上已經(jīng)有很多Flutter各組件的詳細(xì)使用已，所以此篇只羅列常用組件，以查漏補(bǔ)缺使用。

Flutter中的組件可以分為兩大類，一個(gè)是谷歌Material風(fēng)格的設(shè)計(jì)組件，另一個(gè)是iOS風(fēng)格的組件。

一. Material風(fēng)格的組件

1. 容器組件 Container

容器組件會(huì)包含一個(gè)child組件，自身可以設(shè)置對(duì)齊方式、padding、margin和背景顏色等。

2. 圖片組件 Image

Image組件有多種構(gòu)造函數(shù)，可以用不同方式加載圖片：

• Image : 從ImageProvider獲取圖像
• Image.asset: 加載資源圖片
• Image.file： 加載本地圖片文件
• Image.network: 加載網(wǎng)絡(luò)圖片
• Image.memory： 加載Uint8List資源圖片

Image組件加載顯示圖片后，可以設(shè)置fit屬性來控制圖片的顯示方式：

• BoxFit.fill 全圖充滿顯示，圖片可能拉伸
• BoxFit.contain 全圖顯示，按照原比例，不需要充滿
• BoxFit.cover 顯示可能拉伸，可能裁剪，充滿
• BoxFit.fitWidth 寬度充滿，圖片可能會(huì)被拉伸或者裁剪
• BoxFit.fitHeight 高度充滿，圖片可能會(huì)被拉伸或者裁剪
• BoxFit.none 原始大小
• BoxFit.scaleDown 類似于contain方式，但是不允許顯示超過原始圖片大小，即可小不可大

3. 文本組件 Text

顯示文字的組件...

4. 圖標(biāo)及按鈕組件

圖標(biāo)組件Icon為展示圖標(biāo)的組件，常用的有：

• IconButton：可點(diǎn)擊的圖標(biāo)按鈕組件
• Icons：Flutter自帶的圖標(biāo)集合
• IconTheme: Icon主題
• ImageIcon: 通過AssetImages或者其他圖片顯示圖標(biāo)

按鈕組件為可點(diǎn)擊響應(yīng)的組件，類似于Icon組件：

• IconButton： 可點(diǎn)擊的圖標(biāo)按鈕組件
• RaisedButton: 凸起按鈕組件
• FloatingActionButton懸停按鈕組件，Scaffold組件中設(shè)置
• FlatButton扁平按鈕組件，點(diǎn)擊時(shí)候會(huì)有陰影效果

5. 列表組件

基礎(chǔ)列表組件為ListView，可以設(shè)置水平或者垂直方向滾動(dòng)。
水平布局組件可以使用Row組件
垂直布局組件可以使用Column組件

當(dāng)數(shù)據(jù)過多，比如通訊錄這種長(zhǎng)列表的時(shí)候，可以使用ListView的builder命名構(gòu)造方法，來構(gòu)造長(zhǎng)列表。

當(dāng)數(shù)據(jù)過多，要用網(wǎng)格布局的時(shí)候，可以使用GridView組件。GridView創(chuàng)建方式有兩種：

• 使用GridView.count通過單行展示個(gè)數(shù)來創(chuàng)建
• 使用GridView.extent通過最大寬度來創(chuàng)建

6. 表單組件

表單里有兩個(gè)重要的組件，一個(gè)是Form用來提交表單，另一個(gè)是TextFormField組件用來輸入內(nèi)容的。

Form組件的常用屬性：

• key 該組件在整個(gè)組件樹中的key值
• autovalidate 是否自動(dòng)提交表單
• onChanged 當(dāng)FormField值改變時(shí)的回調(diào)函數(shù)

TextFormField組件的常用屬性：

• autovalidate自動(dòng)驗(yàn)證值
• initialValue表單字段初始值
• onSave 當(dāng)Form表單調(diào)用保存方法save時(shí)的回調(diào)函數(shù)
• validatorForm表單驗(yàn)證器

對(duì)于輸入，我們最關(guān)心的是驗(yàn)證輸入內(nèi)容是否合法。為了獲取表單實(shí)例，我們需要設(shè)置一個(gè)全局key:

GlobalKey<FormState> key = GlobalKey<FormState>();

并把該key值賦值給Form組件的key屬性。

7. 裝飾類組件：

• Opacity：透明度處理
• DecoratedBox 裝飾盒子，設(shè)置顏色、陰影、形狀、漸變和背景圖片等
• RotatedBox 旋轉(zhuǎn)盒子
• ClipOval: 圓形裁剪
• ClipRRect: 圓角矩形裁剪
• ClipRect: 矩形裁剪
• ClipPath: 按照設(shè)置的路徑自定義裁剪，需要繼承自CustomerClipper類，并且重寫getClip方法返回裁剪路徑，和重寫ShouldReclip方法返回true:

// 自定義裁剪
class MyClip extends CustomClipper {
  
  @override
  getClip(Size size) {
    
    Path path = Path();
    path.moveTo(10, 10);
    path.lineTo(10, 101);
    path.close();
    
    return path;
  }
  
  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return true;
  }
}

8. 動(dòng)畫組件

常用的動(dòng)畫組件有：

• AnimatedOpacity 實(shí)現(xiàn)漸變效果組件
• Hero 頁(yè)面切換動(dòng)畫組件

????????????????? 其他組件 ?????????????????：

MaterailApp組件

代表一種設(shè)計(jì)風(fēng)格的組件。里面包含了所需要的各種基本組件。一個(gè)完整的Flutter項(xiàng)目就是從MaterailApp組件開始的
MaterailApp包括設(shè)置主頁(yè)，設(shè)置路由，自定義主題等。

Scaffold組件

腳手架組件顯示了material風(fēng)格的頁(yè)面布局，單個(gè)頁(yè)面的布局都可以使用該組件。
腳手架組件可以設(shè)置顯示 頂部導(dǎo)航欄 、 底部導(dǎo)航欄 和 側(cè)拉抽屜

應(yīng)用按鈕組件（頂部導(dǎo)航欄組件）

應(yīng)用按鈕組件有AppBar和SliverAppBar兩種。區(qū)別是AppBar是固定不動(dòng)的，SliverAppBar可以隨著內(nèi)容滾動(dòng)而變化。
應(yīng)用按鈕組件中可以設(shè)置TabBar頂部導(dǎo)航欄。

底部導(dǎo)航組件

BottomNavigationBar組件是底部導(dǎo)航條，可以瀏覽切換頂級(jí)視圖。

水平選項(xiàng)卡組件（TabBar）

水平選項(xiàng)卡組件類似于網(wǎng)易新聞主頁(yè)的各個(gè)新聞種類組件。
TabBar組件的使用，需要用到DefaultTabController組件，他是關(guān)聯(lián)TabBarView組件和TabBar組件的橋梁。
實(shí)例代碼如下：

main () => runApp(MaterialApp(home: MyApp(),));

class MyApp extends StatelessWidget {

  final myTabs = [Tab(text: "體育",), Tab(text: "財(cái)經(jīng)",)];
  
  @override
  Widget build(BuildContext context) {

    return DefaultTabController(
      length: myTabs.length,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(tabs: myTabs),
        ),
        body: TabBarView(
            children: myTabs.map((Tab tab){
              return Text(tab.text);
        }).toList(),
        ),
      ),
    );
  }
}

抽屜組件Drawer

抽屜組件Drawer通常跟ListView組件配合使用

彈出菜單組件

PopupMenuButton為彈出菜單組件，通常放于頁(yè)面右上角，表示更多的操作。

簡(jiǎn)單對(duì)話框組件

SimpleDialog為簡(jiǎn)單對(duì)話框組件，于屏幕中彈出一個(gè)選擇或者展示列表，用來顯示附加的提示或者操作。
注意這個(gè)過程是異步的，需要加入async/await處理。

提示對(duì)話框組件

AlertDialog組件為提示對(duì)話框組件，不僅有彈出提示，還有操作按鈕，比如確定、取消。

輕量提示組件

SnakBar為輕量提示組件，于屏幕下方顯示，常用于請(qǐng)求后的狀態(tài)提示等。

文本框組件

TextField為文本框組件，常用于做文本輸入。
如果想要獲取到文本的輸入內(nèi)容，需要綁定controller到TextField，用來監(jiān)聽文本輸入內(nèi)容。

final TextEditingController controller = TextEditingController();

卡片組件

Card卡片組件常與ListTile組件一起使用。

二. Cupertino風(fēng)格的組件

Cupertino風(fēng)格主要是用來開發(fā)iOS時(shí)候使用。

1. CupertinoActivityIndicator

一個(gè)iOS風(fēng)格的loading指示器，通常用來加載等待。

2. CupertinoAlertDialog

AlertView的組件
使用的時(shí)候，內(nèi)容部分可以用SingleChidlScrollView組件進(jìn)行包裹。操作按鈕可以用CupertinoDialogAction組件。

3. CupertinoButton

4.導(dǎo)航組件

• CupertinoTabScaffold
• CupertinoTabView
• CupertinoPageScoffold
• CupertinoNavigationBar