1. 项目概述
作为一个长期使用Flutter进行跨平台开发的工程师，我最近在OpenHarmony平台上实现了一个衣橱管家App。其中最让我有成就感的就是这个多维度筛选功能的设计与实现。当用户的衣橱里有上百件衣物时，如何快速找到想要的那件就成了一个痛点问题。
这个筛选功能支持四个维度的组合查询：分类（上衣、裤子等）、颜色、季节和价格区间。通过合理的UI设计和状态管理，实现了流畅的交互体验。下面我就从技术实现的角度，详细拆解这个功能的开发过程。
2. 核心设计思路
2.1 筛选维度选择
在设计初期，我调研了市面上主流的衣橱管理App，发现以下几个筛选维度最为常用：
- 分类筛选：这是最基础的维度，用户通常先确定要找什么类型的衣物
- 颜色筛选：搭配衣物时特别有用，可以快速找到同色系或互补色的单品
- 季节筛选：根据当前季节快速定位适合穿着的衣物
- 价格筛选：对于预算有限的用户很有价值
提示：在设计筛选维度时，要考虑用户的实际使用场景，而不是简单堆砌所有可能的属性。每个维度都应该有明确的用户需求支撑。
2.2 状态管理方案
筛选功能本质上是一个多条件查询系统，需要管理多个筛选条件的状态。在Flutter中，有几种常见的状态管理方案：
- StatefulWidget本地状态：适合简单的、不跨组件共享的状态
- Provider：适合中等复杂度的应用状态
- Riverpod/Bloc：适合大型复杂应用
考虑到我们的筛选功能：
- 状态只在当前页面使用
- 不需要跨组件共享
- 复杂度适中
最终选择了最直接的StatefulWidget方案，既简单又高效。对于衣物数据，则使用了Provider进行全局管理，因为数据需要在多个页面间共享。
3. 页面实现细节
3.1 基础页面结构
整个筛选页面采用经典的上下布局：
- 上部：筛选条件区域（可滚动）
- 下部：筛选结果统计和操作按钮
dart复制class FilterScreen extends StatefulWidget {
const FilterScreen({super.key});
@override
State<FilterScreen> createState() => _FilterScreenState();
}
class _FilterScreenState extends State<FilterScreen> {
// 筛选状态变量
String? _selectedCategory;
String? _selectedColor;
String? _selectedSeason;
RangeValues _priceRange = const RangeValues(0, 2000);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('筛选衣物'),
actions: [/* 重置按钮 */],
),
body: Column(
children: [
Expanded(child: SingleChildScrollView(child: /* 筛选条件 */)),
_buildFilterResults(),
],
),
);
}
}
这种结构的好处是：
- 筛选条件再多也不会挤压结果区域
- 用户可以专注于设置条件，不会被结果干扰
- 结果区域始终可见，提供即时反馈
3.2 分类筛选实现
分类筛选使用Flutter的ChoiceChip组件实现单选效果：
dart复制Widget _buildChipGroup(List<String> items, String? selected, ValueChanged<String?> onSelected) {
return Wrap(
spacing: 8.w,
children: items.map((item) {
return ChoiceChip(
label: Text(item),
selected: item == selected,
onSelected: (s) => onSelected(s ? item : null),
);
}).toList(),
);
}
这里有几个关键点：
- 使用Wrap而不是Row，让选项可以自动换行
- onSelected回调中传入null表示取消选择
- 通过selected参数控制选中状态
注意事项：ChoiceChip的选中样式需要在ThemeData中统一配置，或者在每个实例中单独设置，否则可能不符合应用的整体设计风格。
3.3 颜色筛选实现
颜色筛选没有使用标准的Chip组件，而是自定义了圆形色块，因为视觉呈现对颜色选择特别重要：
dart复制Widget _buildColorChips() {
return Wrap(
spacing: 8.w,
children: _colors.map((color) {
return GestureDetector(
onTap: () => setState(() => _selectedColor = color == _selectedColor ? null : color),
child: Container(
width: 40.w,
height: 40.w,
decoration: BoxDecoration(
color: ClothingItem.getColorFromName(color),
shape: BoxShape.circle,
border: Border.all(
color: color == _selectedColor ? Colors.pink : Colors.grey,
width: color == _selectedColor ? 3 : 1,
),
),
),
);
}).toList(),
);
}
实现细节：
- 使用Container+BoxDecoration创建圆形色块
- 选中状态通过边框粗细和颜色变化来指示
- 再次点击已选颜色会取消选择（设置为null）
3.4 价格区间筛选
价格筛选使用RangeSlider组件，让用户可以选择一个价格区间：
dart复制Widget _buildPriceSlider() {
return Column(
children: [
RangeSlider(
values: _priceRange,
min: 0,
max: 5000,
divisions: 50,
onChanged: (values) => setState(() => _priceRange = values),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('¥${_priceRange.start.toInt()}'),
Text('¥${_priceRange.end.toInt()}'),
],
),
],
);
}
关键参数说明：
- min/max：设置价格的最小最大值
- divisions：将整个范围分成多少段，影响滑动的精度
- values：当前选中的范围值
- onChanged：滑动时回调，更新状态
实操技巧：对于价格区间，最好设置一个合理的最大值（比如用户衣物中最贵的价格），而不是随意设置一个很大的数，这样滑块控制会更精确。
4. 筛选逻辑与性能优化
4.1 筛选算法实现
筛选的核心是一个where查询，组合多个条件：
dart复制var results = provider.clothes.where((item) {
if (_selectedCategory != null && item.category != _selectedCategory) return false;
if (_selectedColor != null && item.color != _selectedColor) return false;
if (_selectedSeason != null && item.season != _selectedSeason && item.season != '四季') return false;
if (item.price < _priceRange.start || item.price > _priceRange.end) return false;
return true;
}).toList();
这段代码有几个优化点：
- 使用短路评估，前面的条件不满足就直接返回，不评估后面的条件
- 对于"四季"的衣物做了特殊处理，任何季节筛选都会包含它们
- 价格检查使用闭区间，包含边界值
4.2 性能优化策略
当衣物数量很多时（比如超过1000件），筛选操作可能会造成界面卡顿。我们采取了以下优化措施：
- 延迟计算：只有在需要显示结果时才进行计算，避免不必要的筛选
- 使用Consumer：只有当数据真正变化时才重建结果区域
- 列表懒加载：结果列表使用ListView.builder实现懒加载
dart复制Consumer<WardrobeProvider>(
builder: (context, provider, child) {
var results = provider.clothes.where(/* 筛选条件 */).toList();
return /* 结果UI */;
},
)
5. 结果展示与交互
5.1 结果统计展示
在页面底部，我们实时显示匹配的衣物数量：
dart复制Container(
padding: EdgeInsets.all(16.w),
child: Column(
children: [
Text('找到 ${results.length} 件衣物'),
ElevatedButton(
onPressed: results.isEmpty ? null : _showResults,
child: const Text('查看结果'),
),
],
),
)
这个设计让用户：
- 即时知道当前筛选条件匹配了多少衣物
- 没有结果时禁用按钮，避免无效操作
5.2 结果列表弹窗
点击"查看结果"后，会以底部弹窗的形式展示完整列表：
dart复制void _showResults(BuildContext context, List<ClothingItem> results) {
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (context) => DraggableScrollableSheet(
initialChildSize: 0.7,
builder: (context, scrollController) {
return Column(
children: [
/* 拖动把手 */
Expanded(
child: ListView.builder(
controller: scrollController,
itemCount: results.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(results[index].name),
onTap: () => _openDetail(context, results[index]),
);
},
),
),
],
);
},
),
);
}
弹窗的特色：
- 可以拖动调整高度，方便浏览更多内容
- 列表支持滚动，大量结果也不怕
- 点击项目可以查看详情
6. 常见问题与解决方案
6.1 筛选条件组合问题
问题：当多个筛选条件组合时，可能会出现没有匹配结果的情况。
解决方案：
- 实时显示匹配数量，让用户及时知道
- 提供明显的重置按钮
- 在结果为空时给出友好提示和建议
6.2 性能问题
问题：衣物数量很大时，筛选操作导致UI卡顿。
解决方案：
- 使用isolate将筛选计算放到后台线程
- 对于超大数据集，考虑分页加载
- 添加加载指示器，让用户知道正在处理
6.3 样式一致性问题
问题：筛选条件样式与应用整体风格不一致。
解决方案：
- 抽取公共样式组件
- 在ThemeData中统一配置颜色和形状
- 使用Style类集中管理所有样式
7. 扩展与优化方向
这个筛选功能还可以进一步扩展：
- 保存常用筛选组合：让用户可以保存常用的筛选条件组合
- 更多筛选维度：添加材质、品牌、购买时间等维度
- 智能推荐：基于天气、场合等自动推荐衣物组合
- 手势操作：支持手势清除筛选条件
在实际开发中，我最大的体会是：好的筛选功能不仅要考虑技术实现，更要深入理解用户的使用场景和痛点。有时候一个小的交互细节（比如再次点击取消选择）就能显著提升用户体验。