在日常的开发中,渲染列表数据,我们都比较喜欢使用 ListTile
挂件,本文,我们来认识下它。
开发环境
Flutter Version
:3.16.4- 系统:
macOS Sonoma
-Apple M1
芯片 Android Studio
: 17.0.7
通过 flutter create jimmy_list_tile
创建测试项目。
讲解
我们先简单写一个例子,如下👇
dart
body: Center(
child: Center(
child: Container(
color: Colors.grey,
child: ListTile(
leading: const Icon(Icons.person),
title: const Text("Jimmy"),
subtitle: const Text("嘉明"),
trailing: const Icon(Icons.keyboard_arrow_right),
onTap: () {
print('user tapped.');
},
),
)
),
),
效果图如下:
咦,整体上就是这种效果。如果读者使用过 Ant Design - List 组件,那么可以类比来看待 ListTile
。
我们先来看看这个 ListTile
挂件,都有哪些属性和方法:
dart
const ListTile({
this.leading, // 通常是 Icon 或者 CircleAvatar 挂件
this.title, // List 中的主标题,通常是 Text 挂件。不应该换行,我们可以使用 Text.maxLine 进行单行限制🚫
this.subtitle, // List 中的副标题,通常是 Text 挂件。如果 isThreeLine 为 false 值,那内容就不能换行
this.trailing, // 在 title 后展示,通常是 Icon 挂件
this.isThreeLine = false, // 是否允许 subtitle 能够三行展示,默认值是 false
this.dense, // 是否是紧密的列表
this.visualDensity, // 定义列表的紧凑程度
this.shape, // 边框的形状
this.style, // ListTile 的 tile 的样式,有两个枚举值 list 和 drawer
this.selectedColor, // 选中的颜色,包含 leading, trailing, title, subtile 等
this.iconColor, // icon 的颜色,作用于 leading 和 trailing
this.textColor, // 文本的颜色,作用于 title, subtitle, leading 和 trailing。iconColor 对 leading 和 trailing 的优先级高
this.titleTextStyle, // title 标题文本的样式
this.subtitleTextStyle, // 副标题文本的样式
this.leadingAndTrailingTextStyle, // leading 和 trailing 的样式
this.contentPadding, // 内容的内边距,默认值是 EdgeInsets.symmetric(horizontal: 16.0)
this.enabled = true, // 是否允许被操作,默认能操作
this.onTap, // 点击事件
this.onLongPress, // 长按事件
this.onFocusChange, // 焦点发生更改后触发
this.mouseCursor, // 当鼠标指针进入或悬停在部件上时的鼠标指针样式。
this.selected = false, // 是否选中,默认否
this.focusColor, // 聚焦的颜色
this.hoverColor, // 滑动悬停的颜色
this.splashColor, // 溅射效果的颜色 ⚠️
this.focusNode, // 宏
this.autofocus = false, // 宏
this.tileColor, // 定义 tile 的背景颜色,在 selected 为 false 时生效
this.selectedTileColor, // 选中的 tile 的背景颜色,在 selected 为 true 时生效
this.enableFeedback, // 是否开启特定平台提供的反馈,默认开启。比如,在 Android 上,当启用反馈时,轻触会产生点击声音,长按会产生短暂的振动。
this.horizontalTitleGap, // 水平方向上标题(含副标题)左右的间隔
this.minVerticalPadding, // 最小的垂直内边距
this.minLeadingWidth, // 最小的 leading 宽度
this.titleAlignment, // 定义 leading 和 trailing 的在垂直方向与标题(含副标题)的位置关系
})
上面每个属性和方法,都加上了对应的注解说明
使用时候,我们按需求使用即可。比如 splashColor
,就是我们在点击 item
项的时候,其四散动效的颜色。如下:
dart
body: Center(
child: Center(
child: Container(
// color: Colors.grey, // 这个时候不应该有背景颜色,不然 splashColor 不生效
decoration: BoxDecoration( // 边框的样式
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(10.0),
),
child: ListTile(
splashColor: Colors.red, // 四贱的颜色
leading: const Icon(Icons.person),
title: const Text("Jimmy"),
subtitle: const Text("嘉明"),
trailing: const Icon(Icons.keyboard_arrow_right),
onTap: () {
print('user tapped.');
},
),
)
),
),
效果如下 Gif
图👇
👆我们已经很详细地解析了。其中,布局,我们只要看 leading
,title
,subtitle
和 trailing
即可。我们画下图,那就很好理解了。如下👇:
其中标题 又包含 title
和 subtitle
。
结合 ListView 使用
ListTile
一般结合 ListView
来使用,替换 for
遍历。ListView
是用于显示列表数据的挂件。我们可以这样使用:
dart
final List<String> names = ['Jimmy', 'Kimmy', 'Timmy'];
ListView.builder(
itemCount: names.length,
itemBuilder: (context, index) {
return ListTile(
leading: const Icon(Icons.person),
title: Text(names[index]),
subtitle: const Text("welcome be here 👏"),
trailing: const Icon(Icons.keyboard_arrow_right),
);
},
)
还有更多的使用方式待探索,比如我们可以使用 Dismissible
对 ListTile
进行滑动操作等。读者感兴趣可以了解。【✅】