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 进行滑动操作等。读者感兴趣可以了解。【✅】

相关推荐
吕彬-前端10 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱12 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai22 分钟前
uniapp
前端·javascript·vue.js·uni-app
无极程序员28 分钟前
PHP常量
android·ide·android studio
bysking1 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
萌面小侠Plus2 小时前
Android笔记(三十三):封装设备性能级别判断工具——低端机还是高端机
android·性能优化·kotlin·工具类·低端机
慢慢成长的码农2 小时前
Android Profiler 内存分析
android
大风起兮云飞扬丶2 小时前
Android——多线程、线程通信、handler机制
android