open harmony 项目实战：手机和平板响应式布局适配

open harmony 项目实战手机和平板响应式布局适配OpenHarmony 的优势之一是多设备场景。一个应用如果只考虑手机竖屏体验会比较受限。我的“语文视界”项目虽然是语文学习 App但也在结构上预留了手机和平板适配能力。这篇文章就来聊聊项目里的响应式布局做法。一、声明支持设备类型项目在module.json5中声明支持手机和平板deviceTypes: [phone,tablet]这只是第一步真正的适配还要在页面层处理不同宽度下的布局。二、监听窗口尺寸变化EntryAbility中监听窗口尺寸mainWindow.on(windowSizeChange, (size: window.Size) { AppStorage.setOrCreate(windowWidth,size.width); hilog.info(DOMAIN,testTag,windowSize changed to %{public}d x %{public}d,size.width,size.height); });这样页面就可以通过AppStorage拿到窗口宽度。三、页面读取窗口宽度页面中常见写法StatewindowWidth: number 360;StorageProp(windowWidth)storedWidth: number 360; aboutToAppear(): void { this.windowWidth this.storedWidth ||360; }然后通过宽度判断是否平板privateisTablet(): boolean {returnthis.windowWidth 600; }这个阈值简单直观适合当前项目。四、学习中心的响应式 Grid学习中心有 4 个模块诗词背诵、诗词默写、诗词配对、朝代排序。手机上用两列平板上用四列Grid(){GridItem(){ this.buildModuleCard(0); }GridItem(){ this.buildModuleCard(1); }GridItem(){ this.buildModuleCard(2); }GridItem(){ this.buildModuleCard(3); } } .columnsTemplate(this.isTablet()? 1fr1fr1fr1fr : 1fr1fr) .columnsGap(12).rowsGap(12)这个例子很典型同样的内容在大屏上横向展开在小屏上保持紧凑。五、为什么不直接固定宽度如果直接写死宽度比如每个卡片 160vp在不同设备上可能出现手机小屏挤不下。平板大屏留白过多。横屏时布局不自然。使用1fr可以让卡片均分空间更适合响应式布局。六、安全区适配除了宽度安全区也很重要。项目在EntryAbility里读取系统避让区const avoid mainWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM); const topVp avoidPxToVp(avoid.topRect.height); const bottomVp avoidPxToVp(avoid.bottomRect.height);AppStorage.setOrCreate(safeAreaTopVp,topVp 0 ?topVp: 48);AppStorage.setOrCreate(safeAreaBottomVp,bottomVp 0 ?bottomVp: 0);页面主容器使用.padding({top: this.safeAreaTopVp, bottom: this.safeAreaBottomVp }).expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]);底部导航也会加上底部安全区.padding({bottom:16 this.safeAreaBottomVp })这样在不同设备上不会压到状态栏或手势区。七、断点系统项目里还提供了BreakpointSystemexportclassBreakpointSystem{privatecurrentBreakpoint:Breakpoint Breakpoint.SM;publicupdateBreakpoint():void{ const windowWidth AppStorage.getnumber(windowWidth) ||0; constnewBreakpoint getBreakpoint(windowWidth);if(newBreakpoint!this.currentBreakpoint) {this.currentBreakpoint newBreakpoint;this.notifyListeners(); } } }虽然当前页面大多直接用isTablet()但这个断点系统可以作为后续复杂适配的基础。八、哪些页面适合响应式增强后续可以重点优化首页推荐卡片平板上可以双列。诗词列表平板上可以左右分栏。阅读详情平板上增加更宽的阅读区域。字典页左侧分类右侧详情。我的页面数据卡片横向展开。九、适配经验我在这个项目里的经验是先保证手机体验完整。再用窗口宽度判断平板布局。列表和模块优先用 Grid。底部导航一定考虑安全区。文本内容不要因为大屏变得过长可以限制阅读宽度。总结响应式适配不是简单把页面放大而是根据设备宽度重新组织信息密度。“语文视界”目前通过windowSizeChange AppStorage isTablet Grid建立了基础适配能力。后续如果继续扩展到平板分栏、横屏阅读、多窗口场景这套基础还能继续复用。