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

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

在 Flutter 中，FilterChip 是一种特殊类型的 Chip，用于呈现过滤选项。用户可以通过点击 FilterChip 来应用相应的过滤条件，这在需要对列表或集合进行筛选的场景中非常有用，如在电商应用中筛选商品，或在新闻应用中根据类别筛选文章。

基础用法

FilterChip 最基本的用法是显示一段文本，并且允许用户点击以应用过滤：

FilterChip(
  label: Text('Basic FilterChip'),
  onSelected: (bool selected) {
    // 当 FilterChip 被点击时执行的操作
  },
)

自定义样式

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

背景颜色

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

FilterChip(
  label: Text('Colored FilterChip'),
  backgroundColor: Colors.blue,
  onSelected: (bool selected) {/* ... */},
)

前景色

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

FilterChip(
  label: Text('White Text FilterChip'),
  foregroundColor: Colors.white,
  backgroundColor: Colors.blue,
  onSelected: (bool selected) {/* ... */},
)

标签

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

FilterChip(
  label: Text('Custom Label FilterChip'),
  onSelected: (bool selected) {/* ... */},
)

选中状态

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

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

实例：带有图标的 FilterChip

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

FilterChip(
  prefix: Icon(Icons.local_offer), // 前缀图标
  label: Text('FilterChip with Icon'),
  onSelected: (bool selected) {/* ... */},
)

实例：筛选条件

FilterChip 可以用来展示筛选条件，允许用户通过点击来选择或取消选择：

FilterChip(
  label: Text('Discounts'),
  selected: discountsFilterActive, // 假设这是一个布尔值
  onSelected: (bool value) {
    // 更新筛选条件的状态
    setState(() {
      discountsFilterActive = value;
    });
  },
)

实例：动态 FilterChip

可以动态创建 FilterChip 列表，根据筛选项的数量或用户的选择动态添加或移除 FilterChip：

List<String> _selectedFilters = [];

@override
Widget build(BuildContext context) {
  return Wrap(
    children: filters.map((filter) {
      return FilterChip(
        label: Text(filter),
        selected: _selectedFilters.contains(filter),
        onSelected: (bool selected) {
          setState(() {
            if (selected) {
              _selectedFilters.add(filter);
            } else {
              _selectedFilters.remove(filter);
            }
          });
        },
      );
    }).toList(),
  );
}

结语

FilterChip 是 Flutter 中一个实用的小部件，它提供了一种直观的方式来展示和操作筛选条件，特别适合用于需要筛选功能的界面。掌握 FilterChip 的使用，可以帮助你创建出既美观又交互性强的用户界面，提升应用的用户体验。