前言

在多设备开发的时代，最头疼的就是“比例失调”。一张精美的 1:1 专辑封面，在超窄屏手机上可能变成了长方形，在平板上又可能被横向拉伸。

AspectRatio（宽高比组件） 就是为了捍卫“视觉比例”而生的。它通过强制性的比例约束，确保组件无论在什么尺寸的父容器中，都能维持开发者设定的长宽比。在鸿蒙生态这种涵盖手机、折叠屏、平板的多元场景下，AspectRatio 是保持 UI 设计一致性的核心防线。

目录

• 一、 比例的魔力：为什么需要 AspectRatio？
• 二、 布局规则：它是如何工作的？
• 三、 核心参数与使用禁忌
• 四、 实战解析：从视频播放器到相册网格
• 五、 总结

一、 比例的魔力：为什么需要 AspectRatio？

在 Flutter 中，如果不加限制，组件通常会尝试填满父容器（Expand）。这在处理图片、视频或特定比例的卡片时会引发视觉灾难。

二、 布局规则：它是如何工作的？

AspectRatio 并不是盲目地设定大小，它遵循一套严密的布局算法：

1. 首先，它会尝试寻找一个符合比例的最大尺寸，该尺寸必须满足父容器传递下来的约束。
2. 如果父容器的宽度约束是固定的（如 300.0），它会直接计算出高度 300.0 / aspectRatio。
3. 如果约束是宽松的，它会尝试在约束范围内寻找最适合的平衡点。

三、 核心参数与使用禁忌

⚠️ 使用禁忌：

• 无限约束冲突：不要在父容器宽度和高度都是 double.infinity 的情况下使用 AspectRatio，这会导致布局异常（不知道该以哪个轴为基准）。
• 固定尺寸冲突：如果子组件被写死了高度且与比例冲突，AspectRatio 可能会导致子组件溢出或被强制拉伸。

四、 实战解析：永不变形的视觉黄金律

在 lib/main.dart 的综合示例中，我们展示了两种经典的比例：

4.1 电影感视频比例 (16:9)

AspectRatio(
  aspectRatio: 16 / 9,
  child: Container(color: Colors.blueAccent),
)

无论在何种屏幕下，该蓝色色块始终保持标准的宽屏比例，常用于视频播放器插件的底座。

4.2 极简正方形 (1:1)

AspectRatio(
  aspectRatio: 1.0,
  child: Container(color: Colors.orangeAccent),
)

这是社交应用头像、音乐专辑封面的通用标准。

五、 总结

AspectRatio 是 UI 视觉设计的守护神。在鸿蒙系统的多端适配中，它让我们的 UI 在跨越不同屏幕比例时，依然能保持设计的初心，不因物理尺寸的改变而变形。

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