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è)置對齊方式熊户、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ù)過多进泼，比如通訊錄這種長列表的時(shí)候蔗衡，可以使用ListView的builder命名構(gòu)造方法纤虽，來構(gòu)造長列表。
當(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)證器
對于輸入王滤，我們最關(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頁面切換動(dòng)畫組件
????????????????? 其他組件 ?????????????????：
MaterailApp組件
代表一種設(shè)計(jì)風(fēng)格的組件。里面包含了所需要的各種基本組件啤挎。一個(gè)完整的Flutter項(xiàng)目就是從MaterailApp組件開始的
MaterailApp包括設(shè)置主頁驻谆，設(shè)置路由，自定義主題等侵浸。
Scaffold組件
腳手架組件顯示了material風(fēng)格的頁面布局，單個(gè)頁面的布局都可以使用該組件氛谜。
腳手架組件可以設(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)航條杨何，可以瀏覽切換頂級視圖酱塔。
水平選項(xiàng)卡組件（TabBar）
水平選項(xiàng)卡組件類似于網(wǎng)易新聞主頁的各個(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為彈出菜單組件埃跷，通常放于頁面右上角蕊玷，表示更多的操作邮利。
簡單對話框組件
SimpleDialog為簡單對話框組件，于屏幕中彈出一個(gè)選擇或者展示列表垃帅，用來顯示附加的提示或者操作延届。
注意這個(gè)過程是異步的，需要加入async/await處理贸诚。
提示對話框組件
AlertDialog組件為提示對話框組件方庭，不僅有彈出提示，還有操作按鈕酱固，比如確定械念、取消。
輕量提示組件
SnakBar為輕量提示組件媒怯，于屏幕下方顯示订讼，常用于請求后的狀態(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
