組件1：MaterialApp、Container、Text、Image、Icon
組件2：ListView、GridView
組件3：Padding、Row 、Column、Stack、Align、Positioned
組件4：AspectRatio、Row 、Button
組件5：Wrap、StatelessWidget 、StatefulWidget、Dialog、PageView、TextField
3.12 AspectRatio
AspectRatio 的作用是根據(jù)設(shè)置調(diào)整子元素child的寬高比，F(xiàn)lutter提供此組件，就免去了自定義所帶來麻煩，AspectRatio適用于需要固定寬高比的情景，類似于BoFit中的Container，按照固定比率去盡量占滿區(qū)域
如果在滿足所有限制條件過后無法找到一個可行的尺寸，AspectRatio最終將會去優(yōu)先適應(yīng)布局限制條件，而忽略所設(shè)置的比率
const AspectRatio({
Key key,
@required this.aspectRatio, //寬高比，最終可能不會根據(jù)這個值去布局，具體則要看綜合因素，外層是否允許按照這種比率進行布局，這只是一個參考值
Widget child, // 子組件
})
3.13 Card
Card 是 flutter 提供的一個卡片組件，提供了圓角和陰影，實際用途其實和 Container 差不多。
Card 其實就是 Container 帶了一個默認的圓角和陰影，沒有太多屬
| 名稱 | 功能 |
|---|---|
| color | 表示離Stack 左 邊的 |
| shadowColor | 陰影顏色 |
| elevation | 陰影高度 |
| shape | 形狀 BorderShape |
| borderOnForeground | 是否在 child 前繪制 border，默認為 true |
| margin | 外邊距 |
| clipBehavior | 裁剪方式 |
| child | 子控件 |
| semanticContainer | 是否使用新的語義節(jié)點，默認為 true。語義這個東西用途沒有那么大，不用太過在意，在看頁面層級的Debug 模式下組件展示方式會按照設(shè)置的語義標簽展示。 |
3.14 CircleAvatar
設(shè)置圓形頭像時了解到 CircleAvatar 組件，Flutter 提供了很多繪制圓形的方法；CircleAvatar 比較特殊，通常用于用戶圖片和內(nèi)容一同展示，且為了保持效果一致，給定用戶的姓名縮寫應(yīng)始終與相同的背景色配對；
const CircleAvatar({
Key key,
this.child, // 子 Widget
this.backgroundColor, // 背景色
this.backgroundImage, // 背景圖
this.foregroundColor, // 子 Widget 顏色
this.radius, // 半徑
this.minRadius, // 最小半徑
this.maxRadius, // 最大半徑
})
/**
* 發(fā)現(xiàn)不添加Align時，CircleAvatar并沒有顯示為圓形，
* 設(shè)置child為要顯示的url時，并不能顯示為圓形，只有設(shè)置backgroundColor或者backgroundImage時才顯示為了圓形
* radius和minRadius與maxRadius不能同時使用;
* ClipOval不在Align里面時也不能顯示為圓形，ClipOval中image設(shè)置為fit: BoxFit.fill才能顯示為圓形；
* BoxDecoration不在Align里面時也不能顯示為圓形，BoxDecoration中image設(shè)置為fit: BoxFit.fill才能顯示為圓形；
*/
return CircleAvatar(
radius: 40.0,
backgroundImage: index != 0
? NetworkImage('https://locadeserta.com/game/assets/images/background/landing/1.jpg')
: AssetImage('images/icon_hzw01.jpg'));
3.15 按鈕組件
3.15.1 普通按鈕
- TextButton - 文本按鈕
- OutlineButton - 邊框按鈕
- ElevatedButton - 普通按鈕
3.15.2 按鈕屬性
| 名稱 | 功能 |
|---|---|
| onPressed | 點擊事件 |
| onLongPress | 長按事件 |
| child | 子組件 |
| style | 自定義樣式 |
3.15.3 ButtonStyle屬性
| 名稱 | 功能 |
|---|---|
| textStyle | 字體樣式 |
| foregroundColor | 按鈕點擊時字體樣式 |
| backgroundColor | 背景色 |
| shadowColor | 陰影 |
| elevation | 陰影長度 |
| side | 邊框 |
| shape | 圓角 |
| minimumSize | 按鈕大小 |
| overlayColor | 水波紋的顏色 |
3.15.4 主題相關(guān)的按鈕
- TextButtonTheme - 文本按鈕
- OutlinedButtonTheme- 邊框按鈕
- ElevatedButtonTheme - 普通按鈕
注意：如果設(shè)置style 樣式，則主題樣式不生效
3.15.5 IconButton - 圖標按鈕
TextButton.icon - 圖標文本按鈕
OutlineButton.icon - 圖標邊框按鈕
ElevatedButton.icon - 圖標普通按鈕
IconButton - 圖標按鈕
3.15.6 其他按鈕
- ButtonBar - 按鈕組
- BackButton - 回退按鈕
- CloseButton - 關(guān)閉按鈕
- FloatingActionButton - 浮動按鈕
注意：浮動按鈕配合Scaffold使用，與appBar、body 等是同級
3.15.7 按鈕大小
可以通過設(shè)置按鈕的樣式
ElevatedButton(
style: ButtonStyle(
// 最小的長寬，如果內(nèi)容過多，按鈕的長度會變長
minimumSize: MaterialStateProperty.all(Size(100, 100))),
child: const Text("ElevatedButton 普通按鈕"),
onPressed: () {},
),
還可以通過給按鈕的外層加一個組件。例如Container 或者 SizeBox，這樣按鈕就會跟外層組件一樣大。
