鸿蒙一多是什么
HarmonyOS 系统面向多终端提供了“一次开发，多端部署”（后文中简称为“一多”）的能力，让开发者可以基于一种设计，高效构建多端可运行的应用。
一套代码工程，一次开发上架，多端按需部署。开发者靠着HarmonyOS底座支持需要一多适配，实现对不同设备兼容的同时，提供跨设备的流转、迁移和协同的分布式体验。
在HarmonyOS NEXT上如何实现
断点区分
断点是什么？
程序员在研发的过程中都会设置断点去debug，但是在这里的断点并不是调试的断点。鸿蒙中断点是让开发者可以结合窗口宽度与高度两个维度去适配HarmonyOS的1+8设备，解决多设备UX布局问题。通过该方法，开发者无需关注设备类型，即可达到多设备的自适应UI布局效果。
横向断点以应用窗口宽度为基准，按照320vp、600vp、840vp、1440vp四个阈值将断点分为了5个值：
| 窗口宽度 | 横向断点 |
|---|---|
| <320vp | xs |
| 320-600vp | sm |
| 600-840vp | md |
| 840-1440vp | lg |
| >1440vp | xl |
分析当前所有设备高宽比，可以将设备按照0.8以及1.2两个阈值分成3个区间：
| 高宽比 | 纵向断点 |
|---|---|
| <0.8 | sm |
| 0.8-1.2 | md |
| >1.2 | lg |
官方把多设备的标准如下：
折叠屏折叠态和手机在竖立时横向断点是’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中进行配置：不配置或者限制下最小窗口
Tabs的适配
以lg类型为例，设置以下3步即可
lg下barPosition必须是BarPosition.Start，lg下vertical必须是true，
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。
常见的为手机仅支持单栏显示，折叠屏可以支持单双栏显示，平板支持三栏显示。
单双栏通常是使用Navigation实现的，Navigation是路由容器组件，一般作为首页的根容器，包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显示模式。自适应模式下，当页面宽度大于等于一定阈值时，Navigation组件采用分栏模式，反之采用单栏模式。
开发者可以通过更改Navigation组件的mode值来实现单双栏的切换，如果断点为sm，则mode值为Stack。如果不为sm，则mode值为Split，即可实现单双栏的自适应切换。
Navigation组件实现了单双栏的效果。那么，在更大的屏幕宽度，要实现三分栏效果该如何实现呢？三分栏可以组合使用SideBarContainer与Navigation组件实现。SideBarContainer提供侧边栏可以显示和隐藏的侧边栏容器，通过子组件定义侧边栏和内容区，第一个子组件表示侧边栏，第二个子组件表示内容区。我们可以在内容区中加入Navigation组件，即可实现三分栏效果。
我们可以通过更改SideBarContainer组件的showSideBar值来控制是否显示侧边栏。如果断点为lg，则showSideBar值为true，默认显示侧边栏，反之，则为false，不显示。
SideBarContainer(SideBarContainerType.AUTO) {
// 导航栏
Column() {
MailSideBar()
}
.width('100%')
.height('100%')
.backgroundColor('#f1f3f5')
// 内容区
Column() {
Stack() {
MailNavigation()
// ...
}
}
.height('100%')
.width('100%')
}
.showSideBar(this.currentBreakPoint === 'lg')
结语
鸿蒙由于一多适配的新特性，使得开发者一次开发，只需要简单的做下布局适配，可以做到多端部署，例如除了直板机外、折叠屏、PAD、车机、2in1设备上，如果想在不同设备上做创新方面的开发只需要针对不同设备类型做相应的创建开发即可，如果同样的适配工作在移动端其他两端上开发并不是一时半会就可以处理的。
关注公众号：移动端开发的那些事
