更新概述

v1.20.0 版本为 OpenHarmony 钱包应用增加了交易置顶功能。用户现在可以将重要的交易置顶显示，使其始终显示在交易列表的顶部。这个新功能帮助用户快速访问重要交易，提高交易管理的效率。

---

核心功能更新

1. 交易置顶数据模型

Transaction 类扩展

/// OpenHarmony 交易记录模型
class Transaction {
  final String id;
  final String title;
  final double amount;
  final DateTime date;
  final TransactionType type;
  final String category;
  final String? note;
  final List<String> tags;
  final bool isPinned;  // 新增：是否置顶

  Transaction({
    required this.id,
    required this.title,
    required this.amount,
    required this.date,
    required this.type,
    required this.category,
    this.note,
    this.tags = const [],
    this.isPinned = false,  // 默认不置顶
  });
}

说明：

• 添加 isPinned 字段用于标记置顶状态
• 布尔类型，默认为 false
• 不影响现有交易

---

2. 交易置顶管理

置顶切换方法

/// 切换交易置顶状态
void _togglePinTransaction(Transaction transaction) {
  int transactionIndex = _transactions.indexWhere((t) => t.id == transaction.id);
  if (transactionIndex != -1) {
    final updatedTransaction = Transaction(
      id: transaction.id,
      title: transaction.title,
      amount: transaction.amount,
      date: transaction.date,
      type: transaction.type,
      category: transaction.category,
      note: transaction.note,
      tags: transaction.tags,
      isPinned: !transaction.isPinned,  // 切换置顶状态
    );
    setState(() {
      _transactions[transactionIndex] = updatedTransaction;
      _applyFilters();
    });
  }
}

说明：

• 点击置顶按钮切换状态
• 自动更新交易列表
• 实时刷新显示

置顶操作菜单

/// 构建操作菜单
PopupMenuButton<String>(
  onSelected: (value) {
    if (value == 'pin') {
      _togglePinTransaction(transaction);
    } else if (value == 'delete') {
      removeTransaction(transaction.id);
    }
  },
  itemBuilder: (BuildContext context) => [
    PopupMenuItem<String>(
      value: 'pin',
      child: Row(
        children: [
          Icon(
            transaction.isPinned ? Icons.push_pin_outlined : Icons.push_pin,
            size: 18,
            color: Colors.orange,
          ),
          const SizedBox(width: 8),
          Text(transaction.isPinned ? '取消置顶' : '置顶'),
        ],
      ),
    ),
    PopupMenuItem<String>(
      value: 'delete',
      child: Row(
        children: [
          Icon(Icons.delete, size: 18, color: Colors.red),
          const SizedBox(width: 8),
          const Text('删除'),
        ],
      ),
    ),
  ],
  child: Icon(Icons.more_vert, color: Colors.grey.shade400, size: 18),
)

说明：

• 三点菜单操作
• 支持置顶/取消置顶
• 支持删除交易

---

3. 交易列表中的置顶显示

置顶交易分组

/// 分离置顶和非置顶交易
final pinnedTransactions = _filteredTransactions.where((t) => t.isPinned).toList();
final normalTransactions = _filteredTransactions.where((t) => !t.isPinned).toList();

// 显示置顶交易
if (pinnedTransactions.isNotEmpty) ...[
  Padding(
    padding: const EdgeInsets.symmetric(horizontal: 16),
    child: Row(
      children: [
        Icon(Icons.push_pin, size: 16, color: Colors.orange),
        const SizedBox(width: 6),
        Text(
          '置顶交易',
          style: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w600,
            color: Colors.orange,
          ),
        ),
      ],
    ),
  ),
  const SizedBox(height: 8),
  ListView.builder(
    shrinkWrap: true,
    physics: const NeverScrollableScrollPhysics(),
    itemCount: pinnedTransactions.length,
    itemBuilder: (context, index) {
      return _buildTransactionItem(pinnedTransactions[index], isPinned: true);
    },
  ),
],

说明：

• 置顶交易显示在顶部
• 单独分组显示
• 橙色背景标识

置顶交易卡片

/// 置顶交易卡片样式
Container(
  margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  padding: const EdgeInsets.all(12),
  decoration: BoxDecoration(
    color: isPinned ? Colors.orange.shade50 : Colors.grey.shade50,
    borderRadius: BorderRadius.circular(12),
    border: Border.all(
      color: isPinned ? Colors.orange.shade200 : Colors.grey.shade200,
      width: isPinned ? 1.5 : 1,
    ),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Row(
        children: [
          // ... 交易信息 ...
          if (isPinned)
            Icon(Icons.push_pin, size: 14, color: Colors.orange),
        ],
      ),
    ],
  ),
)

说明：

• 置顶交易使用橙色背景
• 显示置顶图标
• 边框加粗突出显示

---

UI 变化

交易列表布局

┌─────────────────────────────────┐
│  交易历史                        │
├─────────────────────────────────┤
│  📌 置顶交易                     │
│  ┌─────────────────────────────┐│
│  │ 📌 工资                ¥5000││
│  │ 工资 • 2024-12-01           ││
│  │ 🏷️ 工作              ││
│  └─────────────────────────────┘│
│                                 │
│  其他交易                        │
│  ┌─────────────────────────────┐│
│  │ 早餐                    ¥50 ││
│  │ 食物 • 2024-12-01           ││
│  │ 🏷️ 生活 🏷️ 食物      ││
│  └─────────────────────────────┘│
│                                 │
│  ┌─────────────────────────────┐│
│  │ 电影票                 ¥60  ││
│  │ 娱乐 • 2024-12-01           ││
│  └─────────────────────────────┘│
└─────────────────────────────────┘

操作菜单

┌──────────────────┐
│ 📌 置顶           │
│ 🗑️ 删除           │
└──────────────────┘

---

版本对比

功能	v1.19.0	v1.20.0
快速标签	✅	✅
标签选择	✅	✅
置顶字段	❌	✅
置顶功能	❌	✅
置顶显示	❌	✅
置顶分组	❌	✅
操作菜单	❌	✅

---

使用场景

场景 1：置顶重要交易

1. 进入钱包页面
2. 找到重要交易
3. 点击三点菜单
4. 选择"置顶"

场景 2：查看置顶交易

1. 进入交易列表
2. 置顶交易显示在顶部
3. 快速访问重要交易

场景 3：取消置顶

1. 进入交易列表
2. 找到置顶交易
3. 点击三点菜单
4. 选择"取消置顶"

场景 4：管理多个置顶交易

1. 置顶多笔重要交易
2. 在"置顶交易"分组中查看
3. 快速对比重要交易
4. 优化财务管理

---

技术亮点

1. 灵活的置顶系统

• 支持多个置顶交易
• 简单的状态切换
• 易于扩展

2. 清晰的视觉反馈

• 橙色背景突出显示
• 置顶图标标识
• 分组显示

3. 便捷的操作菜单

• 三点菜单设计
• 快速切换状态
• 支持删除操作

4. 完整的交易管理

• 备注、标签、置顶
• 多维度管理交易
• 提高使用效率

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