需要解决:
- 不同设备之间的UI(屏幕尺寸、色彩风格)如何适配
- 不同设备之间的系统能力如何适配(功能如何兼容)
页面开发适配:
1.自适应布局:
方舟开发框架(ArkUI)提炼了七种自适应布局能力
能力类别 | 使用场景 | 实现方式 |
拉伸能力 | 容器组件尺寸发生变化时,增加或减小的空间全部分配给容器组件内指定区域 | Flex布局的flexGrow和flexShrink属性 |
均分能力 | 容器组件尺寸发生变化时,增加或减小的空间均匀分配给容器组件内所有空白区域 | Row组件、Column组件或Flex组件的justifyContent属性设置为FlexAlign.SpaceEvenly |
占比能力 | 子组件的宽或高按照预设的比例,随容器组件发生变化 | 基于通用属性的两种实现方式:
|
缩放能力 | 子组件的宽高按照预设的比例,随容器组件发生变化,且变化过程中子组件的宽高比不变 | 布局约束的aspectRatio属性 |
延伸能力 | 容器组件内的子组件,按照其在列表中的先后顺序,随容器组件尺寸变化显示或隐藏 | 基于容器组件的两种实现方式: |
隐藏能力 | 容器组件内的子组件,按照其预设的显示优先级,随容器组件尺寸变化显示或隐藏。相同显示优先级的子组件同时显示或隐藏 | 布局约束的displayPriority属性 |
折行能力 | 容器组件尺寸发生变化时,如果布局方向尺寸不足以显示完整内容,自动换行 | Flex组件的wrap属性设置为FlexWrap.Wrap |
2.响应式布局:
自适应布局可以保证窗口在一定范围内变化时,页面显示是正常的,但是如果窗口尺寸变化比较大的时候,仅依赖自适应布局有可能出现图片异常放大或者页面内容稀疏、留白过多等问题,此时就需要结合响应式布局调整页面结构。
响应式布局能力 | 简介 |
断点 | 将窗口宽度划分为不同的范围(即断点),监听窗口尺寸变化,当断点改变时同步调整页面布局。 |
媒体查询 | 媒体查询支持监听窗口宽度、横竖屏、深浅色、设备类型等多种媒体特征,当媒体特征发生改变时同步调整页面布局。 |
栅格布局 | 栅格组件将其所在的区域划分为有规律的多列,通过调整不同断点下的栅格组件的参数以及其子组件占据的列数等,实现不同的布局效果。 |
系统能力适配(了解):
系统能力(即SystemCapability,缩写为SysCap)指操作系统中每一个相对独立的特性,如蓝牙,WIFI,NFC,摄像头等,都是系统能力之一。每个系统能力对应多个API,随着目标设备是否支持该系统能力共同存在或消失。
工程代码结构:三层工程架构:
common(公共能力层):用于存放公共基础能力集合(如工具库、公共配置等)。
common层可编译成一个或多个HAR包或HSP包
(HAR中的代码和资源跟随使用方编译,如果有多个使用方,它们的编译产物中会存在多份相同拷贝;而HSP中的代码和资源可以独立编译,运行时在一个进程中代码也只会存在一份),其只可以被products和features依赖,不可以反向依赖。
features(基础特性层):用于存放基础特性集合(如应用中相对独立的各个功能的UI及业务逻辑实现等)。
各个feature高内聚、低耦合、可定制,供产品灵活部署。不需要单独部署的feature通常编译为HAR包或HSP包,供products或其它feature使用,但是不能反向依赖products层。需要单独部署的feature通常编译为Feature类型的HAP包,和products下Entry类型的HAP包进行组合部署。features层可以横向调用及依赖common层。
products(产品定制层):用于针对不同设备形态进行功能和特性集成。
products层各个子目录各自编译为一个Entry类型的HAP包,作为应用主入口。products层不可以横向调用。
- common设计为har包,新建module时选择
Static Library
, 内部存放全局通用的工具函数,公共配置等 - feature设计为har包,新建module时选择
Static Library
, 内部存放相对独立的业务单元,比如我的
、分类
也就是首页底部Tab切换时的核心业务模块 - product为产品层,里面放置phone模块,也就是入口模块,在phone中我们放置入口ability和所有页面级别的组件
Module分为“Ability”和“Library”两种类型: