导语

在搭建好 App 的导航骨架后，本次的任务聚焦于内容的填充与打磨。作为一款面向开源鸿蒙（OpenHarmony）生态的应用，TechHub 不仅要在功能上满足需求，更要在 UI 表现上适应不同尺寸的设备（手机、平板）。

本文将详细复盘首页、工具页与个人中心的开发过程，重点分享 UI 组合布局、逻辑封装 以及 OpenHarmony 真机运行 的实战经验。

一、 首页开发

首页是 App 的门面，我们设计了包含“Banner 轮播”、“横向话题流”和“纵向推荐列表”的复合布局。

1. UI 结构设计

为了实现丰富的视觉效果，我们大量使用了 Container 装饰属性和 ListView 的嵌套技巧。

• Banner 区：使用 Theme.of(context).colorScheme 获取主题色，确保在深色模式下也能自动适配。
• 横向滚动列表：在纵向滚动的页面中嵌入横向列表是常见的 UI 需求。我们通过设置 scrollDirection: Axis.horizontal 并限定高度来实现。

// 横向滚动话题区
SizedBox(
  height: 140,
  child: ListView.builder(
    scrollDirection: Axis.horizontal,
    itemCount: 5,
    itemBuilder: (context, index) {
      return Container(
        // ... 卡片样式定义
      );
    },
  ),
),

这种布局方式既保证了信息的丰富度，又维持了操作的流畅性。

二、 工具页

在“工具”模块的开发中，我们没有止步于简单的功能堆砌，而是着眼于未来的扩展性，设计了一套支持动态加载的模块化工具箱架构。

1. 架构设计：Feature-based 目录结构

为了避免代码臃肿，我们采用了基于特性的目录结构，并在 lib/features/tools 下实现了工具的注册与管理机制：

• ToolItem (接口)：定义了工具必须具备的 id、name、icon 及 build 方法。所有新工具只需继承此类即可接入。
• ToolManager (管理)：实现了单例模式的注册表，支持运行时动态添加新工具，实现了业务逻辑与 UI 的解耦。

2. 界面实现：侧边导航与平滑切换

为了充分利用 OpenHarmony 设备（尤其是平板和 PC）的屏幕空间，我们采用了左右分栏的设计：

• 左侧导航 (NavigationRail)：提供了优雅的侧边菜单，支持图标与文字的组合展示，非常适合工具类应用的导航切换。
• 右侧内容 (AnimatedSwitcher)：在切换不同工具时，我们加入了淡入淡出配合滑动的过渡动画，将响应时间控制在 200ms 以内，极大地提升了用户体验。

// 主界面布局核心代码
Row(
  children: [
    // 左侧导航栏
    NavigationRail(
      selectedIndex: _selectedIndex,
      onDestinationSelected: (int index) { ... },
      destinations: _tools.map((tool) => ...).toList(),
    ),
    // 右侧内容区带动画切换
    Expanded(
      child: AnimatedSwitcher(
        duration: const Duration(milliseconds: 200),
        child: _tools[_selectedIndex].build(context),
      ),
    ),
  ],
)

3. 专注计数器

我们将原有的计数器逻辑完整迁移到了 CounterTool 组件中。通过将状态封装在组件内部 (StatefulWidget)，我们实现了工具间的状态隔离——即切换到其他工具再切回来，计数器的数值依然保持不变。

三、 个人中心

“我的”页面采用了经典的列表式布局（ListView + ListTile）。这种布局结构清晰，易于扩展，非常适合用于设置菜单或信息展示。

我们利用 ListTile 的 leading（前置图标）、title（标题）、trailing（后置箭头）属性，快速构建出了符合 Material Design 规范的菜单项。

小结

通过本次的实战，我们完成了 TechHub 应用的内容填充与 UI 完善。

1. 复杂布局：掌握了多种 ListView 嵌套与样式装饰技巧。
2. 逻辑封装：区分了全局状态与局部状态的适用场景。
3. 多端适配：验证了 Flutter 代码在 OpenHarmony 系统上的原生级运行体验。

项目源码仓库：AtomGit - my_first_ohos_app
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

参考资源：

• Flutter Material Components
• OpenHarmony 三方库适配清单