From 表單組件
允許用戶輸入內(nèi)容，下拉列表，單選、多選。
表單元素：
TextFromField
ListView 列表組件
listview
listview.builder 長(zhǎng)列表組件
GridView 網(wǎng)格
屬性：
scrollDirection 列表排列方向 Axis.vertical 豎向
Container 容器組件
key:標(biāo)識(shí)符
alignment:child的對(duì)齊方式
padding
color
decoration:child后面的裝飾
Drawer
AppBar
PopupMenuButton 選項(xiàng)菜單
BottomNavigationBar
ListView
UserAccountsDrawerHeader 側(cè)滑頭部
InkWell 水波紋 點(diǎn)擊事件
Expanded 充滿控件
Divider 分割線
wrap 換行控件
IntroSlider 引導(dǎo)頁
CircularProgressIndicator 圓形進(jìn)度條
Chip 標(biāo)簽 流式布局
1.MediaQuery
Establishes a subtree in which media queries resolve to the given data.
建立媒體查詢解析給定的子樹。
MediaQuery.removePadding:移除頂部?jī)?nèi)邊距，用于處理劉海屏頂部?jī)?nèi)邊距。
static MediaQueryData of 獲取系統(tǒng)一些屬性，返回的是MediaQueryData
MediaQueryData包括了很多字段
accessibleNavigation → bool 用戶是否使用TalkBack或VoiceOver等輔助功能服務(wù)與應(yīng)用程序進(jìn)行交互。
alwaysUse24HourFormat → bool 是否使用24小時(shí)格式。
boldText → bool 是否使用了粗體字體
devicePixelRatio → double 單位邏輯像素的設(shè)備像素?cái)?shù)量
disableAnimations → bool 平臺(tái)是否要求盡可能禁用或減少使用動(dòng)畫。
hashCode → int 此對(duì)象的哈希碼
invertColors → bool 設(shè)備是否反轉(zhuǎn)平臺(tái)的顏色
orientation → Orientation 屏幕方向（橫向/縱向）
padding → EdgeInsets 顯示器的部分被系統(tǒng)UI部分遮擋，通常由硬件顯示“凹槽”或系統(tǒng)狀態(tài)欄
platformBrightness → Brightness 當(dāng)前的亮度模式
size → Size 設(shè)備尺寸信息，如屏幕的大小，單位 pixels
textScaleFactor → double 每個(gè)邏輯像素的字體像素?cái)?shù)
viewInsets → EdgeInsets 顯示器的各個(gè)部分完全被系統(tǒng)UI遮擋，通常是設(shè)備的鍵盤
viewPadding → EdgeInsets 顯示器的部分被系統(tǒng)UI部分遮擋，通常由硬件顯示“凹槽”或系統(tǒng)狀
如：我們想要獲取widget的寬高
final size =MediaQuery.of(context).size;
final width =size.width;
final height =size.height;
NotificationListener
通知（Notification）是Flutter中一個(gè)重要的機(jī)制，在widget樹中，每一個(gè)節(jié)點(diǎn)都可以分發(fā)通知，通知會(huì)沿著當(dāng)前節(jié)點(diǎn)向上傳遞，所有父節(jié)點(diǎn)都可以通過NotificationListener來監(jiān)聽通知。多用于監(jiān)聽列表的滾動(dòng)事件。
NotificationListener對(duì)象里有個(gè)狀態(tài)字段，有如下狀態(tài)：
onNotification: (notification){
switch (notification.runtimeType){
case ScrollStartNotification: print("開始滾動(dòng)"); break;
case ScrollUpdateNotification: print("正在滾動(dòng)"); break;
case ScrollEndNotification: print("滾動(dòng)停止"); break;
case OverscrollNotification: print("滾動(dòng)到邊界"); break;
}
},
RefreshIndicator
下拉刷新控件
RefreshIndicator(
onRefresh: _handleRefresh,//下拉刷新觸發(fā)的方法
child: _listview(),下拉的ui控件
),
ClipRRect
A widget that clips its child using a rounded rectangle.
可以實(shí)現(xiàn)圓角效果
borderRadius: BorderRadius.all(Radius.circular(11)),
child: Container。。。
GridView
網(wǎng)絡(luò)布局控件，如九宮格
GridView(
scrollDirection: Axis.vertical,// 滾動(dòng)方向
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 5,
),
Swiper
banner輪播圖樣式
pagination 指示器
Swiper(
itemCount: bannerList.length,
autoplay: true,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () => {},
child: Image.network(
bannerList[index].icon,
fit: BoxFit.fill,
),
);
},
pagination: SwiperPagination(),
),
LinearGradient
線性漸變LinearGradient
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
//AppBar漸變遮罩背景
colors: [Color(0x66000000), Colors.transparent],
begin: Alignment.topCenter,//開始位置
end: Alignment.bottomCenter,// 結(jié)束位置
),
),FractionallySizedBox
根據(jù)自身的寬高因子顯示大小，如果沒有設(shè)置寬高因子，最大化顯示，也就是充滿它的父布局。
new FractionallySizedBox(
alignment: Alignment.topLeft,
widthFactor: 1.5,
heightFactor: 0.5,
child: new Container(
color: Colors.red,
)
