HarmonyOS详情页实现手机折叠屏平板自适应

HarmonyOS 应用同时运行在手机、折叠屏和平板上时，核心不是为每种机型分别制作界面，而是根据持续变化的窗口宽度动态调整布局。约 360vp 的手机可采用单列，约 720vp 的折叠屏展开态使用双栏，840vp 以上的平板则采用主内容与侧栏布局；分屏、旋转和自由窗口缩放同样遵循这一规则。

自适应布局负责尺寸连续变化，响应式布局则通过窗口断点进行页面级调整。常用能力包括利用 Blank、flexGrow 和 flexShrink 拉伸，FlexAlign.SpaceEvenly 均分，layoutWeight 或百分比控制占比，aspectRatio 保持图片比例，List 或 Scroll 支持内容延伸，displayPriority 隐藏次要内容，以及 FlexWrap.Wrap 自动折行。断点可设置为 320vp、600vp 和 840vp，通常在宽度达到 600vp 时考虑分栏，达到 840vp 时将底部 Tab 改为侧边 Tab。

以“内容详情+相关推荐”页面为例，手机端是封面、标题、正文和底部固定操作栏的单列结构；折叠屏展开后变为左侧详情、右侧推荐，操作栏移至顶部；平板则在主区和推荐侧栏外增加最大宽度限制并居中。针对常见问题，可用 GridRow 分栏并设置约 1200vp 的 maxContentWidth，避免大屏内容过宽；为封面设置 aspectRatio(16 / 9)，防止拉伸；标题在 sm 断点限制两行，md/lg 放宽至三行并使用省略号；底部操作栏则依据断点切换为顶部工具条。

实现时，GridRow 可监听窗口断点，GridCol 让手机主内容占 12 列、平板主区占 8 列并为侧栏保留 4 列，xs 和 sm 下侧栏不占位。onBreakpointChange 更新当前断点，并驱动标题行数及操作栏形态；windowSizeChange 用于响应分屏、拖拽和旋转，复杂计算仅在断点变化时处理。折叠设备还可通过 display.isFoldable() 和 foldStatusChange 获取折叠状态，但该状态只用于悬停或相机比例等特殊策略，整体布局仍应以窗口宽度为准。页面销毁时要解除 windowSizeChange 监听，避免资源泄漏。