【OpenHarmony/HarmonyOs 】响应式布局适配手机、平板与折叠屏ResponsiveUtils 实战HarmonyOS 应用经常需要面对多种设备手机、平板、折叠屏甚至更大的屏幕。学习类 App 尤其适合多端使用手机刷题平板看报纸折叠屏一边看知识点一边答题。本文结合政治视界项目的ResponsiveUtils.ets详细讲解 ArkTS 中如何做响应式布局 一、为什么不能只按手机设计如果把手机页面直接拉伸到平板会出现几个问题卡片过宽阅读不舒服内容密度太低页面留白过多筛选栏和列表无法充分利用横向空间折叠屏展开后体验像放大的手机。所以项目中单独封装了响应式工具类统一判断屏幕宽度、断点、布局模式。二、设备和断点定义ResponsiveUtils.ets中定义了设备类型和断点exportenumScreenBreakpoint { SM sm, MD md, LG lg, XL xl}exportenumLayoutMode { COMPACT compact, REGULAR regular, EXPANDED expanded}断点用于判断屏幕大小布局模式用于决定页面怎么排版COMPACT手机竖屏单列REGULAR横屏或小平板适度增加内容宽度EXPANDED大平板或折叠屏展开适合双列。三、初始化屏幕信息工具类初始化时读取屏幕信息privateasync initScreenInfo(): Promisevoid {constdisplayInfo await display.getDefaultDisplaySync();this.screenWidth px2vp(displayInfo.width);this.screenHeight px2vp(displayInfo.height);this.screenDensity displayInfo.densityDPI /160;this.isLandscape this.screenWidth this.screenHeight;this.updateBreakpoint();this.updateDeviceType();this.updateLayoutMode();this.setupFoldListener(); }这里把像素转成 vp是因为 ArkUI 布局更适合用 vp 做适配。四、布局模式判断核心判断逻辑如下privateupdateLayoutMode(): void {if(this.isFoldable this.foldState 2) {this.layoutMode LayoutMode.EXPANDED; }elseif(this.screenWidth 840) {this.layoutMode LayoutMode.EXPANDED; }elseif(this.screenWidth 600||this.isLandscape) {this.layoutMode LayoutMode.REGULAR; }else{this.layoutMode LayoutMode.COMPACT; } }这段代码体现了一个思路不要只判断设备名称而要判断可用空间。折叠屏展开后即使仍是移动设备也应该使用大屏布局。五、页面中使用响应式参数各页面都维护类似状态StateprivateresponsiveInfo: ResponsiveInfo responsive.getResponsiveInfo();StateprivateisTwoColumn: boolean false;StateprivatecontentPadding: number 16;StateprivatecardRadius: number 20;StateprivatetitleFontSize: number 24;页面出现时更新参数privateupdateResponsiveParams(): void {this.isTwoColumn responsive.shouldShowTwoColumn();this.contentPadding responsive.getHorizontalPadding();this.cardRadius responsive.getBorderRadius(lg);this.titleFontSize responsive.getFontSize(xl) 4; }这样页面里的 padding、圆角、字号、布局列数都能跟随设备变化。六、监听屏幕变化页面注册监听器aboutToAppear(): void { this.updateResponsiveParams(); responsive.addListener(this.onResponsiveChange); } aboutToDisappear(): void { responsive.removeListener(this.onResponsiveChange); }privateonResponsiveChange (info: ResponsiveInfo):void{ this.responsiveInfo info; this.updateResponsiveParams(); }注意aboutToDisappear()中移除监听否则页面销毁后仍可能收到回调造成不必要的问题。七、哪些页面适合双列在政治视界中双列布局特别适合首页左侧学习统计右侧推荐题和错题笔记左侧笔记列表右侧详情报纸左侧文章列表右侧文章内容闪卡左侧筛选右侧卡片学习报告左侧概览右侧分类统计。手机上单列更适合快速操作平板上双列更适合阅读和对比。八、实现流程总结定义断点和布局模式 ↓ 读取屏幕宽高与密度 ↓ 判断横竖屏和折叠状态 ↓ 根据宽度得到 COMPACT/REGULAR/EXPANDED ↓ 页面订阅响应式变化 ↓ 更新 padding、字号、圆角、列数九、实践建议写响应式布局时不建议每个页面都自己判断屏幕宽度。统一封装工具类更好阈值统一页面代码更干净后续调整断点只改一处折叠屏和横屏逻辑更容易复用。十、结语响应式布局不是简单适配屏幕而是为不同设备重新组织信息。政治视界通过ResponsiveUtils把设备判断、断点、折叠屏状态和尺寸参数集中管理让页面可以自然适配手机、平板和折叠屏。HarmonyOS 的全场景能力给了学习 App 很大空间。做好响应式就是迈向全场景学习体验的第一步
