上一篇：二、Dart语言学习
下一篇：四、Flutter界面结构及导航相关
本篇笔记参考来源：https://www.jianshu.com/p/d8755183656b
一、ListTile
Flutter提供的ListTile很好用了，提供了许多常见的列表 item 样式，如左图标、右图标、标题、副标题等，具体如下：
const ListTile({
Key key,
this.leading,
this.title,
this.subtitle,
this.trailing,
this.isThreeLine = false,
this.dense,
this.contentPadding,
this.enabled = true,
this.onTap,
this.onLongPress,
this.selected = false,
})
例子中，我们先创建title、icon、subtitle的数据源，以及获取ListTile的方法：
Widget buildListData(BuildContext context, String titleItem, Icon iconItem, String subTitleItem) {
return new ListTile(
leading: iconItem,
title: new Text(
titleItem,
style: TextStyle(fontSize: 18),
),
subtitle: new Text(
subTitleItem,
),
trailing: new Icon(Icons.keyboard_arrow_right),
// 创建点击事件
onTap: () {
showDialog(
context: context,
builder: (BuildContext context) {
return new AlertDialog(
title: new Text(
'ListViewAlert',
style: new TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
),
content: new Text('您选择的item内容为:$titleItem'),
);
},
);
},
);
}
List titleItems = [
'keyboard', 'print',
'router', 'pages',
'zoom_out_map', 'zoom_out',
'youtube_searched_for', 'wifi_tethering',
'wifi_lock', 'widgets',
'weekend', 'web',
'图accessible', 'ac_unit',
];
List iconItems = [
new Icon(Icons.keyboard), new Icon(Icons.print),
new Icon(Icons.router), new Icon(Icons.pages),
new Icon(Icons.zoom_out_map), new Icon(Icons.zoom_out),
new Icon(Icons.youtube_searched_for), new Icon(Icons.wifi_tethering),
new Icon(Icons.wifi_lock), new Icon(Icons.widgets),
new Icon(Icons.weekend), new Icon(Icons.web),
new Icon(Icons.accessible), new Icon(Icons.ac_unit),
];
List subTitleItems = [
'subTitle: keyboard', 'subTitle: print',
'subTitle: router', 'subTitle: pages',
'subTitle: zoom_out_map', 'subTitle: zoom_out',
'subTitle: youtube_searched_for', 'subTitle: wifi_tethering',
'subTitle: wifi_lock', 'subTitle: widgets',
'subTitle: weekend', 'subTitle: web',
'subTitle: accessible', 'subTitle: ac_unit',
];
二、 绑定列表
绑定列表有四种方式，默认方式、ListView.builder、ListView.separated、 ListView.custom。
1. 默认方式绑定列表
先创建包含ListTile的List数组：
List _list = new List();
for (int i = 0; i < titleItems.length; i++) {
_list.add(buildListData(context, titleItems[i], iconItems[i], subTitleItems[i]));
}
若每个item下有分割线，则使用ListTile的divideTiles()方法在每个ListTile之间添加水平间距：
var divideTiles = ListTile.divideTiles(context: context, tiles: _list).toList();
绑定：
body: new Scrollbar(
// 默认写法
child: new ListView(
// 无分割线
children: _list,
// 有分割线
// children: divideTiles,
),
),
2. ListView.builder绑定
body: new Scrollbar(
// ListView.builder写法
child: new ListView.builder(
// 无分割线
itemBuilder: (context, item) {
return buildListData(context, titleItems[item], iconItems[item], subTitleItems[item]);
}, // 绑定item
// 有分割线
itemBuilder: (context, item) {
return new Container(
child: new Column(
children: [
buildListData(context, titleItems[item], iconItems[item], subTitleItems[item]),
new Divider()
],
),
);
},
itemCount: iconItems.length, // 数据长度
),
),
3. ListView.separated
ListView.separated方法与ListView.builder类似，不过可直接通过separatorBuilder设置分隔符，更加方便：
body: new Scrollbar(
child: new ListView.separated(
itemBuilder: (context, item) {
return buildListData(context, titleItems[item], iconItems[item], subTitleItems[item]);
},
separatorBuilder: (BuildContext context, int index) => new Divider(), // 分割线
itemCount: iconItems.length
),
),
4. ListView.custom
其实前两种方式都是ListView.custom的“快捷方式”。因为 ListView 内部是靠这个 childrenDelegate 属性动态初始化子元素的。
我们使用builder和separated比较多，这个custom相对来说就比较少。暂时先跳过吧，用到的时候再看。
三、完整代码
下面为整个HomePage.dart中的代码
/*
* @Author: Olive^_^Lan
* @Date: 2019-01-29 15:18:29
* @Last Modified by: Olive^_^Lan
* @Last Modified time: 2019-01-29 17:05:32
*/
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
createState() => new HomePageState();
}
class HomePageState extends State {
@override
Widget build(BuildContext context) {
List _list = new List();
for (int i = 0; i < titleItems.length; i++) {
_list.add(buildListData(context, titleItems[i], iconItems[i], subTitleItems[i]));
}
// 分割线
var divideTiles = ListTile.divideTiles(context: context, tiles: _list).toList();
return new Scaffold(
appBar: new AppBar(
title: new Text('Flutter ListView'),
),
body: new Scrollbar(
// 默认写法
// child: new ListView(
// children: _list,
// ),
// ListView.builder写法
// child: new ListView.builder(
// // 无分割线
//// itemBuilder: (context, item) {
//// return buildListData(context, titleItems[item], iconItems[item], subTitleItems[item]);
//// },
// // 有分割线
// itemBuilder: (context, item) {
// return new Container(
// child: new Column(
// children: [
// buildListData(context, titleItems[item], iconItems[item], subTitleItems[item]),
// new Divider()
// ],
// ),
// );
// },
// itemCount: iconItems.length,
// ),
// ListView.separated写法
child: new ListView.separated(
itemBuilder: (context, item) {
return buildListData(context, titleItems[item], iconItems[item], subTitleItems[item]);
},
separatorBuilder: (BuildContext context, int index) => new Divider(),
itemCount: iconItems.length
),
),
);
}
Widget buildListData(BuildContext context, String titleItem, Icon iconItem, String subTitleItem) {
return new ListTile(
leading: iconItem,
title: new Text(
titleItem,
style: TextStyle(fontSize: 18),
),
subtitle: new Text(
subTitleItem,
),
trailing: new Icon(Icons.keyboard_arrow_right),
onTap: () {
showDialog(
context: context,
builder: (BuildContext context) {
return new AlertDialog(
title: new Text(
'ListViewAlert',
style: new TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
),
content: new Text('您选择的item内容为:$titleItem'),
);
},
);
},
);
}
// 数据源
List titleItems = [
'keyboard', 'print',
'router', 'pages',
'zoom_out_map', 'zoom_out',
'youtube_searched_for', 'wifi_tethering',
'wifi_lock', 'widgets',
'weekend', 'web',
'图accessible', 'ac_unit',
];
List iconItems = [
new Icon(Icons.keyboard), new Icon(Icons.print),
new Icon(Icons.router), new Icon(Icons.pages),
new Icon(Icons.zoom_out_map), new Icon(Icons.zoom_out),
new Icon(Icons.youtube_searched_for), new Icon(Icons.wifi_tethering),
new Icon(Icons.wifi_lock), new Icon(Icons.widgets),
new Icon(Icons.weekend), new Icon(Icons.web),
new Icon(Icons.accessible), new Icon(Icons.ac_unit),
];
List subTitleItems = [
'subTitle: keyboard', 'subTitle: print',
'subTitle: router', 'subTitle: pages',
'subTitle: zoom_out_map', 'subTitle: zoom_out',
'subTitle: youtube_searched_for', 'subTitle: wifi_tethering',
'subTitle: wifi_lock', 'subTitle: widgets',
'subTitle: weekend', 'subTitle: web',
'subTitle: accessible', 'subTitle: ac_unit',
];
}
最终在安卓和ios模拟器上运行效果如下图：
安卓 ListView
iOS ListView
刚学Flutter，有什么错误还望指出
- End -