鸿蒙Flutter实战：用交错网格美化多城市天气卡片

多城市天气首页这个需求，做过的同学应该都有体会：城市一多，GridView把每个格子都排成一样高，北京晴天、广州雷雨、拉萨多云全挤在同等大小的方块里，视觉上又呆又难突出重点。后来我在鸿蒙版Flutter项目里试着引入flutter_staggered_grid_view这个三方库，用交错网格重新排布城市卡片，整个页面一下子舒服多了。这篇文章就把我从选型、集成到在鸿蒙环境里踩坑的完整过程写下来，适合正在做鸿蒙Flutter应用、想让首页卡片有层次感的开发者，也适合刚接触Flutter三方库集成、担心鸿蒙兼容性的同学参考。

1. 为什么是Staggered Grid View：多城市卡片形态的选型思考

1.1 多城市天气首页的卡片形态痛点

天气应用的多城市首页，信息天然是不对等的。默认城市要展示当前温度、天气描述、空气质量、未来一周预报，信息量很大；其他收藏城市只需要给出城市名、温度和一两个关键指标就够了。如果所有城市都用同一种卡片，默认城市的信息放不下，次要城市又显得空旷。

我之前第一版用的是Flutter自带的GridView.count，把每个格子做成固定高度，默认城市在卡片内硬塞更多内容，结果小屏手机上文字都快挤到一起了。其实这个问题的本质，是网格单元尺寸不够灵活。GridView从设计上就要求每个cell横纵尺寸一致，想做成“有的占两列、有的占一列、有的高度跟着内容走”的形态，就得手工去拼Row、Column、Stack，还要处理不同屏幕宽度下的跨列计算，代码写起来非常啰嗦，维护成本也高。

对比一下更能看清：普通GridView像超市里的标准货架，每格一样大，好处是整齐，坏处是没法根据商品大小调整陈列；而交错网格（Staggered Grid）更像设计展的展示台，大件占两格、小件占一格，高矮错落，排出来的页面有节奏感。对天气首页来说，这就是最合适的形态。

1.2 交错网格到底解决了什么问题

flutter_staggered_grid_view这个库做的事情很简单：保持网格布局的底层结构，但允许每个tile独立设置跨列数和跨行数，也允许tile高度自适应内容。你在同一个StaggeredGrid.count里，把默认城市配置成2列宽的大卡，次要城市配置成1列宽的小卡，行高可以自动伸缩，视觉上就形成了天然的优先级。

它还提供了两种使用层级。一种是普通组件StaggeredGrid，适合页面内容固定、不涉及懒加载的场景；另一种是SliverStaggeredGrid，适合嵌进CustomScrollView，配合下拉刷新、加载更多等交互。

我当时选这个库的核心原因有三个：

• 它是纯Dart实现，不依赖Android、iOS原生View或原生服务；
• API设计简洁，声明式地描述每张卡片的尺寸，不写布局计算代码；
• 支持Sliver版本，列表项多的时候也能懒加载，滚动性能有保障。

1.3 为什么纯Dart三方库在鸿蒙上可以直接用

这里要先说清楚鸿蒙Flutter的运行机制。HarmonyOS NEXT上跑Flutter应用，Dart代码仍然由FlutterEngine执行，UI界面由Flutter自绘引擎渲染，与Android/iOS上的Flutter在Dart层完全一致。区别只在于平台通道（Platform Channel）要调用鸿蒙系统能力时，需要一套鸿蒙的原生插件适配。

flutter_staggered_grid_view只使用了Dart层面已有的绘制和布局能力，不调用任何平台通道，所以它天然兼容鸿蒙Flutter，不需要额外写鸿蒙原生插件。这也是选型时的一个重要判断依据：引入一个三方库之前，先看它是不是纯Dart包，是否依赖dart:io、dart:ffi或者flutter/services里的平台通道。如果依赖了原生能力，就得去找有没有鸿蒙适配版，或者自己用HarmonyOS的ArkTS接口封装。

判断方法很简单：到pub.dev打开该包的源码目录，如果只有lib/目录，没有android/、ios/目录，大概率是纯Dart实现；再看它引用的依赖里有没有flutter/services，没有的话基本可以放心。

2. 鸿蒙Flutter工程准备：从环境配置到第一个可运行Demo

2.1 版本匹配与安装

鸿蒙Flutter开发和标准Flutter开发有几个前置差异，最容易栽跟头的是SDK版本。目前鸿蒙Flutter主要使用开源社区维护的支持OpenHarmony的Flutter SDK，通常称为ohos分支。推荐组合是Flutter 3.7以上版本加DevEco Studio 4.0以上版本，目标API可以选HarmonyOS NEXT对应的API 9以上。

安装好后，用flutter doctor -v检查环境，重点看Flutter和DevEco是否识别到鸿蒙工具链。如果有hdc命令，说明鸿蒙开发工具链已经就绪。真机连接后执行：

bash复制hdc list targets

能看到设备序列号就说明连接正常。这里插一句，很多人以为Flutter官方SDK直接支持鸿蒙，实际上需要切换到ohos分支的SDK，否则用flutter create建工程不会生成ohos目录。

2.2 创建支持鸿蒙的Flutter工程

SDK确认无误后，创建一个新工程：

bash复制flutter create --platforms ohos my_weather_app
cd my_weather_app
flutter pub get

执行完检查工程目录，如果看到ohos目录，说明模板创建成功。没有这个目录的话，多半是Flutter SDK不是ohos分支，需要重新配置环境变量切换SDK路径。

2.3 集成flutter_staggered_grid_view依赖

在pubspec.yaml的dependencies节点下添加：

yaml复制dependencies:
  flutter:
    sdk: flutter
  flutter_staggered_grid_view: ^0.7.0

然后执行：

bash复制flutter pub