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的话会展示主题色调
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：触发下拉刷新的距离
- 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的创建方式有多种：
- 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
[]： -
semanticChildCount：语义item数量
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()创建方式区别不大，主要是子节点属性变了，itemBuilder返回子节点，itemCount确定子节点数量
- itemBuilder：IndexedWidgetBuilder item
-
itemCount：item数量
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()
这个是可以设置分割线的，那么我们就先了解一下fluter里面的分割线组件
Divider、VerticalDivider、PopupMenuDivider
前面两个的属性是一样的，只是一个横向一个纵向，后面一个是看名字也知道，给PopupMenu用的，当然用在ListView其实也是可以的，但是他只有一个height属性
- height:高度,这个高度不是Divider设置高度,不是里面的线高度
- thicknes:这个才是线高度
- indent:开始缩进
- endInden:末尾缩进
- color:颜色
进入正题：
这个就是在ListView.builder()基础上多了分割线属性
- itemBuilder：IndexedWidgetBuilder item
- separatorBuilder：分割线
-
itemCount：item数量
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：
这个是比较高阶的用法了，可以自己去实现子控件的复用重绘，位置返回等自定义操作了，这个比较复杂，需要对源码有一定了解基础再来看，这个后期会在进阶或者深入解读里面再做介绍，这里做个了解
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;
}
),
);
}
下一节：Material组件之ExpansionPanelList、ExpansionPanel、ExpansionPanelRadio、ExpansionTile