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

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

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

基础用法

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

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

自定义样式

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

背景颜色

  • backgroundColor: 设置 FilterChip 的背景颜色。
dart 复制代码
FilterChip(
  label: Text('Colored FilterChip'),
  backgroundColor: Colors.blue,
  onSelected: (bool selected) {/* ... */},
)

前景色

  • foregroundColor: 设置 FilterChip 的前景色,如文本颜色。
dart 复制代码
FilterChip(
  label: Text('White Text FilterChip'),
  foregroundColor: Colors.white,
  backgroundColor: Colors.blue,
  onSelected: (bool selected) {/* ... */},
)

标签

  • label: 设置 FilterChip 的标签,可以是任意的 Widget。
dart 复制代码
FilterChip(
  label: Text('Custom Label FilterChip'),
  onSelected: (bool selected) {/* ... */},
)

选中状态

  • selected: 定义 FilterChip 是否被选中。
  • onSelected: 设置当 FilterChip 被点击时的回调。
dart 复制代码
FilterChip(
  label: Text('Selectable FilterChip'),
  selected: true,
  onSelected: (bool selected) {
    // 处理选中状态改变
  },
)

实例:带有图标的 FilterChip

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

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

实例:筛选条件

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

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

实例:动态 FilterChip

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

dart 复制代码
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 的使用,可以帮助你创建出既美观又交互性强的用户界面,提升应用的用户体验。

相关推荐
F2E_Zhangmo26 分钟前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
用户214118326360243 分钟前
Nano Banana免费方案来了!Docker 一键部署 + 魔搭即开即用,小白也能玩转 AI 图像编辑
前端
Zacks_xdc1 小时前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
给月亮点灯|1 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
张迅之2 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
蔗理苦3 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro4 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹4 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风4 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱4 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript