Flutter-ListTile
ListTile 通常用于在 Flutter 中填充 ListView。在这篇文章中,我将用可视化的例子来说明所有的参数。
title
title 参数可以接受任何小部件,但通常是文本小部件
ListTile(
title: Text('Horse'),
)

subtitle
副标题是标题下面较小的文本
ListTile(
title: Text('Horse'),
subtitle: Text('A strong animal'),
)

dense
使文本更小,并将所有内容打包在一起
ListTile(
title: Text('Horse'),
subtitle: Text('A strong animal'),
dense: true,
)

leading
将图像或图标添加到列表的开头。这通常是一个图标。
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(imageUrl),
),
title: Text('Horse'),
)

ListTile(
leading: Icon(Icons.home),
title: Text('House'),
)

trailing
设置拖尾将在列表的末尾放置一个图像。这对于指示主-细节布局特别有用。
ListTile(
title: Text('Horse'),
trailing: Icon(Icons.keyboard_arrow_right),
)

contentPadding
设置内容边距,默认是 16,但我们在这里设置为 0
ListTile(
title: Text('Horse'),
trailing: Icon(Icons.keyboard_arrow_right),
contentPadding: EdgeInsets.symmetric(horizontal: 0.0),
)

selected
如果选中列表的 item 项,那么文本和图标的颜色将成为主题的主颜色。
ListTile(
title: Text('Horse'),
trailing: Icon(Icons.keyboard_arrow_right),
selected: true,
)

Gesture recognition
ListTile 可以检测用户的点击和长按事件,onTap 为单击,onLongPress 为长按。对于波纹效果是内置的
ListTile(
title: Text('Horse'),
onTap: () {
// do something
},
onLongPress: (){
// do something else
},
)

enabled
通过将 enable 设置为 false,来禁止点击事件
ListTile(
title: Text('Horse'),
onTap: () {
// this will not get called
},
enabled: false,
)

ListTile.divideTiles
静态方法 divideTiles 可以在 titles 之间添加分隔符,这个颜色有点淡,需要看仔细点才能看出来,哈哈
ListView(
children: ListTile.divideTiles(
context: context,
tiles: [
ListTile(
title: Text('Horse'),
),
ListTile(
title: Text('Cow'),
),
ListTile(
title: Text('Camel'),
),
ListTile(
title: Text('Sheep'),
),
ListTile(
title: Text('Goat'),
),
]
).toList(),
)

使用实例
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'My App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(title: Text('ListTile guide')),
body: BodyWidget(),
),
);
}
} String horseUrl = 'https://i.stack.imgur.com/Dw6f7.png';
String cowUrl = 'https://i.stack.imgur.com/XPOr3.png';
String camelUrl = 'https://i.stack.imgur.com/YN0m7.png';
String sheepUrl = 'https://i.stack.imgur.com/wKzo8.png';
String goatUrl = 'https://i.stack.imgur.com/Qt4JP.png'; class BodyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(horseUrl),
),
title: Text('Horse'),
subtitle: Text('A strong animal'),
trailing: Icon(Icons.keyboard_arrow_right),
onTap: () {
print('horse');
},
selected: true,
),
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(cowUrl),
),
title: Text('Cow'),
subtitle: Text('Provider of milk'),
trailing: Icon(Icons.keyboard_arrow_right),
onTap: () {
print('cow');
},
),
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(camelUrl),
),
title: Text('Camel'),
subtitle: Text('Comes with humps'),
trailing: Icon(Icons.keyboard_arrow_right),
onTap: () {
print('camel');
},
enabled: false,
),
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(sheepUrl),
),
title: Text('Sheep'),
subtitle: Text('Provides wool'),
trailing: Icon(Icons.keyboard_arrow_right),
onTap: () {
print('sheep');
},
),
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(goatUrl),
),
title: Text('Goat'),
subtitle: Text('Some have horns'),
trailing: Icon(Icons.keyboard_arrow_right),
onTap: () {
print('goat');
},
),
],
);
}
}
來源:https://www.jianshu.com/p/6488b2fa4f53
Flutter-ListTile的更多相关文章
- Flutter ListTile - Flutter每周一组件
该文章属于[Flutter每周一组件]系列,其它组件可以查看该系列下的文章,该系列会不间断更新:所有组件的demo已经上传值Github: https://github.com/xj124456/fl ...
- Flutter——Drawer、DrawerHeader、UserAccountsDrawerHeader组件(侧边栏组件)
在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏,传入 endDrawer 可以定义右侧边栏.侧边栏默认是隐藏的,我们可以通过手指滑动显示侧边栏,也可以通过点击按钮显示侧边栏. ...
- flutter中ListView的详细讲解
1.ListView的简单介绍 ListView是最常用的可以滚动组件之一, 它可以沿一个方向进行线性排列所有的子组件. 下面是ListView的属性值介绍: scrollDirection:列表的滚 ...
- Flutter实战视频-移动电商-66.会员中心_编写ListTile通用方法
66.会员中心_编写ListTile通用方法 布局List里面嵌套一个ListTile的布局效果 里面有很多条记录,以后可能还会增加,所以这里我们做一个通用的组件 通用组件方法 这里使用Column布 ...
- 编写第一个Flutter App(翻译)
博客搬迁至http://blog.wangjiegulu.com RSS订阅:http://blog.wangjiegulu.com/feed.xml 以下代码 Github 地址:https://g ...
- Flutter 获取服务器数据
文档 文档版本有些老 使用 dio 来获取数据 demo import 'dart:io'; import 'dart:convert'; import 'package:flutter/materi ...
- Android程序员的Flutter学习笔记
作为忠实与较资深的Android汪, 最近抽出了一些时间研究了一下Google的亲儿子Flutter, 尚属皮毛, 只能算是个简单的记录吧. Google自2017年第一次提出Flutter, 到20 ...
- flutter -------- ListView的使用
学习了Flutter,来分享一下学习的一些常用的知识,先来说说ListView 案例效果: ListView是一个类似列的widget,它的内容对于其渲染框太长时会自动提供滚动. ListView 摘 ...
- [Flutter] 写第一个 Flutter app,part1 要点
模拟器中调试元素的布局: Android Studio 右侧边栏 Flutter Inspector,选择 Toggle Debug Paint 打开. 格式化代码: 编辑器中右键 Reformat ...
- flutter控件之ExpansionPanelList
import 'package:flutter/material.dart'; class LearnExpansionPanelList extends StatefulWidget{ @overr ...
随机推荐
- fengmiantu---
- vsphere client 虚拟机随主机自动启动
- DAY 6 上午
如果不是割点,答案减少2(n-1) 如果删去割点,删去之后整个图分成多个连通块 每一个联通块的大小*其他连通块的大小之和 先求出缩点之后的树 加尽可能少的边使树变成一个边双 找出树上的所有叶子节点(度 ...
- CSS - 层叠上下文(The stacking context)
对 MDN 的上的例子的拓展 Root - DIV #1(z-index: 5) - DIV #2(z-index: 2) - DIV #3(z-index: 4) - DIV #4(z-index: ...
- python twisted异步将数据导入到数据库中
from twisted.enterprise import adbapi from twisted.internet import reactor def creat_conn(): # 数据库基本 ...
- postman+newman+jenkins接口自动化
postman用来做接口测试非常方便,接口较多时,则可以实现接口自动化 目录 1.环境准备 2.本机调试脚本 3.集成jenkins 1.环境准备 1.1安装nodejs6.0+ 安装nodejs6. ...
- Matlab入门基础
matlab入门篇,一些基础用法记一下~ M语言是解释型语言 who:查看当前变量 whoes:查看当前变量及其维数.所占字节数等. clear: 清除所有变量 clear + 变量名 ...
- github创建仓库,往github上上传自己的项目
k第一步: 在github上创建仓库 第二步: 创建一个新的项目,填写项目名称,描述 创建完成之后,跳转到下面的页面,下面红框中的网址要记住,在后面上传代码的时候需要使用 这个地址必须要记住!!! 第 ...
- Hibernate入门4
HIbernate的导航查询: 适用场景:当一张A表关联到另一张B表的多条记录,存在一对多的关系(或者多对多),那么查询A表的记录时,就可以将A表某条记录关联的B表的所有记录查询出来,这种方式,就叫做 ...
- CentOSLinux系统中Ansible自动化运维的安装以及利用Ansible部署JDK和Hadoop
Ansible 安装和配置 Ansible 说明 Ansible 官网:https://www.ansible.com/ Ansible 官网 Github:https://github.com/an ...