Flutter: 图解 ListView 的多种绑定方式
小菜觉得 Flutter 中 ListView 这个控件很强大,它兼顾了 Android 中的 ScrollView 和 ListView 两个控件的效果,既可以当列表用也可以充当可滑动布局。小菜今天主要测试作为普通列表时的基本用法。
效果图1.jpg
列表 item -> ListTile
Flutter 很贴心的提供了一种常见的列表 item 样式,可以包括前后图标以及大小标题的样式;小菜特意了解了一下 ListTile 的基本属性,如下:
const ListTile({
Key key,
this.leading, // item 前置图标
this.title, // item 标题
this.subtitle, // item 副标题
this.trailing, // item 后置图标
this.isThreeLine = false, // item 是否三行显示
this.dense, // item 直观感受是整体大小
this.contentPadding, // item 内容内边距
this.enabled = true,
this.onTap, // item onTap 点击事件
this.onLongPress, // item onLongPress 长按事件
this.selected = false, // item 是否选中状态
})
Tips: 小菜对 dense 属性理解不是很好,直观的感觉是 dense 为 true 时整体会小一些,文字更为明显,就像整体分辨率变高;如下图:
dense 为 false.jpg
列表 -> ListView
Flutter 中 ListView 用法与 Android 中类似,首先添加数据,之后绑定列表;Flutter 中绑定列表有四种方式,分别是 默认 List / ListView.builder / ListView.separated / ListView.custom;小菜主要对前三种方式逐一测试;如图:
无论是用那种绑定数据的方式首先第一步都要添加数据,小菜测试基本样式包括 item 前置图标(leading)、标题文字(title)、后置图标(trailing),并设置了基本的 onTap() 方法;如下:
List<String> strItems = <String>[
'图标 -> keyboard', '图标 -> print',
'图标 -> router', '图标 -> pages',
'图标 -> zoom_out_map', '图标 -> zoom_out',
'图标 -> youtube_searched_for', '图标 -> wifi_tethering',
'图标 -> wifi_lock', '图标 -> widgets',
'图标 -> weekend', '图标 -> web',
'图标 -> accessible', '图标 -> ac_unit',
]; List<Icon> iconItems = <Icon>[
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),
]; Widget buildListData(BuildContext context, String strItem, Icon iconItem) {
return new ListTile(
isThreeLine: false,
leading: iconItem,
title: new Text(strItem),
trailing: new Icon(Icons.keyboard_arrow_right),
onTap: () {
showDialog(
context: context,
builder: (BuildContext context) {
return new AlertDialog(
title: new Text(
'ListViewDemo',
style: new TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
),
content: new Text('您选择的item内容为:$strItem'),
);
},
);
},
);
}
1. 默认 List
小菜理解默认 List 方式,是把数据 Iterable 添加到列表中,之后直接添加到 ListView 即可;如下:
List<Widget> _list = new List();
for (int i = ; i < strItems.length; i++) {
_list.add(buildListData(context, strItems[i], iconItems[i]));
}
// 添加分割线
var divideList =
ListTile.divideTiles(context: context, tiles: _list).toList();
body: new Scrollbar(
child: new ListView(
// 添加ListView控件
// children: _list, // 无分割线
children: divideList, // 添加分割线
),
);
Tips: 如果需要设置分割线,需要对列表 item 添加处理,ListTile.divideTiles。
2. ListView.builder
小菜理解 builder 方式很像对话框类型逐个添加需要的属性;需要在 builder 中添加列表数据;而添加分割线的方式更让小菜体会到 Flutter 一切都是 widget 思想的重要性,如下:
// 没有分割线
child: new ListView.builder(
itemCount: iconItems.length, // 数据长度
itemBuilder: (context, item) {
return buildListData(context, strItems[item], iconItems[item]);
},
), // 添加分割线
child: new ListView.builder(
itemCount: iconItems.length,
itemBuilder: (context, item) {
return new Container(
child: new Column(
children: <Widget>[
buildListData(context, strItems[item], iconItems[item]),
new Divider()
],
),
);
},
),
3. ListView.separated
小菜对 separated 方式最大的理解是有直接的分隔符设置方式,对分隔符列表应用更实用;设置 separatorBuilder 属性即可;如下:
child: new ListView.separated(
itemCount: iconItems.length,
separatorBuilder: (BuildContext context, int index) => new Divider(), // 添加分割线
itemBuilder: (context, item) {
return buildListData(context, strItems[item], iconItems[item]);
},
),
4. ListView.custom
小菜暂时不对本加载方式做实例尝试,小菜理解 ListView.custom 更适合对 item 中含有子类 item,并对子类 item 的显隐性有更多操作时使用该方式更好;在以后的尝试中小菜会单独对这种方式进行测试整理。
主要源码
List<Widget> _list = new List(); @override
Widget build(BuildContext context) {
for (int i = ; i < strItems.length; i++) {
_list.add(buildListData(context, strItems[i], iconItems[i]));
}
var divideList =
ListTile.divideTiles(context: context, tiles: _list).toList();
return new Scaffold(
body: new Scrollbar(
// 默认方式 List
// child: new ListView(
// children: divideList, //添加ListView控件
// ),
// ListView.separated 方式
// child: new ListView.separated(
// itemCount: iconItems.length,
// separatorBuilder: (BuildContext context, int index) => new Divider(),
// itemBuilder: (context, item) {
// return buildListData(context, strItems[item], iconItems[item]);
// },
// ),
// ListView.builder 方式
child: new ListView.builder(
itemCount: iconItems.length,
itemBuilder: (context, item) {
return new Container(
child: new Column(
children: <Widget>[
buildListData(context, strItems[item], iconItems[item]),
new Divider()
],
),
);
},
),
// child: new ListView.custom(
//
// ),
),
);
}
Tips: 列表中有一个属性很有意思:reverse 是否反转,如果设为 true,列表默认滑倒底部而且数据也是倒叙排列;若设为 false,则一切正常。其他很多属性也很有特点,小菜还没来得及深入探究。
Flutter: 图解 ListView 的多种绑定方式的更多相关文章
- SVN服务的模式和多种访问方式 多种访问原理图解与优缺点
SVN企业应用场景 SVN任是当前企业的主流.git正在发展,未来会成为主流.如果大家精力足够,建议同时掌握. 1.4运维人员掌握版本管理 对于版本管理系统,运维人员需要掌握的技术点: 1.安装.部署 ...
- C#开发微信门户及应用(11)--微信菜单的多种表现方式介绍
在前面一系列文章中,我们可以看到微信自定义菜单的重要性,可以说微信公众号账号中,菜单是用户的第一印象,我们要规划好这些菜单的内容,布局等信息.根据微信菜单的定义,我们可以看到,一般菜单主要分为两种,一 ...
- SNF快速开发平台MVC-各种级联绑定方式,演示样例程序(包含表单和表格控件)
做了这么多项目,经常会使用到级联.联动的情况. 如:省.市.县.区.一级分类.二级分类.三级分类.仓库.货位. 方式:有表单需要做级联的,还是表格行上需要做级联操作的. 实现:实现方法也有很多种方式. ...
- atitit.guice3 绑定方式打总结生成非单例对象toInstance toProvider区别 v2 pb29
atitit.guice3 绑定方式打总结生成非单例对象toInstance toProvider区别 v2 pb29 1. 三 绑定方式的介绍1 2. To接口,链式绑定,用的最多的1 3. toC ...
- C#高性能TCP服务的多种实现方式
哎~~ 想想大部分园友应该对 "高性能" 字样更感兴趣,为了吸引眼球所以标题中一定要突出,其实我更喜欢的标题是<猴赛雷,C#编写TCP服务的花样姿势!>. 本篇文章的主 ...
- wpf中UserControl的几种绑定方式
我们经常会抽取一些可重用的控件,某个属性是否需要重用,直接决定了这个属性的绑定方式. 1.完全不可重用的控件 有一些与业务强相关的控件,它们的属性完全来自ViewModel,越是相对复杂的控件,越容易 ...
- [Spring MVC] - SpringMVC的各种参数绑定方式
SpringMVC的各种参数绑定方式 1. 基本数据类型(以int为例,其他类似):Controller代码: @RequestMapping("saysth.do") publi ...
- 顺序表及其多种实现方式 --- C/C++
所谓顺序表,即线性表的顺序存储结构.下面给出的是数据结构---线性表的定义. ADT List{ 数据对象: 线性表的数据对象的集合为{a1,a2,a3,...,an},每个元素的类型为ElemTyp ...
- SpringMVC的各种参数绑定方式
1. 基本数据类型(以int为例,其他类似):2. 包装类型(以Integer为例,其他类似):3. 自定义对象类型:4. 自定义复合对象类型:5. List绑定:6. Set绑定:7. Map绑定: ...
随机推荐
- Java虚拟机的内存组成
查了诸多的地方看到的都是这样一句话,我也Copy过来. 按照官方的说法:"Java 虚拟机具有一个堆,堆是运行时数据区域,所有类实例和数组的内存均从此处分配.堆是在 Java 虚拟机启动时创 ...
- C# 连接Paradox DB
Paradox数据库是一个成名于15年前的数据库,那时候Borland公司还存在.最近客户提出需求,要在一套用了12年+的应用程序上作些功能更改.这套应用程序使用Delphi+Paradox数据库. ...
- (转)MySQL 5.6 OOM 问题解决分享
本文来自:杨德华的原创分享 | MySQL 5.6 OOM 问题解决分享 原文:http://www.cnblogs.com/zhoujinyi/p/5763112.html 延伸阅读:Linux的内 ...
- 前端必备:FastStoneCapture 和 Licecap &&& mingw c++ 编译执行
端必备:FastStoneCapture 和 Licecap FastStoneCapture这个软件非常小,只有2M多,并且其功能很强大,包括截图,录制视频,量尺,取色等等,对于前端工程师绝对是必备 ...
- kafka 消费者offset记录位置和方式
我们大家都知道,kafka消费者在会保存其消费的进度,也就是offset,存储的位置根据选用的kafka api不同而不同. 首先来说说消费者如果是根据javaapi来消费,也就是[kafka.jav ...
- Android 开发工具类 01_AppUtils
1.获取应用程序名称: 2.获取应用程序版本信息. import android.content.Context; import android.content.pm.PackageInfo; imp ...
- windows设置多用户模式
在实际使用我们较多使用的都是windows系统的单用户模式,它意味着当我们登录一个用户的时候如果另外一个用户也在登录,那么就得等待另外一个用户退出后才可以登录我们这个用户,但是实际需求中,我们经常会遇 ...
- springboot 常用插件
热部署 使用run as -java application, 把spring-loader-1.2.4.RELEASE.jar下载下来,放到项目的lib目录中,然后把IDEA的run参数里VM参数设 ...
- linux之tmpfs
1.概述 tmpfs是ramfs的衍生品,ramfs是基于RAM的文件系统,不能使用swap空间:tmpfs可以动态释放空间.可以使用swap空间.ramfs不能控制使用内存的大小容易使内存爆掉:而t ...
- PowerDesigner中利用数据库表反向生成PDM(jdk必须是32位)
第一步:创建一个空的PDM模型(选择对应的DBMS):File-->New 第二步:选择DataBase-->Configure Connections,配置即将连接的数据库 第三步:选择 ...