Flutter 中 ListTile 挂件

在日常的开发中,渲染列表数据,我们都比较喜欢使用 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 图👇

👆我们已经很详细地解析了。其中,布局,我们只要看 leadingtitlesubtitletrailing 即可。我们画下图,那就很好理解了。如下👇:

其中标题 又包含 titlesubtitle

结合 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),  
        );  
    },  
)

还有更多的使用方式待探索,比如我们可以使用 DismissibleListTile 进行滑动操作等。读者感兴趣可以了解。【✅】

相关推荐
虾球xz14 分钟前
游戏引擎学习第20天
前端·学习·游戏引擎
Estar.Lee17 分钟前
时间操作[计算时间差]免费API接口教程
android·网络·后端·网络协议·tcp/ip
我爱李星璇20 分钟前
HTML常用表格与标签
前端·html
疯狂的沙粒24 分钟前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员39 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐41 分钟前
前端图像处理(一)
前端
程序猿阿伟1 小时前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒1 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
找藉口是失败者的习惯1 小时前
从传统到未来:Android XML布局 与 Jetpack Compose的全面对比
android·xml
瑞雨溪1 小时前
AJAX的基本使用
前端·javascript·ajax