【HarmonyOS学习日志（9）】一次开发，多端部署之界面级一多开发

关于一次开发，多端部署

一次开发多端部署就是指一套代码工程，一次开发上架，多端按需部署（一多），用于支撑开发者快速高效地开发多终端设备上的应用，以节省开发成本。

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

最明显的表现就是实现不同比例屏幕的组件布局情况。

如图所示，同一套组件在不同比例屏幕上所呈现的布局不同。

除去由屏幕不同形成的布局适配问题之外，还有因不同设备系统形成的功能兼容问题。并且还要考虑在代码层面的组织实现。

在学习过程中，有如下解决思路

界面级一多开发

布局能力

自适应布局（Adaptive Layout）

元素可以根据相对关系自动变化以适应外部容器变化的布局能力。当前开发框架提炼了七种自适应布局能力，这些布局可以独立使用，也可多种布局叠加使用。

七种自适应布局能力：

• 拉伸能力：容器组件尺寸发生变化时，增加或减小的空间全部分配给容器组件内指定区域。

• 实现方式：Flex布局的flexGrow和flexShrink属性。

• 

• 均分能力：容器组件尺寸发生变化时，增加或减小的空间均匀分配给容器组件内所有空白区域。

• 实现方式：Row组件，Column组件或Flex组件的justifyContent属性设置为FlexAlign.SpaceEvenly。

• 

• 占比能力：子组件的宽或高按照预设的比例，随容器组件发生变化。

• 实现方式：将子组件的宽高比设置为父组件宽高的百分比或者layoutWeight属性。

• 

• 缩放能力：子组件的宽高按照预设的比例，随容器组件发生变化，且变化过程中子组件的宽高比不变。

• 实现方式：布局约束的aspectRatio属性。

• 

• 延伸能力：容器组件内的子组件，按照其在列表中的先后顺序，随容器组件尺寸变化显示或隐藏。

  实现方式：基于容器组件的两种实现方式：

  • 通过List组件实现

  • 通过Scroll组件配合Row组件或Column组件实现

  • 

• 隐藏能力：容器组件内的子组件，按照其预设的显示优先级，随容器组件尺寸变化显示或隐藏。相同显示优先级的子组件同时显示或隐藏。

• 实现方式：布局约束的displayPriority属性。

• 

• 拆行能力：容器组件尺寸发生变化时，如果布局方向尺寸不足以显示完整内容，自动换行。

• 实现方式：Flex组件的wrap属性设置为FlexWrap.Wrap。

• 

响应式布局（Responsive Layout）

元素可以根据特定的特征（如窗口宽度、屏幕方向等）出发变化以适应外部容器变化的布局能力。响应式布局基于断点、媒体查询、栅格等能力实现。

断点和媒体查询

断点：将窗口宽度划分为不同的范围（即断点），监听窗口尺寸变化，当断点改变时同步调整页面布局。注意，断点支持自定义，取值范围可修改扩展，下表是常用的4个断点范围。

媒体查询：媒体查询提供了丰富的媒体特征监听能力，可以监听应用显示区域变化，横竖屏，深浅色，设备类型等等。

栅格布局

根据设备的水平宽度，将不同的屏幕尺寸划分为不同数量的栅格，来实现屏幕的自适应。且栅格和栅格之间可以设置一个间距。

• 可以调节布局占栅格的数量（设置参数span）、偏移量（设置参数offset），来实现栅格的适配。

• 可以修改断点的取值范围，支持启用最多6个断点（设置breakpoints的value参数）。

栅格组件应用场景

• 缩进布局：

  • 通过设置GridCol的span属性分配组件所占栅格列数

  • 通过设置GridCol的offset、GridRow的gutter等属性改变间距，实现最佳效果。

• 挪移布局：通过设置GridCol的span属性分配组件所占栅格列数。

• 重复布局：通过设置GridCol的span属性分配组件所占栅格列数。

视觉风格

分层参数

为了保证各组件有相同风格的默认样式，或者为了保证HarmonyOS系统应用有统一的风格。UX定义了一套系统资源，预置在系统中，开发者可以直接使用，称为分层参数。

@Entry
@Component
struck Index {build() {Row() {Column() {Text('分层参数').fontColor($r('sys.color.ohos_id_color_primary')).fontSize($r('sys.float.ohos_id_text_size_headline3'))}}.backgroundColor($r('sys.color.ohos_id_color_background'))}
}

 使用了分层参数后，当系统切换深色模式时，字体和背景也可以自适应。

自定义资源

开发者可以在resource目录中通过限定词目录来定义不同设备状态的资源，资源可以按照"key-value"的形式自定义。应用在运行态选择使用某资源时，系统会根据设备状态优先从相匹配的目录中寻找资源。

交互归一

对于不同类型的智能设备，用户可能有不同的交互方式，如通过触摸屏、鼠标、触控板等。针对不同来自不同输入设备的相同输入，通过交互归一提供给开发者统一的API。交互归一后开发者无需关注当前设备和输入设备类型，只需在交互归一事件接口中做逻辑响应即可。

缩放

以缩放交互为例，通过多指触控的张合来完成缩放动作，在多设备场景下，缩放交互会出现多种不同的操作输入方式，如表所示。在开发接口上，这些缩放操作都统一为PinchGesture的API事件

Image()
.scale({ x: this.scaleValue, y: this.scaleValue, z: 1 })
.gesture(//双指捏合触发该手势事件PinchGesture({ fingers: 2 }).onActionStart((event?: GestureEvent)=>{}).onActionUpdate((event?: GestureEvent)=>{this.scaleValue = this.pinchValue * event.scale}).onActionEnd(()=>{this.pinchValue = this.scaleValue})
)

组件归一响应

当应用部署在不同设备上供用户使用时，需要支持多种I/O设备，界面呈现出相应的状态为用户提供正确的视觉引导。例如触摸时显示按压状态，鼠标特有的悬停状态，键盘走焦状态。