Flutter 中 ListTile 挂件

在日常的开发中，渲染列表数据，我们都比较喜欢使用 ListTile 挂件，本文，我们来认识下它。

开发环境

• Flutter Version：3.16.4
• 系统：macOS Sonoma - Apple M1 芯片
• Android Studio： 17.0.7

通过 flutter create jimmy_list_tile 创建测试项目。

讲解

我们先简单写一个例子，如下👇

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 挂件，都有哪些属性和方法：

• leading - 通常是 Icon 或者 CircleAvatar 挂件
• title - List 中的主标题，通常是 Text 挂件。不应该换行，我们可以使用 Text.maxLine 进行单行限制🚫
• subtitle - List 中的副标题，通常是 Text 挂件。如果 isThreeLine 为 false 值，那内容就不能换行
• trailing - 在 title 后展示，通常是 Icon 挂件
• isThreeLine = false - 是否允许 subtitle 能够三行展示，默认值是 false
• dense - 是否是紧密的列表
• visualDensity - 定义列表的紧凑程度
• shape - 边框的形状
• style - ListTile 的 tile 的样式，有两个枚举值 list 和 drawer
• selectedColor - 选中的颜色，包含 leading, trailing, title, subtile 等
• iconColor - icon 的颜色，作用于 leading 和 trailing
• textColor - 文本的颜色，作用于 title, subtitle, leading 和 trailing。iconColor 对 leading 和 trailing 的优先级高
• titleTextStyle - title 标题文本的样式
• subtitleTextStyle - 副标题文本的样式
• leadingAndTrailingTextStyle - leading 和 trailing 的样式
• contentPadding - 内容的内边距，默认值是 EdgeInsets.symmetric(horizontal: 16.0)
• enabled = true - 是否允许被操作，默认能操作
• onTap - 点击事件
• onLongPress - 长按事件
• onFocusChange - 焦点发生更改后触发
• mouseCursor - 当鼠标指针进入或悬停在部件上时的鼠标指针样式。
• selected = false - 是否选中，默认否
• focusColor - 聚焦的颜色
• hoverColor - 滑动悬停的颜色
• splashColor - 溅射效果的颜色 ⚠️
• tileColor - 定义 tile 的背景颜色，在 selected 为 false 时生效
• selectedTileColor - 选中的 tile 的背景颜色，在 selected 为 true 时生效
• enableFeedback - 是否开启特定平台提供的反馈，默认开启。比如，在 Android 上，当启用反馈时，轻触会产生点击声音，长按会产生短暂的振动。
• horizontalTitleGap - 水平方向上标题（含副标题）左右的间隔
• minVerticalPadding - 最小的垂直内边距
• minLeadingWidth - 最小的 leading 宽度
• titleAlignment - 定义 leading 和 trailing 的在垂直方向与标题（含副标题）的位置关系

使用时候，我们按需求使用即可。比如 splashColor，就是我们在点击 item 项的时候，其四散动效的颜色。如下：

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 是用于显示列表数据的挂件。我们可以这样使用：

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