Flutter 中的 Chip 小部件：全面指南

Flutter 中的 Chip 小部件：全面指南

在 Flutter 中，Chip 是一种紧凑的元素，用于向用户呈现小块信息。Chip 可以用来展示输入的标签、选项或实体，如搜索关键词、过滤条件、联系人等。它们通常是圆形的，并且可以包含图标、文本或其他小部件。

基础用法

Chip 最基本的用法是显示一段文本：

Chip(
  label: Text('Basic Chip'),
)
1
2
3

这将创建一个简单的 Chip，其中包含一个 “Basic Chip” 文本。

自定义样式

Chip 提供了多种属性来定制其外观：

背景颜色

• backgroundColor: 设置 Chip 的背景颜色。

Chip(
  label: Text('Colored Chip'),
  backgroundColor: Colors.blue,
)
1
2
3
4

前景色

• foregroundColor: 设置 Chip 的前景色，如文本颜色。

Chip(
  label: Text('White Text Chip'),
  foregroundColor: Colors.white,
  backgroundColor: Colors.blue,
)
1
2
3
4
5

边框和阴影

• border: 设置 Chip 的边框。
• elevation: 设置 Chip 的阴影高度。

Chip(
  label: Text('Outlined Chip'),
  border: Border.all(color: Colors.black),
  elevation: 0.0, // 移除阴影
)
1
2
3
4
5

标签

• label: 设置 Chip 的标签，可以是任意的 Widget。

Chip(
  label: Text('Custom Label'),
)
1
2
3

点击反馈

• onPressed: 设置 Chip 被按下时的回调。

Chip(
  label: Text('Clickable Chip'),
  onPressed: () {
    // 处理点击事件
  },
)
1
2
3
4
5
6

删除按钮

• onDeleteted: 设置当删除图标被点击时的回调。

Chip(
  label: Text('Deletable Chip'),
  onDeleted: () {
    // 处理删除事件
  },
)
1
2
3
4
5
6

实例：带有图标的 Chip

Chip 可以包含图标，例如在标签的前面或后面：

Chip(
  avatar: CircleAvatar(child: Text('A')),
  label: Text('Chip with Avatar'),
  // 可以添加一个删除按钮
)
1
2
3
4
5

实例：选择过滤 Chip

Chip 可以用来实现选择和过滤功能：

FilterChip(
  label: Text('Filter by Color'),
  onPressed: () {
    // 应用过滤逻辑
  },
)
1
2
3
4
5
6

实例：输入标签

Chip 也可以用来展示输入的标签，如搜索关键词：

InputChip(
  label: Text('Search Term'),
  onPressed: () {
    // 处理搜索逻辑
  },
)
1
2
3
4
5
6

实例：开关 Chip

Chip 可以作为开关使用，通过结合 MaterialTapTarget：

ChoiceChip(
  label: Text('Toggle Chip'),
  onSelected: (bool selected) {
    // 处理选中/未选中逻辑
  },
  selected: true,
)
1
2
3
4
5
6
7

结语

Chip 是 Flutter 中一个多功能的小部件，它提供了一种简洁的方式来展示和操作小块信息。无论是用于标签、过滤条件还是用户输入，Chip 都能以一种直观和一致的方式呈现信息。掌握 Chip 的使用，可以帮助你创建出既美观又实用的用户界面。