Flutter教学目录持续更新中
Github源代码持续更新中
1.简介
这一节呢这三个组件一起来介绍
- ListTile:一个文本组件,跟之前介绍的SwitchListTile、RadioListTile、CheckboxListTile相似,传送门:Flutter教学目录
- RefreshIndicator:下拉刷新组件
- ListView:列表
- Divider:分割线
2.ListTile属性
- leading:头部widget
- title:标题
- subtitle:副标题
- trailing:尾部widget
- dense:
- shape:形状
- contentPadding:内边距
- enabled = true:是否可用,false会屏蔽点击长按事件,然后置灰
- onTap:点击事件
- onLongPress:长按事件
-
selected = false:是否选中,true的话会展示主题色调
_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:触发下拉刷新的距离
- onRefresh:刷新事件
- color:颜色
- backgroundColor:背景色
- strokeWidth = 2.0: 宽度
_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的创建方式有多种:
- ListView()
- ListView.builder()
- ListView.separated()
- ListView.custom()
4.1ListView()
这种是最简单基础的方式,子节点是返回widgets
- scrollDirection = Axis.vertical:方向
- reverse = false:是否反转,为true的话排列会反向,下拉刷新也会变成上拉刷新
- ScrollController controller:控制器
- primary:当内容不足以滚动时,是否支持滚动;true:用来解决listView不满一页无法触发下拉刷新,需要注意这个时候不可以设置controller
- physics:控制用户滚动视图的交互,可以提供边界回弹特效
- AlwaysScrollableScrollPhysics:列表总是可滚动的。在iOS上会有回弹效果,在android上不会回弹。那么问题来了,如果primary设置为false(内容不足时不滚动),且 physics设置为AlwaysScrollableScrollPhysics,列表是否可以滑动?答案是可以,感兴趣的可以试一下
- PageScrollPhysics:一般是给PageView控件用的滑动效果。如果listview设置的话在滑动到末尾时会有个比较大的弹起和回弹
- ClampingScrollPhysics:滚动时没有回弹效果,同android系统的listview效果
- NeverScrollableScrollPhysics:就算内容超过列表范围也不会滑动
- BouncingScrollPhysics:不论什么平台都会有回弹效果
- shrinkWrap = false:false:则高度为滑动方向上的最大允许高度;如果在滑动方向上没有设置约束,则这个字段必须设置为true,否则会报错。简而言之就是父节点为滑动组件的时候,且滑动方向一致需要true,例如:SingleChildScrollView
- padding:内边距
- itemExtent:指定Item在滑动方向上的高度,用来提高滑动性能
- addAutomaticKeepAlives = true:是否将子控件包裹在AutomaticKeepAlive控件内
- addRepaintBoundaries = true:是否将子控件包裹在 RepaintBoundary 控件内。用于避免列表滚动时的重绘,如果子控件重绘开销很小时,比如子控件就是个色块或简短的文字,把这个字段设置为false性能会更好
- addSemanticIndexes = true:是否把子控件包装在IndexedSemantics里,用来提供无障碍语义
- cacheExtent:可见区域的前后会有一定高度的空间去缓存子控件,当滑动时就可以迅速呈现
- children = const <Widget>[]:
-
semanticChildCount:语义item数量
_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()创建方式区别不大,主要是子节点属性变了,itemBuilder返回子节点,itemCount确定子节点数量
- itemBuilder:IndexedWidgetBuilder item
-
itemCount:item数量
_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()
这个是可以设置分割线的,那么我们就先了解一下fluter里面的分割线组件
Divider、VerticalDivider、PopupMenuDivider
前面两个的属性是一样的,只是一个横向一个纵向,后面一个是看名字也知道,给PopupMenu用的,当然用在ListView其实也是可以的,但是他只有一个height属性
- height:高度,这个高度不是Divider设置高度,不是里面的线高度
- thicknes:这个才是线高度
- indent:开始缩进
- endInden:末尾缩进
- color:颜色
进入正题:
这个就是在ListView.builder()基础上多了分割线属性
- itemBuilder:IndexedWidgetBuilder item
- separatorBuilder:分割线
-
itemCount:item数量
_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:
这个是比较高阶的用法了,可以自己去实现子控件的复用重绘,位置返回等自定义操作了,这个比较复杂,需要对源码有一定了解基础再来看,这个后期会在进阶或者深入解读里面再做介绍,这里做个了解
_myListViewCustom() {
return ListView.custom(
childrenDelegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return _myListTitle();
},
childCount: _widgetList.length,
findChildIndexCallback: (key){
print('key = $key');
return 0;
}
),
);
}
下一节:Material组件之ExpansionPanelList、ExpansionPanel、ExpansionPanelRadio、ExpansionTile