更新概述

v1.4.0 版本为 OpenHarmony 钱包应用增加了金额范围筛选功能。用户现在可以按金额范围查看交易，这对于查找特定金额范围的交易非常有用，例如查看所有大于 100 元的支出。

---

核心功能更新

1. 金额范围筛选

功能说明

新增金额范围筛选功能，用户可以：

• 设置最小金额：只显示金额大于等于该值的交易
• 设置最大金额：只显示金额小于等于该值的交易
• 灵活组合：可单独设置最小或最大金额
• 快速清除：一键清除金额筛选
• 实时更新：输入时立即显示结果

状态管理

class _OpenHarmonyWalletState extends State<OpenHarmonyWallet> {
  // ... 其他状态变量
  double? _minAmount;  // 最小金额
  double? _maxAmount;  // 最大金额
}

说明：

• 使用 double? 表示可选的金额值
• null 表示未设置该筛选条件

金额范围检查

/// 检查金额是否在范围内
bool _matchesAmountRange(double amount) {
  if (_minAmount != null && amount < _minAmount!) {
    return false;
  }
  if (_maxAmount != null && amount > _maxAmount!) {
    return false;
  }
  return true;
}

说明：

• 检查交易金额是否大于等于最小金额
• 检查交易金额是否小于等于最大金额
• 两个条件都满足才返回 true

筛选逻辑集成

void _applyFilters() {
  _filteredTransactions = _transactions.where((t) {
    final matchesSearch = t.title.toLowerCase().contains(_searchQuery.toLowerCase());
    final matchesCategory = _selectedCategory == null || t.category == _selectedCategory;
    final matchesDateRange = _matchesDateRange(t.date);
    final matchesAmountRange = _matchesAmountRange(t.amount);
    return matchesSearch && matchesCategory && matchesDateRange && matchesAmountRange;
  }).toList();
}

说明：

• 金额范围筛选与其他筛选条件联合工作
• 交易必须同时满足所有条件

---

2. 金额输入字段

金额范围筛选组件

Widget _buildAmountRangeFilter() {
  return Padding(
    padding: const EdgeInsets.symmetric(horizontal: 16),
    child: Row(
      children: [
        Expanded(
          child: _buildAmountInputField(
            label: '最小金额',
            value: _minAmount,
            onChanged: (value) {
              _updateMinAmount(value);
            },
          ),
        ),
        const SizedBox(width: 12),
        Expanded(
          child: _buildAmountInputField(
            label: '最大金额',
            value: _maxAmount,
            onChanged: (value) {
              _updateMaxAmount(value);
            },
          ),
        ),
        const SizedBox(width: 8),
        if (_minAmount != null || _maxAmount != null)
          GestureDetector(
            onTap: _clearAmountFilter,
            child: Container(
              padding: const EdgeInsets.all(8),
              decoration: BoxDecoration(
                color: Colors.red.withOpacity(0.1),
                borderRadius: BorderRadius.circular(8),
              ),
              child: Icon(Icons.close, color: Colors.red, size: 20),
            ),
          ),
      ],
    ),
  );
}

说明：

• 两个输入字段并排显示
• 当有金额被设置时显示清除按钮
• 使用 Expanded 自适应宽度

单个金额输入字段

Widget _buildAmountInputField({
  required String label,
  required double? value,
  required Function(double?) onChanged,
}) {
  final controller = TextEditingController(
    text: value == null ? '' : value.toStringAsFixed(2),
  );

  return TextField(
    controller: controller,
    keyboardType: const TextInputType.numberWithOptions(decimal: true),
    decoration: InputDecoration(
      labelText: label,
      hintText: '0.00',
      prefixText: '¥',
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8),
      ),
      contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
    ),
    onChanged: (text) {
      if (text.isEmpty) {
        onChanged(null);
      } else {
        final amount = double.tryParse(text);
        if (amount != null) {
          onChanged(amount);
        }
      }
    },
  );
}

说明：

• keyboardType 设置为数字键盘，支持小数点
• prefixText: '¥' 显示货币符号
• 实时解析用户输入的数字
• 清空输入时设置为 null

金额更新方法

/// 更新最小金额
void _updateMinAmount(double? amount) {
  setState(() {
    _minAmount = amount;
    _applyFilters();
  });
}

/// 更新最大金额
void _updateMaxAmount(double? amount) {
  setState(() {
    _maxAmount = amount;
    _applyFilters();
  });
}

/// 清除金额筛选
void _clearAmountFilter() {
  setState(() {
    _minAmount = null;
    _maxAmount = null;
    _applyFilters();
  });
}

说明：

• 每次更新都会触发 _applyFilters() 重新计算结果
• 清除按钮同时清除最小和最大金额

---

UI 变化

交易历史筛选区域的新增元素

布局结构

┌─────────────────────────────────────────┐
│      交易历史 (标题)                      │
├─────────────────────────────────────────┤
│  [搜索框] 搜索交易...                    │
├─────────────────────────────────────────┤
│ [全部] [工资] [食物] [交通] ...          │
├─────────────────────────────────────────┤
│ [开始日期] [结束日期] [清除按钮]         │
├─────────────────────────────────────────┤
│ [最小金额] [最大金额] [清除按钮]         │
├─────────────────────────────────────────┤
│  交易项 1                                │
│  交易项 2                                │
│  交易项 3                                │
└─────────────────────────────────────────┘

金额筛选栏样式

• 高度：约 44px
• 输入框宽度：各占 50% - 12px 间距
• 清除按钮：仅在有金额被设置时显示
• 颜色：灰色边框，蓝色标签
• 货币符号：显示"¥"前缀

输入字段特性

• 数字键盘：支持小数点输入
• 实时验证：只接受有效的数字
• 格式化显示：显示两位小数
• 清空支持：删除所有内容时清除筛选

---

使用场景

场景 1：查看大额支出

1. 在"最小金额"输入 100
2. 显示所有金额 ≥ 100 的交易
3. 快速找到大额支出

场景 2：查看小额支出

1. 在"最大金额"输入 50
2. 显示所有金额 ≤ 50 的交易
3. 查看日常小额消费

场景 3：查看特定范围的交易

1. 在"最小金额"输入 50
2. 在"最大金额"输入 200
3. 显示金额在 50-200 之间的交易

场景 4：联合多个筛选条件

1. 搜索"餐"
2. 选择"食物"分类
3. 设置日期范围为本月
4. 设置金额范围 20-100
5. 显示本月 20-100 元的食物交易

场景 5：快速清除筛选

1. 已设置金额筛选
2. 点击清除按钮（红色 × 按钮）
3. 金额筛选被清除，显示全部交易

---

技术实现细节

金额比较

// 检查金额是否大于等于最小金额
if (_minAmount != null && amount < _minAmount!) {
  return false;
}

// 检查金额是否小于等于最大金额
if (_maxAmount != null && amount > _maxAmount!) {
  return false;
}

说明：

• 使用 < 和 > 进行数值比较
• 非空检查确保只在设置了筛选条件时比较
• ! 操作符用于非空断言

数字解析

final amount = double.tryParse(text);
if (amount != null) {
  onChanged(amount);
}

说明：

• tryParse() 安全地解析字符串为数字
• 如果解析失败返回 null，不会抛出异常
• 只在解析成功时才更新筛选条件

金额格式化

text: value == null ? '' : value.toStringAsFixed(2)

说明：

• toStringAsFixed(2) 格式化为两位小数
• 例如：100.5 显示为 “100.50”

---

性能考虑

筛选性能

• 每次输入都会重新过滤整个列表
• 对于 1000 条以内的交易记录性能良好
• 大数据量时可考虑防抖（debounce）机制

输入验证

final amount = double.tryParse(text);
if (amount != null) {
  onChanged(amount);
}

说明：

• 只在输入有效时才触发筛选
• 避免不必要的过滤操作

---

版本对比

功能	v1.0.0	v1.1.0	v1.2.0	v1.3.0	v1.4.0
基础交易管理	✅	✅	✅	✅	✅
余额显示	✅	✅	✅	✅	✅
快速操作按钮	✅	✅	✅	✅	✅
分类统计	✅	✅	✅	✅	✅
搜索功能	❌	✅	✅	✅	✅
分类筛选	❌	✅	✅	✅	✅
日期范围筛选	❌	❌	✅	✅	✅
饼图可视化	❌	❌	❌	✅	✅
进度条统计	❌	❌	❌	✅	✅
金额范围筛选	❌	❌	❌	❌	✅
数值输入字段	❌	❌	❌	❌	✅

---

下一步计划

v1.5.0 将继续增强功能，计划增加：

• 📈 月度对比图表
• 🎯 预算管理功能
• 📊 支出趋势分析
• 💾 数据导出功能

---

感谢使用 OpenHarmony 钱包！ 🎉

如有建议或问题，欢迎反馈。
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net