更新概述

v1.26.0 版本为 OpenHarmony 钱包应用优化了空状态的显示。当交易列表为空或搜索结果为空时，应用不再显示简单的文字提示，而是展示一个友好的插画和提示信息。这个设计让应用看起来更加专业和人性化。

---

核心功能更新

1. 空状态插画方法

_buildEmptyState 方法

/// 构建空状态插画
Widget _buildEmptyState({
  required IconData icon,
  required String title,
  required String subtitle,
}) {
  return Padding(
    padding: const EdgeInsets.symmetric(vertical: 48, horizontal: 16),
    child: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 80,
            height: 80,
            decoration: BoxDecoration(
              color: Colors.blue.shade50,
              borderRadius: BorderRadius.circular(20),
            ),
            child: Icon(
              icon,
              size: 40,
              color: Colors.blue.shade300,
            ),
          ),
          const SizedBox(height: 20),
          Text(
            title,
            style: Theme.of(context).textTheme.titleMedium?.copyWith(
                  fontWeight: FontWeight.w600,
                  color: Colors.grey.shade800,
                ),
            textAlign: TextAlign.center,
          ),
          const SizedBox(height: 8),
          Text(
            subtitle,
            style: Theme.of(context).textTheme.bodySmall?.copyWith(
                  color: Colors.grey.shade500,
            ),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    ),
  );
}

说明：

• 接收三个参数：图标、标题、副标题
• 显示一个圆角方形的图标容器
• 下方显示标题和副标题文字
• 居中显示，视觉效果清晰

---

2. 空状态场景

场景 1：暂无交易记录

if (_transactions.isEmpty)
  _buildEmptyState(
    icon: Icons.inbox,
    title: '暂无交易记录',
    subtitle: '开始添加你的第一笔交易吧',
  )

说明：

• 当应用中完全没有交易时显示
• 使用收件箱图标
• 提示用户开始添加交易

场景 2：搜索结果为空

else if (_filteredTransactions.isEmpty)
  _buildEmptyState(
    icon: Icons.search_off,
    title: '没有找到匹配的交易',
    subtitle: '尝试调整筛选条件',
  )

说明：

• 当搜索或筛选后没有结果时显示
• 使用搜索关闭图标
• 提示用户调整条件

---

UI 变化

暂无交易记录

┌─────────────────────────────────┐
│                                 │
│                                 │
│          ┌─────────┐            │
│          │    📥   │            │
│          └─────────┘            │
│                                 │
│      暂无交易记录                │
│                                 │
│   开始添加你的第一笔交易吧      │
│                                 │
│                                 │
└─────────────────────────────────┘

搜索结果为空

┌─────────────────────────────────┐
│                                 │
│                                 │
│          ┌─────────┐            │
│          │    🔍❌  │            │
│          └─────────┘            │
│                                 │
│    没有找到匹配的交易            │
│                                 │
│     尝试调整筛选条件             │
│                                 │
│                                 │
└─────────────────────────────────┘

---

使用场景

场景 1：首次使用应用

1. 用户第一次打开应用
2. 看到友好的空状态插画
3. 清楚地了解需要添加交易
4. 点击"收入"或"支出"按钮开始添加

场景 2：搜索无结果

1. 用户输入搜索条件
2. 没有找到匹配的交易
3. 看到搜索失败的插画
4. 理解需要调整搜索条件

场景 3：筛选无结果

1. 用户设置日期范围筛选
2. 该日期范围内没有交易
3. 看到友好的提示
4. 可以调整日期范围重新搜索

---

功能特点

1. 视觉友好

• 使用彩色图标而不是纯文字
• 图标容器有背景色，视觉层次清晰
• 整体设计简洁美观

2. 信息清晰

• 标题说明当前状态
• 副标题提供建议
• 用户能快速理解

3. 交互引导

• 提示用户可以做什么
• 引导用户进行下一步操作
• 提升用户体验

4. 灵活扩展

• 支持自定义图标
• 支持自定义标题和副标题
• 可以应用于不同的空状态场景

---

版本对比

功能	v1.25.0	v1.26.0
时间段问候语	✅	✅
空状态插画	❌	✅
图标显示	❌	✅
友好提示	❌	✅

---

技术实现

1. 图标容器

Container(
  width: 80,
  height: 80,
  decoration: BoxDecoration(
    color: Colors.blue.shade50,
    borderRadius: BorderRadius.circular(20),
  ),
  child: Icon(
    icon,
    size: 40,
    color: Colors.blue.shade300,
  ),
)

2. 文字样式

Text(
  title,
  style: Theme.of(context).textTheme.titleMedium?.copyWith(
        fontWeight: FontWeight.w600,
        color: Colors.grey.shade800,
      ),
  textAlign: TextAlign.center,
)

3. 条件显示

if (_transactions.isEmpty)
  _buildEmptyState(
    icon: Icons.inbox,
    title: '暂无交易记录',
    subtitle: '开始添加你的第一笔交易吧',
  )
else if (_filteredTransactions.isEmpty)
  _buildEmptyState(
    icon: Icons.search_off,
    title: '没有找到匹配的交易',
    subtitle: '尝试调整筛选条件',
  )

---

设计亮点

1. 色彩搭配

• 图标容器使用浅蓝色背景
• 图标使用深蓝色
• 与应用整体风格协调

2. 排版设计

• 标题使用较大字体，易于阅读
• 副标题使用较小字体，提供补充信息
• 文字居中，视觉平衡

3. 空间布局

• 上下对称的内边距
• 图标和文字之间有适当间距
• 整体居中显示

---

用户体验优化

1. 心理学应用

• 友好的图标减少用户的挫折感
• 清晰的提示帮助用户理解
• 建议性的副标题引导用户操作

2. 视觉设计

• 彩色图标比文字更吸引注意力
• 圆角设计显得更现代
• 整体设计显得更专业

3. 可用性

• 快速传达信息
• 减少用户的认知负担
• 提升应用的整体质感

---

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