Flutter 与 OpenHarmony 应用交互优化实践：从基础列表到 HarmonyOS Design 兼容的待办事项体验

从基础列表到 HarmonyOS Design 兼容的待办事项体验

- 引言：交互体验是跨平台应用落地的关键
- 一、交互功能增强：提升用户操作效率
- - [1. 下拉刷新（Pull-to-Refresh）](#1. 下拉刷新（Pull-to-Refresh）)
  - [2. 滑动删除 + 确认 + 撤销](#2. 滑动删除 + 确认 + 撤销)
- [二、UI 视觉升级：向 HarmonyOS Design 对齐](#二、UI 视觉升级：向 HarmonyOS Design 对齐)
- - [1. 卡片式布局与圆角设计](#1. 卡片式布局与圆角设计)
  - [2. 自定义复选框：圆形替代方形](#2. 自定义复选框：圆形替代方形)
  - [3. 统计信息芯片（Chip）](#3. 统计信息芯片（Chip）)
- [三、ViewModel 功能扩展：支撑复杂 UI 逻辑](#三、ViewModel 功能扩展：支撑复杂 UI 逻辑)
- [四、OpenHarmony 适配策略：为国产平台做准备](#四、OpenHarmony 适配策略：为国产平台做准备)
- - [1. 无平台硬编码](#1. 无平台硬编码)
  - [2. 响应式布局](#2. 响应式布局)
  - [3. 资源与权限预留](#3. 资源与权限预留)
- 五、开发流程与工程实践
- 六、未来展望：从交互优化到平台深度集成
- 结语：体验先行，架构护航

引言：交互体验是跨平台应用落地的关键

在完成基于 Riverpod 与 MVVM 架构的基础待办事项应用后，我们面临一个更现实的问题：如何让应用不仅"能运行"，更能"好用"？

尤其在 OpenHarmony 生态中，用户对应用的期望已不再局限于功能完整，而是要求符合 HarmonyOS Design 规范、具备流畅的交互动画、支持多设备形态，并提供一致而优雅的用户体验。这正是本次迭代（变更 #2）的核心目标。

本文将深入剖析此次交互优化的技术实现细节，涵盖 下拉刷新、滑动删除、撤销操作、任务统计、日期智能显示 等功能，并重点探讨如何在 Flutter 中实现对 HarmonyOS Design 的视觉与交互适配，为后续在 OpenHarmony 平台上的正式发布奠定体验基础。

一、交互功能增强：提升用户操作效率

1. 下拉刷新（Pull-to-Refresh）

使用 RefreshIndicator 包裹列表，触发 ViewModel 的 refresh() 方法：

dart 复制代码

// lib/screens/todo_screen.dart
return RefreshIndicator(
  onRefresh: () async {
    await ref.read(todoListProvider.notifier).refresh();
  },
  child: ListView.builder(...),
);

dart 复制代码

// lib/viewmodels/todo_notifier.dart
Future<void> refresh() async {
  state = const AsyncLoading();
  state = await AsyncValue.guard(() async {
    return await ref.read(todoRepositoryProvider).getAllTodos();
  });
}

价值：即使当前使用内存存储，也为未来接入网络同步或分布式数据库预留了刷新入口。

2. 滑动删除 + 确认 + 撤销

采用 Dismissible 实现滑动删除，并结合 SnackBar 提供撤销能力：

dart 复制代码

Dismissible(
  key: Key(todo.id),
  direction: DismissDirection.endToStart,
  confirmDismiss: (direction) async {
    // 显示确认对话框
    final confirmed = await showDialog<bool>(
      context: context,
      builder: (ctx) => AlertDialog(
        title: Text('Delete task?'),
        content: Text('This action cannot be undone.'),
        actions: [
          TextButton(onPressed: () => Navigator.pop(ctx, false), child: Text('Cancel')),
          TextButton(onPressed: () => Navigator.pop(ctx, true), child: Text('Delete')),
        ],
      ),
    );
    return confirmed ?? false;
  },
  onDismissed: (direction) {
    final deletedTodo = todo;
    ref.read(todoListProvider.notifier).deleteTodo(todo.id);

    // 显示撤销 SnackBar
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('Deleted "${deletedTodo.title}"'),
        action: SnackBarAction(
          label: 'Undo',
          onPressed: () {
            ref.read(todoListProvider.notifier).addTodo(deletedTodo.title);
          },
        ),
      ),
    );
  },
  child: ListTile(...),
)

设计考量：

避免误删：通过确认对话框二次确认

降低焦虑：提供 3 秒内撤销机会

符合 Material 3 与 HarmonyOS 的"安全操作"原则

二、UI 视觉升级：向 HarmonyOS Design 对齐

虽然 Flutter 默认使用 Material Design，但我们可通过自定义组件实现 HarmonyOS Design 的核心视觉特征：

1. 卡片式布局与圆角设计

dart 复制代码

Container(
  margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
  decoration: BoxDecoration(
    color: Theme.of(context).cardColor,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.05),
        blurRadius: 8,
        offset: const Offset(0, 2),
      ),
    ],
  ),
  child: ListTile(...),
)

HarmonyOS 特征：柔和阴影、大圆角、留白充足

2. 自定义复选框：圆形替代方形

dart 复制代码

GestureDetector(
  onTap: () => toggleCompleted(todo.id),
  child: Container(
    width: 24,
    height: 24,
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      border: Border.all(
        color: todo.completed 
            ? Theme.of(context).colorScheme.primary 
            : Colors.grey,
        width: 2,
      ),
    ),
    child: todo.completed
        ? Icon(Icons.check, size: 16, color: Theme.of(context).colorScheme.onPrimary)
        : null,
  ),
)

优势：更符合 HarmonyOS 的"圆润"美学，同时保持高可识别性

3. 统计信息芯片（Chip）

在 AppBar 下方显示任务统计：

dart 复制代码

Wrap(
  spacing: 8,
  children: [
    Chip(label: Text('${completedCount} completed')),
    Chip(label: Text('${pendingCount} pending')),
    Chip(label: Text('Total: $totalCount')),
  ],
)

作用：提供即时反馈，增强用户掌控感

三、ViewModel 功能扩展：支撑复杂 UI 逻辑

为支持上述 UI 功能，TodoList Notifier 新增了多个计算属性和方法：

dart 复制代码

// lib/viewmodels/todo_notifier.dart
int get completedCount => state.value?.where((t) => t.completed).length ?? 0;
int get totalCount => state.value?.length ?? 0;
int get pendingCount => totalCount - completedCount;

String formatDate(DateTime? date) {
  if (date == null) return '';
  final now = DateTime.now();
  final diff = now.difference(date);
  
  if (diff.inDays == 0) return 'Today';
  if (diff.inDays == 1) return 'Yesterday';
  if (diff.inDays < 7) return '${diff.inDays} days ago';
  return '${date.month}/${date.day}';
}

关键点：

所有计算基于 state.value，自动响应数据变化

日期格式化逻辑集中管理，便于本地化扩展

四、OpenHarmony 适配策略：为国产平台做准备

尽管当前仍在 Android/iOS 模拟器上开发，但所有优化均考虑了 OpenHarmony 的特殊性：

1. 无平台硬编码

未使用 Platform.isAndroid 等判断
所有交互逻辑通过抽象接口调用

2. 响应式布局

使用 MediaQuery 和 LayoutBuilder 适配不同屏幕
列表项高度自适应，支持平板横屏模式

3. 资源与权限预留

图标、颜色等通过 Theme 管理，未来可替换为 HarmonyOS 主题
文件读写、通知等敏感操作尚未引入，但架构已支持通过 Repository 封装

五、开发流程与工程实践

此次变更严格遵循项目文档中的开发指南：

先更新变更记录：明确功能范围与修改文件
分层开发 ：
- 在 viewmodels 中新增 refresh() 和统计属性
- 在 screens 中实现 UI 交互
代码生成 ：运行 dart run build_runner build 更新 todo_notifier.g.dart
质量检查 ：通过 flutter analyze 确保无警告

成果：代码结构依然清晰，新增功能未破坏原有架构。

六、未来展望：从交互优化到平台深度集成

当前版本已具备良好的用户体验基础。下一步（变更 #3）可聚焦于 OpenHarmony 平台能力集成，例如：

持久化存储 ：将 MemoryTodoRepository 替换为 HiveTodoRepository，并处理 OpenHarmony 文件路径差异
系统通知：通过 Platform Channel 调用 OpenHarmony 通知服务，实现任务提醒
分布式能力：利用 OpenHarmony 软总线，在手机与平板间同步任务
HAP 打包：配置 DevEco Studio，生成可在 OpenHarmony 设备安装的 HAP 包

这些工作将真正实现"Flutter 应用在 OpenHarmony 上原生运行"的目标。

结语：体验先行，架构护航

本次交互优化不仅是功能的堆砌，更是对 "以用户为中心" 开发理念的践行。通过精心设计的动画、反馈与视觉语言，我们让一个简单的待办事项应用变得可靠、高效且愉悦。

更重要的是，这一切都建立在 Riverpod + MVVM 的坚实架构之上。无论未来是接入 Hive、调用 OpenHarmony API，还是适配智慧屏，核心逻辑都无需重构。

这正是现代 Flutter 开发的魅力所在------用清晰的架构承载丰富的体验，用跨平台的能力拥抱多元的生态。而 OpenHarmony，正是这一理念的最佳试验场。

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