IM聊天如何从直板机单栏平滑过渡到宽屏三分栏？竖版短视频如何在16:9到20:9的屏幕比例下保持沉浸？折叠屏悬停时相机预览如何避开折痕？华为“一次开发多端部署”白皮书提供了完整的典型场景实现方案。本文从代码实战角度，拆解IM分栏、图文挪移、视频沉浸、相机适配、悬停避让等一多开发核心场景的实现逻辑。
IM聊天三分栏——Navigation的Stack/Split模式切换
IM聊天分栏布局从直板机的单栏到宽屏的三分栏，需要基于折叠开合、横竖屏旋转等窗口变化进行响应式布局。
Navigation组件实现：将联系人列表作为导航功能放入Tabs的TabContent中。当横向断点是Small和XSmall时，mode设为Stack（单栏）；其他横向断点时，mode设为Split（左右分栏）。
断点变化监听：通过@Watch监听断点变化。当断点进入Medium/Large/XLarge且当前在联系人列表时，路由到聊天详情占位页面；当断点退回XSmall/Small且路由顶部为占位页时，退回到联系人列表，避免展示无意义的占位页面。
navBarWidth控制：Large和XLarge断点时设为44.5%，其他断点为50%。
图文分栏——GridRow栅格的挪移布局
图文分栏在手机窄屏上图下文，宽屏下左图右文，通过GridRow栅格组件实现响应式挪移布局。
栅格列分配：图片区域在xs/sm断点时占满全部宽度（12列），lg/xl断点时占一半宽度（6列）。文本区域相应调整。用户可通过按钮切换upDownStructure状态变量，在md断点实现上下/左右布局的动态切换。
宽高比处理：极宽图片在左右分栏时可能变小，极高图片在上下分栏时同样问题，通过用户可控的布局切换按钮让用户按喜好选择内容呈现方式。
竖版短视频沉浸式播放——动态比例计算
竖版短视频沉浸式播放通过监听窗口尺寸变化，动态计算视频摆放位置，实现不同屏幕比例下的最佳沉浸体验。
布局规则：窗口比例小于14.4:9时，保障视频内容完整性左右留白；14.4:9到18:9区间时，视频铺满一边后对超出部分裁剪实现全屏沉浸；18:9到20:9区间时，视频从状态栏区域开始显示实现三边沉浸；大于20:9时，视频纵向居中显示避免下方留白过多。
实现关键：与横版视频全屏不同，短视频页面布局只与窗口尺寸有关（非屏幕尺寸）。通过getMainWindow().getWindowProperties获取窗口宽高，计算宽高比确定布局规则。使用XComponent.setXComponentSurfaceRect设置视频流比例。
相机预览适配——XComponent+foldStatusChange
相机预览使用XComponent显示相机流，需根据设备屏幕比例选取最佳预览分辨率。
预览分辨率选择：遍历getSupportedOutputCapability获取的previewProfiles，选择最接近设备屏幕比例的预览分辨率（允许0.2误差）。根据optimalSize重新设置XComponent宽高。
折叠状态监听：折叠设备使用CameraManager.on('foldStatusChange')监听折叠状态变化，动态获取当前折叠/展开状态下的镜头列表，重新选择相机并重置预览画面。
预览角度：直接送显场景通过getPreviewRotation获取预览旋转角度并setPreviewRotation；二次处理场景应用自行旋转图像buffer。拍照角度通过getPhotoRotation获取并写入PhotoCaptureSetting.rotation。
悬停态适配——FolderStack与FoldSplitContainer
FolderStack组件继承自Stack，通过upperItems字段实现悬停态布局，被修饰的组件堆叠在上半屏，其他在下半屏并自动避让折痕区。
FoldSplitContainer实现折叠屏二分栏/三分栏在展开态、悬停态、折叠态的区域控制。primary和secondary设置二分栏上下区域，extra设置三分栏侧栏区域，通过LayoutOptions设置各区域比例。悬停态时自动避让折痕区（上半屏由中线向上避让16vp，下半屏由中线向下避让40vp）。
