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 ...
随机推荐
- Java语言支持的变量类型有哪几种
Java语言支持的变量类型有: 类变量:独立于方法之外的变量,用 static 修饰. 实例变量:独立于方法之外的变量,不过没有 static 修饰. 局部变量:类的方法中的变量. 实例: publi ...
- 解决VS中不能搜索被折叠的代码块
问题不大,但容易被忽略,解决方法:
- Linux下修改mysql root密码
1.修改MySQL的配置文件(默认为/etc/my.cnf),在[mysqld]下添加一行skip-grant-tables 2.保存配置文件后,重启MySQL服务 service mysqld re ...
- movable-view组件
movable-view组件:可以移动方块 movable-view组件必须是movable-area的直接子元素,才可以进行操作,才可以移动方块 movable-view组件的属性: directi ...
- 查看Oracle数据库中的执行计划
1.set autotrace traceonly命令 2.explain plan for命令 1)explain plan for select * from dual; 2)select * f ...
- fedora23帮定键盘系统操作快捷键
在All settings -> keyboard 主要是以super为主, 然后有 super+ shift+...虽然感觉用 ctrl+super+... 来组合更方便, 但是用 shift ...
- 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_04 IO字节流_6_字节输出流写多个字节的方法
一次写多个字节的方法 要在txt内显示100.49代表1 48 代表0 一次写多个字节 负数前两个组成一个中文.-65和-66 字节数组的一部分 写入字符串方法 当前用的编码格式是utf-8,utf- ...
- 小程序-web-view嵌入H5页面遇到的bug
遇到的问题1:ios页面中,内容过多时有下滑真是功能,但是下滑的时候回看到底部的微信自带的灰色背景及H5的域名(ios的webview中上/下拉露出黑灰色背景问题) 解决办法:给body添加样式--- ...
- jmeter逻辑控制详解(1)
逻辑控制器 Jmeter提供了多种逻辑控制器,下面进行讲解说明: 1.Simple Controller 简单控制器是最基本的控制器,对jmeter测试运行没有任何影响,可以将某些请求归集在一个简单控 ...
- 应用安全-安全设备-Waf系列-软Waf-D盾
安装 下载http://www.d99net.net/down/d_safe_2.1.5.2.zip 使用说明 http://www.d99net.net/News.asp?id=106 免杀 arr ...