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

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

在 Flutter 中，InputChip 是一种特殊类型的 Chip，用于呈现和选择信息的小块。InputChip 通常用于搜索界面，允许用户快速选择一个选项或输入一个新选项。它们是交互式的，可以包含文本、图标或其他小部件。

基础用法

InputChip 最基本的用法是显示一段文本，并且允许用户点击：

InputChip(
  label: Text('Basic InputChip'),
  onDeleted: () {
    // 当删除按钮被点击时执行的操作
  },
)

自定义样式

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

背景颜色

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

InputChip(
  label: Text('Colored InputChip'),
  backgroundColor: Colors.blue,
  onDeleted: () {/* ... */},
)

前景色

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

InputChip(
  label: Text('White Text InputChip'),
  foregroundColor: Colors.white,
  backgroundColor: Colors.blue,
  onDeleted: () {/* ... */},
)

标签

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

InputChip(
  label: Text('Custom Label InputChip'),
  onDeleted: () {/* ... */},
)

删除按钮

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

InputChip(
  label: Text('Deletable InputChip'),
  onDeleted: () {
    // 处理删除事件
  },
)

选择状态

• selected: 定义 InputChip 是否被选中。
• onSelected: 设置当 InputChip 被点击时的回调。

InputChip(
  label: Text('Selectable InputChip'),
  selected: true,
  onSelected: (bool selected) {
    // 处理选中状态改变
  },
  onDeleted: () {/* ... */},
)

实例：带有图标的 InputChip

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

InputChip(
  prefix: Icon(Icons.event), // 前缀图标
  label: Text('InputChip with Icon'),
  onDeleted: () {/* ... */},
)

实例：允许输入的 InputChip

InputChip 可以用于实现用户输入，通过结合 TextField：

TextField(
  decoration: InputDecoration(
    hintText: 'Add a chip',
  ),
  onSubmitted: (value) {
    // 当用户提交输入时，可以在这里添加一个新的 InputChip
  },
)

实例：过滤选项

InputChip 可以用来展示过滤选项，允许用户通过点击来选择或取消选择：

List<String> filters = ['All', 'Active', 'Completed'];

... // 在某个 Widget 中
children: filters.map((filter) {
  return InputChip(
    label: Text(filter),
    selected: true, // 假设所有选项默认选中
    onSelected: (bool selected) {
      // 处理过滤选项的选中状态
    },
    onDeleted: () {
      // 处理删除过滤选项
    },
  );
}).toList(),

结语

InputChip 是 Flutter 中一个实用的小部件，它提供了一种直观的方式来展示和操作小块信息，特别适合用于搜索界面和过滤选项。掌握 InputChip 的使用，可以帮助你创建出既美观又交互性强的用户界面。