鸿蒙HarmonyOS NEXT一多适配技术方案

鸿蒙一多是什么

HarmonyOS 系统面向多终端提供了“一次开发,多端部署”(后文中简称为“一多”)的能力,让开发者可以基于一种设计,高效构建多端可运行的应用。

多设备
一套代码工程,一次开发上架,多端按需部署。开发者靠着HarmonyOS底座支持需要一多适配,实现对不同设备兼容的同时,提供跨设备的流转、迁移和协同的分布式体验。
在这里插入图片描述

在HarmonyOS NEXT上如何实现

断点区分

断点是什么?程序员在研发的过程中都会设置断点去debug,但是在这里的断点并不是调试的断点。鸿蒙中断点是让开发者可以结合窗口宽度与高度两个维度去适配HarmonyOS的1+8设备,解决多设备UX布局问题。通过该方法,开发者无需关注设备类型,即可达到多设备的自适应UI布局效果。

横向断点以应用窗口宽度为基准,按照320vp、600vp、840vp、1440vp四个阈值将断点分为了5个值:
横向断点

分析当前所有设备高宽比,可以将设备按照0.8以及1.2两个阈值分成3个区间:
纵向断点)
官方把多设备的标准如下:
折叠屏折叠态和手机在竖立时横向断点是’sm’、纵向断点是’lg’,在横屏时横向断点是’md’、纵向断点是’sm’。
折叠屏展开态横竖向的横纵断点都为’md’。
平板横向的横纵断点分别是’lg’和’sm’,在竖向的横纵断点为’lg’和’lg’。
2in1横向的横纵断点分别是’xl’和’sm’。
在这里插入图片描述

设备区分

在鸿蒙中如果要区分设备类型,也很简单,例如直板机、折叠屏、PAD、2in1

判断直板机

 deviceInfo.deviceType == 'phone' || deviceInfo.deviceType == 'default';

判断PAD

 deviceInfo.deviceType == 'tablet';

判断2in1

 deviceInfo.deviceType == '2in1';
应用窗口的适配

应用在2in1上默认以窗口化来显示,并支持窗口无级拖动,另外,应用可以根据自己的情况来限制窗口
拖动的调节范围,最佳实践,控制方法是在module.json5中进行配置:不配置或者限制下最小窗口

"minWindowWidth":360,
"minWindowHeight": 240,
Tabs的适配

以lg类型为例,设置以下3步即可

扫描二维码关注公众号,回复: 17406872 查看本文章
  1. lg下barPosition必须是BarPosition.Start
  2. lg下vertical必须是true
  3. Tabs在左侧时,barWidth和barHeight重新设置

大部分的应用APP首页都是Tabs的形式,Tabs控件直接支持多设备的变化。重要的一个属性为barPosition,在lg下vertical必须是true,在通过BarPosition.Start或者BarPosition.End去做变换。

Start:vertical属性方法设置为true时,页签位于容器左侧;vertical属性方法设置为false时,页签位于容器顶部。
End:vertical属性方法设置为true时,页签位于容器右侧;vertical属性方法设置为false时,页签位于容器底部。

容器组件的适配

List:lanes接口设置列数,示例:lg断点下显示2列,其它场景显示1列

.lanes(this.curBp == 'lg' ? 2 : 1)

WaterFlow:columnsTemplate接口来设置列数,示例:lg断点下设置为两列,其它场景显示为1列

.columnsTemplate(this.curBp ==
'lg' ? "1fr 1fr 1fr 1fr " : "1fr")

Swipe:displayCount来设置显示列数,示例:lg断点下显示2列,其它场景显示1

.displayCount (this.curBp == 'lg' ? 3 : 1)

Grid:columnsTemplate接口来设置列数,示例:lg断点下设置为两列,其它场景显示为1列

.columnsTemplate(this.curBp == 'lg' ?
"1fr 1fr 1fr 1fr " : "1fr")
左右布局的适配

栅格布局

GridRow {
GridCol { span: { sm: 12, md: 12, lg: 4 }, offset: 0, order: 1 } { //左侧视图 }
GridCol { span: { sm: 12, md: 12, lg: 8 }, offset: 0, order: 2 } { //右侧视图 }
}

横向布局,Lg断点下增加可复用的冗余布局来实现

Row {
Row() { //左侧视图
}.width(this.curBp == 'lg' ? '70%' : '100%')
Row() { //右侧视图
}.width(this.curBp == 'lg' ? '30%' : '0')
}
分栏布局的适配

通过使用Navigation和SidebarContainer来实现分栏布局,通过Navigation的模式:Stack和Split

最佳实践效果

效果图

猜你喜欢

转载自blog.csdn.net/f917386389/article/details/143417049