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