Flutter × Harmony6.0 实战：构建高颜值鸿蒙天气页面（逐小时天气卡片详解）

前言

随着 HarmonyOS NEXT（Harmony6.0）生态逐渐完善，越来越多开发者开始关注 Flutter 在鸿蒙平台上的跨端开发能力。

过去，很多人认为 Flutter 更偏向 Android / iOS 双端，而 HarmonyOS 需要使用 ArkTS 或原生鸿蒙组件进行开发。但实际上，随着 Flutter 适配 Harmony6.0 的能力增强，开发者已经可以利用 Flutter 原有的 UI 渲染体系，在鸿蒙设备上快速构建高质量跨端应用。

对于移动端应用而言：

• UI 体验决定第一印象
• 动效与组件决定高级感
• 页面结构决定维护成本

而天气类 App，恰好是一个非常适合练习：

• 卡片化布局
• 响应式界面
• 横向滚动
• 图标系统
• Theme 主题适配
• 深浅色模式
• HarmonyOS 风格融合

的经典项目。

本文将基于 Flutter × Harmony6.0，实现一个“逐小时天气预报模块”，并从：

• 页面结构设计
• Flutter Widget 拆分
• Harmony 风格卡片
• ListView 横向滚动
• Theme 动态主题
• UI 组件复用
• 高级感界面构建

等多个角度，深入解析整个页面的实现思路。

---

背景

在传统移动端开发中，一个天气页面往往会遇到几个典型问题：

1. 页面层级复杂

天气应用通常包含：

• 当前天气
• 小时预报
• 七日天气
• 空气质量
• 风速湿度
• 日出日落
• 雷达图

如果组件拆分不合理，代码会迅速失控。

---

2. UI 重复度高

比如：

• 每小时天气卡片
• 每日天气卡片
• 指标信息卡片

本质上只是数据不同。

如果不进行组件封装：

• 维护困难
• 代码重复
• 修改成本高

---

3. 鸿蒙风格适配问题

Harmony6.0 更强调：

• 卡片化
• 圆角
• 柔和阴影
• 沉浸式设计
• 高级留白
• 流畅动画

因此传统 Android 风格页面直接迁移后，会显得“不够 Harmony”。

Flutter 的优势就在于：

它可以完全自定义 UI 渲染，从而更容易实现 HarmonyOS 风格设计。

---

Flutter × Harmony6.0 跨端开发介绍

Flutter 在 Harmony6.0 上的核心优势主要体现在：

一、统一渲染引擎

Flutter 使用：

• Skia
• Impeller（新渲染器）

统一绘制 UI。

这意味着：

同一套 Widget 树：

• Android 能运行
• iOS 能运行
• HarmonyOS 也能运行

真正做到：

一套代码，多端适配。

---

二、Flutter 更适合高自由度 UI

鸿蒙应用越来越强调：

• 动效
• 沉浸感
• 卡片化布局

而 Flutter 最大的优势就是：

它几乎不受原生控件限制。

例如：

• 任意圆角
• 毛玻璃
• 渐变
• 阴影
• 自定义动画
• 高级滚动效果

都可以轻松实现。

---

三、组件化能力极强

Flutter 非常适合：

• 页面模块拆分
• Widget 复用
• UI 组件化

例如本文中的：

• _buildHourlyForecast
• _buildHourItem

本质上就是：

“大组件 + 小组件”的经典架构。

---

页面效果设计思路

本文实现的是：

“逐小时天气预报模块”

最终页面特点：

• 横向滚动
• 圆角天气卡片
• 不同天气状态不同颜色
• Harmony 风格留白
• 高级感卡片布局

整体 UI 类似：

• 华为天气
• iOS 天气
• 小米天气

的融合风格。

---

核心代码实现

一、逐小时天气模块

Widget _buildHourlyForecast(ThemeData theme) {
  final items = [
    ('现在', Icons.wb_sunny_rounded, '26°', _orange),
    ('11:00', Icons.wb_sunny_outlined, '27°', _orange),
    ('12:00', Icons.cloud_outlined, '28°', _sky),
    ('13:00', Icons.cloud_queue, '28°', _sky),
    ('14:00', Icons.water_drop_outlined, '27°', _blue),
    ('15:00', Icons.thunderstorm_outlined, '25°', _purple),
  ];

  return Card(
    child: Padding(
      padding: const EdgeInsets.all(18),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionHeader(theme, '逐小时预报', '今天'),
          const SizedBox(height: 14),
          SizedBox(
            height: 104,
            child: ListView.separated(
              scrollDirection: Axis.horizontal,
              itemBuilder: (context, index) {
                final item = items[index];
                return _buildHourItem(
                  theme,
                  time: item.$1,
                  icon: item.$2,
                  temp: item.$3,
                  color: item.$4,
                );
              },
              separatorBuilder: (_, __) => const SizedBox(width: 10),
              itemCount: items.length,
            ),
          ),
        ],
      ),
    ),
  );
}

---

核心代码逐行解析

---

1. 天气数据初始化

final items = [

这里定义天气数据集合。

每一项包含：

• 时间
• 图标
• 温度
• 颜色

例如：

('现在', Icons.wb_sunny_rounded, '26°', _orange)

表示：

字段	含义
现在	时间
wb_sunny_rounded	天气图标
26°	温度
_orange	主题颜色

---

2. 使用 Card 构建 Harmony 风格卡片

return Card(

Flutter 的 Card：

本质是 Material 风格卡片组件。

非常适合 HarmonyOS 页面设计。

它天然具备：

• 圆角
• 阴影
• 卡片层次感

这也是鸿蒙页面中最常见的设计风格之一。

---

3. Padding 页面留白

Padding(
  padding: const EdgeInsets.all(18),

这里控制：

卡片内部边距。

为什么是 18？

因为：

Harmony 风格页面更强调：

• 呼吸感
• 留白感
• 轻量化视觉

18~24 的 padding 会比传统 Android 更高级。

---

4. Column 纵向布局

Column(

页面内部：

采用纵向排列：

• 标题
• 间距
• 小时天气列表

---

5. 标题组件

_buildSectionHeader(theme, '逐小时预报', '今天'),

这是一个：

“标题栏组件封装”。

好处：

• 页面结构更清晰
• 可以复用
• 统一样式

这是 Flutter 页面开发非常重要的思想：

UI 一定要组件化。

---

6. SizedBox 控制间距

const SizedBox(height: 14),

Flutter 中：

SizedBox 是最常见的留白组件。

相比 margin：

它更轻量。

也是现代 Flutter UI 的标准写法。

---

7. 限制横向区域高度

SizedBox(
  height: 104,

因为：

横向滚动 ListView 必须明确高度。

否则：

Flutter 会报：

Vertical viewport was given unbounded height

这是 Flutter 新手最常见问题之一。

---

ListView.separated 横向滚动解析

核心代码

ListView.separated(

这是 Flutter 中非常高级的列表组件。

相比普通 ListView.builder：

它支持：

“自动插入分隔间距”。

---

横向滚动

scrollDirection: Axis.horizontal,

设置为：

水平滚动。

---

itemBuilder

itemBuilder: (context, index)

作用：

动态生成每一个天气卡片。

---

获取数据

final item = items[index];

根据 index 获取当前天气数据。

---

调用天气卡片组件

return _buildHourItem(

这里体现：

Flutter 组件化思想。

父组件：

负责：

• 数据管理
• 列表控制

子组件：

负责：

• UI 渲染

这也是大型项目中最重要的架构方式之一。

---

天气卡片组件解析

核心代码

Widget _buildHourItem(

这是：

单个天气 Item。

---

参数设计

required String time,
required IconData icon,
required String temp,
required Color color,

使用 required：

确保：

所有参数必须传入。

这是 Dart 空安全体系的重要部分。

---

Container 卡片设计

Container(
  width: 68,

每个天气卡片宽度：

固定为 68。

这样：

横向滚动时：

视觉更整齐。

---

内边距

padding: const EdgeInsets.symmetric(vertical: 12),

让内容：

上下居中。

---

BoxDecoration 高级 UI 核心

decoration: BoxDecoration(

这里是真正决定：

页面高级感的地方。

---

半透明背景

color: color.withValues(alpha: 0.1),

作用：

根据天气颜色：

生成半透明背景。

例如：

• 晴天 → 橙色
• 阴天 → 蓝色
• 雷暴 → 紫色

这种设计：

在 HarmonyOS 和 iOS 中非常常见。

高级感极强。

---

圆角设计

borderRadius: BorderRadius.circular(18),

Harmony 风格非常强调：

“大圆角”。

相比 Android 传统 8dp：

Harmony 更偏向：

16~24 的柔和圆角。

---

Column 内部布局

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,

作用：

让：

• 时间
• 图标
• 温度

均匀分布。

---

时间文本解析

Text(
  time,

显示：

时间。

例如：

• 现在
• 11:00
• 12:00

---

copyWith 动态主题

theme.textTheme.bodySmall?.copyWith(

这里是 Flutter Theme 高级用法。

好处：

• 自动适配深色模式
• 自动适配字体系统
• 保持整体视觉统一

这是大型 Flutter 项目必须掌握的内容。

---

天气图标解析

Icon(icon, color: color, size: 24),

根据不同天气：

显示不同 Icon。

例如：

图标	天气
wb_sunny	晴天
cloud	阴天
thunderstorm	雷暴

---

温度文本

Text(
  temp,

显示温度：

例如：

26°

---

加粗设计

fontWeight: FontWeight.w800,

更符合：

HarmonyOS 信息层级设计。

---

页面最终效果分析

最终页面会具备：

1. Harmony 卡片风格

• 柔和圆角
• 半透明背景
• 高级留白

---

2. 高级横向滚动体验

• 平滑滑动
• 卡片间距统一
• 信息层级清晰

---

3. 深色模式天然适配

因为使用：

theme.textTheme

因此：

Dark Mode 下：

页面依旧协调。

---

Harmony6.0 开发心得

经过 Flutter × Harmony6.0 开发实践，我认为最大的变化在于：

一、UI 设计正在“鸿蒙化”

HarmonyOS 不再只是：

“安卓换皮”。

而是在：

• 视觉体系
• 卡片布局
• 动效逻辑
• 系统设计语言

上逐渐形成自己的风格。

---

二、Flutter 非常适合鸿蒙页面

尤其适合：

• 可视化页面
• 内容类页面
• 卡片类页面
• Dashboard
• AI UI
• 天气类 UI

因为 Flutter：

可以完全掌控像素级渲染。

---

三、组件化决定项目上限

本文虽然只是一个天气模块。

但已经体现：

• Widget 拆分
• Theme 管理
• UI 复用
• 数据驱动

这些大型项目核心思想。

真正复杂的项目：

本质上只是：

更多组件的组合。

---

总结

本文基于 Flutter × Harmony6.0，实现了一个高颜值“逐小时天气预报模块”，并深入解析了：

• Flutter 卡片布局
• 横向滚动实现
• Theme 动态主题
• Harmony 风格设计
• Widget 组件化
• Flutter UI 架构
  

可以发现：

Flutter 在 Harmony6.0 上，并不仅仅只是“能运行”。

而是真正具备：

• 高质量 UI
• 跨端一致性
• 高开发效率
• 高可维护性

的完整能力。

未来 HarmonyOS 生态成熟后：

Flutter + Harmony6.0 很可能会成为：

跨端应用开发的重要组合方案之一。