Flutter教學(xué)目錄持續(xù)更新中
Github源代碼持續(xù)更新中
1.簡介
這一節(jié)呢這三個(gè)組件一起來介紹
- ListTile：一個(gè)文本組件，跟之前介紹的SwitchListTile、RadioListTile、CheckboxListTile相似，傳送門：Flutter教學(xué)目錄
- RefreshIndicator：下拉刷新組件
- ListView：列表
- Divider：分割線
2.ListTile屬性
- leading：頭部widget
- title：標(biāo)題
- subtitle：副標(biāo)題
- trailing：尾部widget
- dense：
- shape：形狀
- contentPadding：內(nèi)邊距
- enabled = true：是否可用,false會(huì)屏蔽點(diǎn)擊長按事件,然后置灰
- onTap：點(diǎn)擊事件
- onLongPress：長按事件
-
selected = false：是否選中,true的話會(huì)展示主題色調(diào)
enabled = false.png
selected = false.png
selected = true.png
_myListTitle() {
return ListTile(
leading: Icon(Icons.account_circle),
title: Text('title'),
subtitle: Text('subtitle'),
trailing: Icon(Icons.account_box),
dense: false,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
contentPadding: EdgeInsets.all(10),
enabled: true,
onTap: () {
ToastUtil.showToast('onTap');
},
onLongPress: () {
ToastUtil.showToast('onLongPress');
},
selected: true,
);
}
3.RefreshIndicator屬性
- child：子widget
- displacement = 40.0：觸發(fā)下拉刷新的距離
- onRefresh：刷新事件
- color：顏色
- backgroundColor：背景色
- strokeWidth = 2.0: 寬度
1601720169(1).png
_myRefreshIndicator() {
return RefreshIndicator(
child: _myListView(),
displacement: 40,
onRefresh: () {
ToastUtil.showToast('onRefresh');
return _onRefresh();
},
color: Colors.blue,
backgroundColor: Colors.white,
strokeWidth: 2,
);
}
_onRefresh() async {
await Future.delayed(Duration(seconds: 3), () {
setState(() {});
});
}
4.ListView
ListView的創(chuàng)建方式有多種：
- ListView()
- ListView.builder()
- ListView.separated()
- ListView.custom()
4.1ListView()
這種是最簡單基礎(chǔ)的方式，子節(jié)點(diǎn)是返回widgets
- scrollDirection = Axis.vertical：方向
- reverse = false：是否反轉(zhuǎn),為true的話排列會(huì)反向,下拉刷新也會(huì)變成上拉刷新
- ScrollController controller：控制器
- primary：當(dāng)內(nèi)容不足以滾動(dòng)時(shí)，是否支持滾動(dòng)；true:用來解決listView不滿一頁無法觸發(fā)下拉刷新，需要注意這個(gè)時(shí)候不可以設(shè)置controller
- physics：控制用戶滾動(dòng)視圖的交互，可以提供邊界回彈特效
- AlwaysScrollableScrollPhysics:列表總是可滾動(dòng)的。在iOS上會(huì)有回彈效果，在android上不會(huì)回彈。那么問題來了，如果primary設(shè)置為false（內(nèi)容不足時(shí)不滾動(dòng)），且 physics設(shè)置為AlwaysScrollableScrollPhysics，列表是否可以滑動(dòng)？答案是可以，感興趣的可以試一下
- PageScrollPhysics：一般是給PageView控件用的滑動(dòng)效果。如果listview設(shè)置的話在滑動(dòng)到末尾時(shí)會(huì)有個(gè)比較大的彈起和回彈
- ClampingScrollPhysics：滾動(dòng)時(shí)沒有回彈效果，同android系統(tǒng)的listview效果
- NeverScrollableScrollPhysics：就算內(nèi)容超過列表范圍也不會(huì)滑動(dòng)
- BouncingScrollPhysics：不論什么平臺(tái)都會(huì)有回彈效果
- shrinkWrap = false：false：則高度為滑動(dòng)方向上的最大允許高度；如果在滑動(dòng)方向上沒有設(shè)置約束，則這個(gè)字段必須設(shè)置為true，否則會(huì)報(bào)錯(cuò)。簡而言之就是父節(jié)點(diǎn)為滑動(dòng)組件的時(shí)候,且滑動(dòng)方向一致需要true，例如：SingleChildScrollView
- padding：內(nèi)邊距
- itemExtent：指定Item在滑動(dòng)方向上的高度，用來提高滑動(dòng)性能
- addAutomaticKeepAlives = true：是否將子控件包裹在AutomaticKeepAlive控件內(nèi)
- addRepaintBoundaries = true：是否將子控件包裹在 RepaintBoundary 控件內(nèi)。用于避免列表滾動(dòng)時(shí)的重繪，如果子控件重繪開銷很小時(shí)，比如子控件就是個(gè)色塊或簡短的文字，把這個(gè)字段設(shè)置為false性能會(huì)更好
- addSemanticIndexes = true：是否把子控件包裝在IndexedSemantics里，用來提供無障礙語義
- cacheExtent：可見區(qū)域的前后會(huì)有一定高度的空間去緩存子控件，當(dāng)滑動(dòng)時(shí)就可以迅速呈現(xiàn)
- children = const <Widget>[]：
-
semanticChildCount：語義item數(shù)量
1601725095(1).png
_getListWidgets() {
for (var i = 0; i < 10; i++) {
_widgetList.add(_myListTitle());
}
return _widgetList;
}
_myListView() {
return ListView(
scrollDirection: Axis.vertical,
reverse: false,
controller: null,
primary: false,
itemExtent: 60,
cacheExtent: 60,
padding: EdgeInsets.all(10),
children: _getListWidgets(),
);
}
4.2ListView.builder()
跟ListView()創(chuàng)建方式區(qū)別不大，主要是子節(jié)點(diǎn)屬性變了，itemBuilder返回子節(jié)點(diǎn)，itemCount確定子節(jié)點(diǎn)數(shù)量
- itemBuilder：IndexedWidgetBuilder item
-
itemCount：item數(shù)量
1601725095(1).png
_myListViewBuild() {
return ListView.builder(
scrollDirection: Axis.vertical,
reverse: false,
controller: null,
primary: false,
itemExtent: 60,
cacheExtent: 60,
padding: EdgeInsets.all(10),
itemBuilder: (BuildContext context, int index) {
return _myListTitle();
},
itemCount: _widgetList.length,
);
}
4.3ListView.separated()
這個(gè)是可以設(shè)置分割線的，那么我們就先了解一下fluter里面的分割線組件
Divider、VerticalDivider、PopupMenuDivider
前面兩個(gè)的屬性是一樣的，只是一個(gè)橫向一個(gè)縱向，后面一個(gè)是看名字也知道，給PopupMenu用的，當(dāng)然用在ListView其實(shí)也是可以的，但是他只有一個(gè)height屬性
- height:高度,這個(gè)高度不是Divider設(shè)置高度,不是里面的線高度
- thicknes:這個(gè)才是線高度
- indent:開始縮進(jìn)
- endInden:末尾縮進(jìn)
- color:顏色
進(jìn)入正題：
這個(gè)就是在ListView.builder()基礎(chǔ)上多了分割線屬性
- itemBuilder：IndexedWidgetBuilder item
- separatorBuilder：分割線
-
itemCount：item數(shù)量
1601733619(1).png
_myListViewSeparated() {
return ListView.separated(
primary: true,
itemBuilder: (BuildContext context, int index) => _myListTitle(),
separatorBuilder: (BuildContext context, int index) {
return Divider(
height: 1,
thickness: 1,
indent: 10,
endIndent: 10,
);
return Container(
child: Text('----分割線----'),
color: Colors.grey,
);
},
itemCount: _widgetList.length,
);
}
4.4ListView.custom()
- childrenDelegate：SliverChildDelegate
- findChildIndexCallback：
-
childCount：
這個(gè)是比較高階的用法了，可以自己去實(shí)現(xiàn)子控件的復(fù)用重繪，位置返回等自定義操作了，這個(gè)比較復(fù)雜，需要對(duì)源碼有一定了解基礎(chǔ)再來看，這個(gè)后期會(huì)在進(jìn)階或者深入解讀里面再做介紹，這里做個(gè)了解
1601735732(1).png
_myListViewCustom() {
return ListView.custom(
childrenDelegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return _myListTitle();
},
childCount: _widgetList.length,
findChildIndexCallback: (key){
print('key = $key');
return 0;
}
),
);
}
下一節(jié)：Material組件之ExpansionPanelList、ExpansionPanel、ExpansionPanelRadio、ExpansionTile
