HarmonyOS ArkUI 响应式布局实战：断点、栅格与多端适配

一、一份 UI 适配多端的前提

HarmonyOS 应用可能运行在手机、折叠屏、平板甚至 2in1 设备上。屏幕尺寸差异带来的不是“等比放大”问题，而是布局结构本身需要变化：手机上单列列表，平板上应该变成双栏；手机上底部导航，平板或横屏时侧边导航更合理。ArkUI 的响应式能力就是围绕这个目标设计的。

二、断点：先把屏幕分段

断点（breakpoint）把连续变化的窗口宽度划分成有限的几档，让布局切换有明确边界。常见做法是监听窗口尺寸变化，计算当前断点：

import { display } from '@kit.ArkUI';

enum Breakpoint { SM = 'sm', MD = 'md', LG = 'lg' }

function getBreakpoint(width: number): Breakpoint {
  if (width < 600) return Breakpoint.SM;
  if (width < 840) return Breakpoint.MD;
  return Breakpoint.LG;
}

经验阈值：小于 600vp 视为手机竖屏，600~840vp 覆盖折叠屏展开与大屏手机，840vp 以上对应平板与 2in1。阈值不必照搬，但要保持全局统一，避免每个页面各用一套。

三、GridRow / GridCol：栅格化布局

ArkUI 提供栅格组件，把一行分成固定列数，子元素按列宽占比摆放，并在不同断点下自动调整。

GridRow({
  columns: { sm: 4, md: 8, lg: 12 },
  gutter: { x: 12, y: 12 },
  breakpoints: { value: ['600vp', '840vp'], reference: BreakpointReference.WindowSize }
}) {
  GridCol({ span: { sm: 4, md: 4, lg: 3 } }) {
    CardView()
  }
  GridCol({ span: { sm: 4, md: 4, lg: 6 } }) {
    ListView()
  }
}

这样同一个页面在手机上是上下两块，在平板上自动变成左右栏，不需要写两套组件树。

四、布局结构切换而非缩放

响应式设计的核心判断是“结构要不要变”，而不只是间距变多少。三个典型场景：

1. 导航形态：手机用 Tabs 底部导航，LG 断点切换为侧边 Navigation，用 Navigation 的分栏模式或条件渲染实现；
2. 列表密度：SM 单列，MD 双列，LG 三列，配合 Grid 的 columnsTemplate 动态计算；
3. 详情页：手机上进入新页面，平板上用左右分栏同时展示列表与详情，避免频繁跳转。

五、折叠屏的额外考量

折叠屏展开与折叠态的宽度可能跨越断点，布局会在运行中切换。注意两点：

• 切换时保留用户的滚动位置与输入内容，避免重建组件导致状态丢失；
• 涉及相机、悬停态等特殊能力时，使用窗口模式判断，而不是仅靠宽度猜测设备形态。

六、验证清单

适配完成后至少覆盖以下场景再提测：

1. 手机竖屏、手机横屏；
2. 折叠屏折叠态与展开态来回切换；
3. 平板横竖屏切换；
4. 系统字体放大到最大档位，检查文本截断与按钮挤压；
5. 分屏/悬浮窗模式下的最小可用宽度。

七、小结

响应式布局不是把设计稿写死再调间距，而是先定义断点、再用栅格与条件布局表达“结构如何变化”。把断点阈值、栅格列数、导航形态收敛成全局配置，多端适配才能长期可维护，而不是每加一个页面就重新适配一遍。