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: [ 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'); }, ), ], ); }}复制代码 作者介绍
- 陈坚润：广州芦苇科技 APP 团队 Android 开发工程师
内推信息
- 我们正在招募小伙伴，有兴趣的小伙伴可以把简历发到 app@talkmoney.cn，备注：来自掘金社区
- 详情可以戳这里-->