更新概述

v1.1.0 版本为 OpenHarmony 钱包应用增加了强大的搜索和筛选功能，让用户能够快速找到特定的交易记录。这是一个重要的用户体验升级，特别是对于交易记录较多的用户。

图片占位符 - 搜索和筛选界面:

---

核心功能更新

1. 实时搜索功能

功能说明

用户现在可以通过输入关键词快速搜索交易记录。搜索功能支持：

• 按交易说明搜索：输入交易标题关键词（如"午餐"、"工资"等）
• 实时搜索：输入时立即显示匹配结果
• 不区分大小写：支持大小写混合输入

代码实现

/// 构建搜索栏
Widget _buildSearchBar() {
  return Padding(
    padding: const EdgeInsets.symmetric(horizontal: 16),
    child: TextField(
      onChanged: _updateSearchQuery,
      decoration: InputDecoration(
        hintText: '搜索交易...',
        prefixIcon: const Icon(Icons.search),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(12),
        ),
        contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      ),
    ),
  );
}

说明：

• TextField 组件用于用户输入
• onChanged 回调实时更新搜索结果
• 搜索图标提示用户这是搜索功能
• 圆角边框提升视觉效果

搜索逻辑

/// 更新搜索查询
void _updateSearchQuery(String query) {
  setState(() {
    _searchQuery = query;
    _applyFilters();
  });
}

/// 应用搜索和筛选
void _applyFilters() {
  _filteredTransactions = _transactions.where((t) {
    final matchesSearch = t.title.toLowerCase().contains(_searchQuery.toLowerCase());
    final matchesCategory = _selectedCategory == null || t.category == _selectedCategory;
    return matchesSearch && matchesCategory;
  }).toList();
}

说明：

• 搜索时将用户输入转换为小写，实现不区分大小写的搜索
• where() 方法过滤交易列表
• 支持与分类筛选联合使用

---

2. 分类筛选功能

功能说明

新增分类筛选芯片，用户可以快速按分类查看交易：

• 全部分类：显示所有交易
• 单个分类：只显示选中分类的交易
• 动态生成：根据已有交易自动生成分类选项
• 视觉反馈：选中的分类高亮显示

代码实现

/// 构建分类筛选
Widget _buildCategoryFilter() {
  final allCategories = _getAllCategories();
  return Padding(
    padding: const EdgeInsets.symmetric(horizontal: 16),
    child: SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
        children: [
          _buildFilterChip(
            label: '全部',
            isSelected: _selectedCategory == null,
            onTap: () => _updateCategoryFilter(null),
          ),
          ...allCategories.map((category) => _buildFilterChip(
            label: category,
            isSelected: _selectedCategory == category,
            onTap: () => _updateCategoryFilter(category),
          )),
        ],
      ),
    ),
  );
}

说明：

• SingleChildScrollView 使分类芯片可水平滚动
• 动态生成所有可用分类的筛选芯片
• "全部"选项始终显示在最前面

筛选芯片设计

/// 构建筛选芯片
Widget _buildFilterChip({
  required String label,
  required bool isSelected,
  required VoidCallback onTap,
}) {
  return Padding(
    padding: const EdgeInsets.only(right: 8),
    child: FilterChip(
      label: Text(label),
      selected: isSelected,
      onSelected: (_) => onTap(),
      backgroundColor: Colors.grey.shade200,
      selectedColor: Colors.blue,
      labelStyle: TextStyle(
        color: isSelected ? Colors.white : Colors.black,
      ),
    ),
  );
}

说明：

• FilterChip 是 Material Design 中的标准筛选组件
• 未选中时显示灰色背景，选中时显示蓝色背景
• 文字颜色随背景变化，确保可读性

分类提取逻辑

/// 获取所有分类
List<String> _getAllCategories() {
  final categories = <String>{};
  for (var transaction in _transactions) {
    categories.add(transaction.category);
  }
  return categories.toList()..sort();
}

说明：

• 使用 Set 自动去重
• 返回排序后的分类列表
• 确保分类显示顺序一致

---

3. 联合搜索和筛选

工作原理

搜索和筛选功能可以联合使用，提供更精确的结果：

void _applyFilters() {
  _filteredTransactions = _transactions.where((t) {
    // 同时满足搜索条件和分类条件
    final matchesSearch = t.title.toLowerCase().contains(_searchQuery.toLowerCase());
    final matchesCategory = _selectedCategory == null || t.category == _selectedCategory;
    return matchesSearch && matchesCategory;
  }).toList();
}

使用场景：

• 搜索"午"并选择"食物"分类 → 显示所有包含"午"的食物交易
• 搜索"工资"不选分类 → 显示所有包含"工资"的交易
• 不搜索但选择"交通"分类 → 显示所有交通类交易

空结果处理

else if (_filteredTransactions.isEmpty)
  Padding(
    padding: const EdgeInsets.all(32),
    child: Center(
      child: Text(
        '没有找到匹配的交易',
        style: Theme.of(context).textTheme.bodyMedium?.copyWith(
              color: Colors.grey,
            ),
      ),
    ),
  )

说明：

• 当搜索或筛选结果为空时，显示友好的提示信息
• 与"暂无交易记录"提示区分，帮助用户理解差异

---

UI 变化

交易历史部分的新增元素

搜索栏

• 位置：交易历史标题下方
• 样式：圆角边框输入框，带搜索图标
• 高度：约 48px
• 颜色：灰色边框，白色背景

分类筛选

• 位置：搜索栏下方
• 样式：可水平滚动的芯片行
• 默认状态：灰色背景
• 选中状态：蓝色背景，白色文字
• 间距：每个芯片右间距 8px

布局变化

┌─────────────────────────────────┐
│      交易历史 (标题)              │
├─────────────────────────────────┤
│  [搜索框] 搜索交易...            │
├─────────────────────────────────┤
│ [全部] [工资] [食物] [交通] ...  │
├─────────────────────────────────┤
│  交易项 1                        │
│  交易项 2                        │
│  交易项 3                        │
└─────────────────────────────────┘

---

状态管理更新

新增状态变量

class _OpenHarmonyWalletState extends State<OpenHarmonyWallet> {
  late double _currentBalance;
  late List<Transaction> _transactions;
  late List<Transaction> _filteredTransactions;  // 新增：筛选后的交易列表
  String _searchQuery = '';                      // 新增：搜索查询
  String? _selectedCategory;                     // 新增：选中的分类
  // ...
}

说明：

• _filteredTransactions：存储筛选后的交易列表，UI 显示此列表
• _searchQuery：存储当前搜索关键词
• _selectedCategory：存储选中的分类，null 表示"全部"

初始化更新

@override
void initState() {
  super.initState();
  _currentBalance = widget.initialBalance;
  _transactions = List.from(widget.transactions);
  _filteredTransactions = List.from(_transactions);  // 初始化为全部交易
  _calculateBalance();
}

---

性能考虑

搜索性能

• 实时搜索：每次输入都会重新过滤，对于大量交易可能有性能影响
• 优化建议：可以考虑添加防抖（debounce）机制，延迟搜索执行
• 当前状态：适合 1000 条以内的交易记录

分类提取

List<String> _getAllCategories() {
  final categories = <String>{};
  for (var transaction in _transactions) {
    categories.add(transaction.category);
  }
  return categories.toList()..sort();
}

• 每次调用都会重新遍历所有交易
• 可以缓存分类列表以提升性能
• 当交易列表变化时需要重新计算

---

用户体验改进

优点

✅ 快速查找：用户可以快速找到特定交易
✅ 灵活筛选：支持多种筛选方式
✅ 实时反馈：搜索结果实时更新
✅ 直观界面：搜索栏和筛选芯片易于理解

可能的改进方向

• 添加高级搜索（按日期范围、金额范围等）
• 保存常用搜索
• 搜索历史记录
• 防抖优化搜索性能
• 搜索结果排序选项

---

测试场景

场景 1：按标题搜索

1. 输入"午"
2. 应显示所有包含"午"的交易（如"午餐"）
3. 清空搜索框，应显示全部交易

场景 2：按分类筛选

1. 点击"食物"分类
2. 应只显示分类为"食物"的交易
3. 点击"全部"，应显示全部交易

场景 3：联合搜索和筛选

1. 输入"工"并选择"工资"分类
2. 应显示包含"工"且分类为"工资"的交易
3. 修改搜索词或分类，结果应实时更新

场景 4：空结果处理

1. 输入不存在的关键词
2. 应显示"没有找到匹配的交易"提示
3. 清空搜索框，应恢复显示交易列表

---

技术总结

新增方法

方法名	功能	参数
_buildSearchBar()	构建搜索栏	无
_buildCategoryFilter()	构建分类筛选	无
_buildFilterChip()	构建单个筛选芯片	label, isSelected, onTap
_getAllCategories()	获取所有分类	无
_applyFilters()	应用搜索和筛选	无
_updateSearchQuery()	更新搜索查询	query
_updateCategoryFilter()	更新分类筛选	category

使用的 Flutter 组件

• TextField：文本输入框
• FilterChip：筛选芯片
• SingleChildScrollView：可滚动容器
• Icon：图标

---

版本对比

功能	v1.0.0	v1.1.0
基础交易管理	✅	✅
余额显示	✅	✅
快速操作按钮	✅	✅
分类统计	✅	✅
搜索功能	❌	✅
分类筛选	❌	✅
联合搜索筛选	❌	✅

---

下一步计划

v1.2.0 将继续优化用户体验，计划增加：

• 📊 数据可视化图表
• 📅 日期范围筛选
• 💾 搜索历史记录
• ⚡ 搜索性能优化

---

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net