ListTile 通常用于在 Flutter 中填充 ListView。在这篇文章中,我将用可视化的例子来说明所有的参数。

title

title 参数可以接受任何小部件,但通常是文本小部件

ListTile(
title: Text('Horse'),
)
title.png

subtitle

副标题是标题下面较小的文本

ListTile(
title: Text('Horse'),
subtitle: Text('A strong animal'),
)
subtitle.png

dense

使文本更小,并将所有内容打包在一起

ListTile(
title: Text('Horse'),
subtitle: Text('A strong animal'),
dense: true,
)
 
dense.png

leading

将图像或图标添加到列表的开头。这通常是一个图标。

ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(imageUrl),
),
title: Text('Horse'),
)
leading.png
ListTile(
leading: Icon(Icons.home),
title: Text('House'),
)
leading1.png

trailing

设置拖尾将在列表的末尾放置一个图像。这对于指示主-细节布局特别有用。

ListTile(
title: Text('Horse'),
trailing: Icon(Icons.keyboard_arrow_right),
)
 
trailing.png

contentPadding

设置内容边距,默认是 16,但我们在这里设置为 0

ListTile(
title: Text('Horse'),
trailing: Icon(Icons.keyboard_arrow_right),
contentPadding: EdgeInsets.symmetric(horizontal: 0.0),
)
 
contentPadding.png

selected

如果选中列表的 item 项,那么文本和图标的颜色将成为主题的主颜色。

ListTile(
title: Text('Horse'),
trailing: Icon(Icons.keyboard_arrow_right),
selected: true,
)
 
selected.png

Gesture recognition

ListTile 可以检测用户的点击和长按事件,onTap 为单击,onLongPress 为长按。对于波纹效果是内置的

ListTile(
title: Text('Horse'),
onTap: () {
// do something
},
onLongPress: (){
// do something else
},
)
 
Gesture.gif

enabled

通过将 enable 设置为 false,来禁止点击事件

ListTile(
title: Text('Horse'),
onTap: () {
// this will not get called
},
enabled: false,
)
 
enabled.png

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(),
)
divideTiles.png

使用实例

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的更多相关文章

  1. Flutter ListTile - Flutter每周一组件

    该文章属于[Flutter每周一组件]系列,其它组件可以查看该系列下的文章,该系列会不间断更新:所有组件的demo已经上传值Github: https://github.com/xj124456/fl ...

  2. Flutter——Drawer、DrawerHeader、UserAccountsDrawerHeader组件(侧边栏组件)

    在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏,传入 endDrawer 可以定义右侧边栏.侧边栏默认是隐藏的,我们可以通过手指滑动显示侧边栏,也可以通过点击按钮显示侧边栏. ...

  3. flutter中ListView的详细讲解

    1.ListView的简单介绍 ListView是最常用的可以滚动组件之一, 它可以沿一个方向进行线性排列所有的子组件. 下面是ListView的属性值介绍: scrollDirection:列表的滚 ...

  4. Flutter实战视频-移动电商-66.会员中心_编写ListTile通用方法

    66.会员中心_编写ListTile通用方法 布局List里面嵌套一个ListTile的布局效果 里面有很多条记录,以后可能还会增加,所以这里我们做一个通用的组件 通用组件方法 这里使用Column布 ...

  5. 编写第一个Flutter App(翻译)

    博客搬迁至http://blog.wangjiegulu.com RSS订阅:http://blog.wangjiegulu.com/feed.xml 以下代码 Github 地址:https://g ...

  6. Flutter 获取服务器数据

    文档 文档版本有些老 使用 dio 来获取数据 demo import 'dart:io'; import 'dart:convert'; import 'package:flutter/materi ...

  7. Android程序员的Flutter学习笔记

    作为忠实与较资深的Android汪, 最近抽出了一些时间研究了一下Google的亲儿子Flutter, 尚属皮毛, 只能算是个简单的记录吧. Google自2017年第一次提出Flutter, 到20 ...

  8. flutter -------- ListView的使用

    学习了Flutter,来分享一下学习的一些常用的知识,先来说说ListView 案例效果: ListView是一个类似列的widget,它的内容对于其渲染框太长时会自动提供滚动. ListView 摘 ...

  9. [Flutter] 写第一个 Flutter app,part1 要点

    模拟器中调试元素的布局: Android Studio 右侧边栏 Flutter Inspector,选择 Toggle Debug Paint 打开. 格式化代码: 编辑器中右键 Reformat ...

  10. flutter控件之ExpansionPanelList

    import 'package:flutter/material.dart'; class LearnExpansionPanelList extends StatefulWidget{ @overr ...

随机推荐

  1. fengmiantu---

  2. vsphere client 虚拟机随主机自动启动

  3. DAY 6 上午

    如果不是割点,答案减少2(n-1) 如果删去割点,删去之后整个图分成多个连通块 每一个联通块的大小*其他连通块的大小之和 先求出缩点之后的树 加尽可能少的边使树变成一个边双 找出树上的所有叶子节点(度 ...

  4. 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: ...

  5. python twisted异步将数据导入到数据库中

    from twisted.enterprise import adbapi from twisted.internet import reactor def creat_conn(): # 数据库基本 ...

  6. postman+newman+jenkins接口自动化

    postman用来做接口测试非常方便,接口较多时,则可以实现接口自动化 目录 1.环境准备 2.本机调试脚本 3.集成jenkins 1.环境准备 1.1安装nodejs6.0+ 安装nodejs6. ...

  7. Matlab入门基础

    matlab入门篇,一些基础用法记一下~ M语言是解释型语言 ​ who:查看当前变量 ​ whoes:查看当前变量及其维数.所占字节数等. ​ clear: 清除所有变量 ​ clear + 变量名 ...

  8. github创建仓库,往github上上传自己的项目

    k第一步: 在github上创建仓库 第二步: 创建一个新的项目,填写项目名称,描述 创建完成之后,跳转到下面的页面,下面红框中的网址要记住,在后面上传代码的时候需要使用 这个地址必须要记住!!! 第 ...

  9. Hibernate入门4

    HIbernate的导航查询: 适用场景:当一张A表关联到另一张B表的多条记录,存在一对多的关系(或者多对多),那么查询A表的记录时,就可以将A表某条记录关联的B表的所有记录查询出来,这种方式,就叫做 ...

  10. CentOSLinux系统中Ansible自动化运维的安装以及利用Ansible部署JDK和Hadoop

    Ansible 安装和配置 Ansible 说明 Ansible 官网:https://www.ansible.com/ Ansible 官网 Github:https://github.com/an ...