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

案例概述

本案例使用 OrientationBuilder 监听设备方向（横屏/竖屏），并根据方向改变布局方向：

• 竖屏：上下两块区域；
• 横屏：左右两块区域。

适用于需要在横竖屏之间调整排版的页面，例如视频播放页、图表面板等。

核心概念

• OrientationBuilder 提供当前方向 Orientation.portrait 或 Orientation.landscape；
• 使用 Flex + 动态 direction 实现同一套子组件在不同方向上的重排；
• 搭配 Expanded 让两个区域平均分配空间。

代码片段与说明

1. OrientationBuilder 的使用

body: OrientationBuilder(
  builder: (context, orientation) {
    final isPortrait = orientation == Orientation.portrait;
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Flex(
        direction: isPortrait ? Axis.vertical : Axis.horizontal,
        children: [
          Expanded(child: Container(color: Colors.teal.shade100)),
          const SizedBox(width: 8, height: 8),
          Expanded(child: Container(color: Colors.teal.shade200)),
        ],
      ),
    );
  },
),

说明：

• 通过 isPortrait 控制主轴方向：竖屏时垂直分布，横屏时水平分布；
• 中间的 SizedBox 在不同方向下分别提供宽度或高度间距；
• 两块 Expanded 子容器始终平分可用空间。

应用场景与扩展

• 媒体内容页：横屏时主内容区域更宽，控制条移到底部或侧边；
• 报表页：横屏时可以同时展示图表和数据表，竖屏时只显示其中一种；
• PC 端窗口如果支持旋转，也能复用这一套逻辑，只要设备方向发生变化就会触发布局更新。

深入理解：横竖屏适配的重要性

1. 为什么需要区分横竖屏？

在移动设备上，用户可以随时旋转屏幕，从竖屏切换到横屏。这会导致：

• 屏幕宽度和高度互换；
• 可用空间的分布完全不同；
• 某些 UI 元素可能变得不适合当前方向。

如果应用不做横竖屏适配，用户旋转屏幕后会看到：

• 内容被压扁或拉伸；
• 某些按钮或文字超出屏幕边界；
• 布局显得混乱或不可用。

因此，横竖屏适配不仅是"锦上添花"，而是基本的可用性要求。

2. 竖屏 vs 横屏的设计差异

• 竖屏：

  • 宽度受限，高度充足；
  • 适合展示长列表、纵向内容流；
  • 用户习惯于上下滚动。

• 横屏：

  • 宽度充足，高度受限；
  • 适合展示宽表格、并排内容、视频播放；
  • 用户习惯于左右滚动。

因此，同一套内容在两种方向上需要不同的布局策略。

3. OrientationBuilder 的工作原理

OrientationBuilder 会：

• 监听设备方向变化；
• 在方向改变时自动调用 builder 函数；
• 传入当前的 Orientation（portrait 或 landscape）。

这样你就可以根据方向动态调整布局，而不需要手动监听系统事件。

4. 横竖屏适配的常见策略

• 改变主轴方向：从竖向改为横向（本案例）；
• 隐藏/显示元素：在某个方向上隐藏不重要的元素，节省空间；
• 改变组件大小：在横屏上让某些组件更大，充分利用空间；
• 改变导航方式：竖屏用底部导航，横屏用侧边导航；
• 改变内容展示方式：竖屏显示列表，横屏显示网格或表格。

5. PC 端的特殊考量

在 PC 上，虽然屏幕通常是固定方向的，但窗口可以被调整大小。你可以：

• 使用 OrientationBuilder 来检测窗口宽高比的变化；
• 或结合 LayoutBuilder 和 MediaQuery 做更精细的适配。

某些 PC 应用（如平板模拟器）也可能支持屏幕旋转，此时 OrientationBuilder 同样适用。

6. 横竖屏适配在业务系统中的应用

• 视频播放器：竖屏时视频在上方、控制条在下方；横屏时视频占满屏幕；
• 图片浏览：竖屏时单列显示，横屏时双列或全屏显示；
• 表单输入：竖屏时字段纵向排列，横屏时可能改为两列；
• 数据展示：竖屏时显示摘要，横屏时显示详细表格。

通过合理使用 OrientationBuilder，你可以为用户提供在任何方向上都舒适的使用体验。