Flutter 中 ListTile 挂件

Jimmy_is_jimmy

发布于 2024-03-11 08:13:02

900

发布于 2024-03-11 08:13:02

文章被收录于专栏：call_me_Rcall_me_R

在日常的开发中，渲染列表数据，我们都比较喜欢使用 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 挂件，都有哪些属性和方法：

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 项的时候，其四散动效的颜色。如下：

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