网站根目录验证文件,电子商务网站开发目标,简述电子商务网站开发过程,群辉授权wordpress权限【HarmonyOS Next】鸿蒙应用折叠屏设备适配方案
一、前言 目前应用上架华为AGC平台#xff0c;都会被要求适配折叠屏设备。目前华为系列的折叠屏手机#xff0c;有华为 Mate系列#xff08;左右折叠#xff0c;华为 Mate XT三折叠#xff09;#xff0c;华为Pocket 系列…【HarmonyOS Next】鸿蒙应用折叠屏设备适配方案
一、前言 目前应用上架华为AGC平台都会被要求适配折叠屏设备。目前华为系列的折叠屏手机有华为 Mate系列左右折叠华为 Mate XT三折叠华为Pocket 系列上下折叠。
二、适配方案思路探讨
目前鸿蒙应用适配折叠屏的思路分为两种分栏和全屏适配。 分栏 在左右折叠手机上相当于首页一级页面在左边二级子页面点开后在右边。三折叠上形态未知有知道的小伙伴可以同步下。 上下折叠手机上不以分栏的方式呈现和直板机相似。
单栏全屏
全屏适配并且拉伸界面不进行界面处理。而是处理成平板的UI布局形式和直板机界面排版不一样。这种适配方案效果最好但是工作量较大。
不过目前华为官方反馈说以后不演进分栏方案了。三折叠和25年三月新形态手机的适配都是风险。
三、适配方案实现
传统的router路由在折叠屏适配上无法提供良好支撑。所以建议切换到Navigation。
因为不管是路由回退栈的处理还是页面数的限制问题。Navigation都优于router并且华为官方已经明确表示推荐Navgation的方案。
当然如果有了解HMRouter的同学也可以使用因为HMRouter就是在Navgation上进行封装和优化的三方库。
分栏 设置主页面容器Navigationmode属性为NavigationMode.Stack
Entry
Component
struct MainPage {State message: string Hello World;// 创建一个页面栈对象并传入NavigationpageStack: NavPathStack new NavPathStack()build() {Navigation(this.pageStack) {// 页面布局Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold).onClick((){// 跳转到子页面this.pageStack.pushDestination({name: OnePage,}, false); //该false表示不需要转场动画默认是有的})}.width(100%)}.height(100%)}.mode(NavigationMode.Split)}
}
细节可参考该文章点击跳转》【HarmonyOS】关于官方推荐的组件级路由Navigation的心得体会 单栏全屏 设置主页面容器Navigationmode属性为NavigationMode.Stack
Entry
Component
struct MainPage {State message: string Hello World;// 创建一个页面栈对象并传入NavigationpageStack: NavPathStack new NavPathStack()// 使用 State 装饰器定义响应式变量用于存储组件的宽高State width: number 0State height: number 0build() {Navigation(this.pageStack) {// 页面布局Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold).onClick((){// 跳转到子页面this.pageStack.pushDestination({name: OnePage,}, false); //该false表示不需要转场动画默认是有的})}.width(100%)}.height(100%)}// 分为三种模式默认自动NavigationMode.Auto单页面NavigationMode.Stack和分栏NavigationMode.Split.mode(NavigationMode.Stack).backgroundColor(Color.Gray).onSizeChange((width: number, height: number) {// 当组件大小变化时更新宽高信息this.width widththis.height height}).onAreaChange( (oldValue: Area, newValue: Area){// newValue.width})}
}
界面需要监听最外层宽高onSizeChange和onAreaChange都可以建议使用onAreaChange用于判定界面是否需要切换为平板适配模式。【目前官方推荐使用600vp 作为当页面宽度大于等于一定阈值点】
子页面添加跳转入口函数添加NavDestination生命周期的处理
// 跳转页面入口函数
Builder
export function OnePageBuilder() {OnePage()
}Entry
Component
struct OnePage {private TAG: string OnePage;State message: string Hello World;pathStack: NavPathStack new NavPathStack();build() {NavDestination() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width(100%)}.height(100%)}.onShown((){console.log(this.TAG, OnePage onShown);}).onReady((context: NavDestinationContext) {this.pathStack context.pathStack;})}
}
在首页获取到的宽高可以使用多种方式缓存起来例如放到AppStorage单例中。二级等子页面进入后就可以判定。
当然页面中的动态监听也需要保存。场景需要覆盖因为在首页时用户可能是折叠状态进入子页面后展开的情况也有。
当然判定手机折叠屏状态除了通过宽高也可通过官方提供的折叠屏状态进行判断不过在上下折叠屏手机上也会被激活这里需要额外在判定一下。
import { display } from kit.ArkUI;let ret: boolean false;
// 当前是否是折叠屏
ret display.isFoldable();if(ret){
let callback: Callbackdisplay.FoldStatus (data: display.FoldStatus) {console.info(Listening enabled. Data: JSON.stringify(data));
};
display.on(foldStatusChange, callback);
}// 页面销毁时记得取消监听
display.off(foldStatusChange, callback);
