HarmonyOS 鸿蒙Next多端适配开发

HamonyOs 系统面向多终端提供了"一次开发，多端部署的能力，让开发者可以基于一种设计，高效构建多端可运行的应用。

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

在 HarmonyOS NEXT 上如何实现

断点区分

鸿蒙中断点是让开发者可以结合窗口宽度与高度两个维度去适配 Harmony0s 的 1+8 设备，解决多设备 UX 布局问题。通过该方法，开发者无需关注设备类型，即可达到多设备的自适应 U1 布局效果。

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

分析当前所有设备高宽比，可以将设备按照 0.8 以及 1.2 两个阈值分成 3 个区间:

官方把多设备的标准如下:

折叠屏折叠态和手机在竖立时横向断点是 ‘sm’、纵向断点是 'g’，在横屏时横向断点是 ‘md’、纵向断点是 'sm’。

折叠屏展开态横竖向的横纵断点都为 ‘md’。

平板横向的横纵断点分别是 "1g’ 和 ‘sm’，在竖向的横纵断点为 "|g’ 和 'g’。

2in1 横向的横纵断点分别是’ x’ 和 'sm’。

设备区分

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

判断直板机

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

判断 PAD

deviceInfo.deviceType == 'tablet'

判断 2in1

deviceInfo.deviceType == '2in1

应用窗口的适配

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

Tabs 的适配

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

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

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

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

容器 组件只的适配

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

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

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

.columnsTemplate(this.curBp ='lg'? "1fr 1fr 1fr 1fr"2"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 }{ // 右侧视图}

分栏布局的适配

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

常见的为手机仅支持单栏显示，折叠屏可以支持单双栏显示，平板支持三栏显示。

单双栏通常是使用 Navigation 实现的，Navigation 是路由容器组件，一般作为首页的根容器，包括单栏 (Stack)、分栏 (Splt) 和自适应 (Auto9) 三种显示模式。自适应模式下，当页面宽度大于等于一定阈值时， Navigation 组件采用分栏模式，反之采用单栏模式。