网站建设 工业 青岛,家庭网络如何做网站服务器,外贸网站源码去一品资源,outline免费服务器关于一次开发#xff0c;多端部署
一次开发多端部署就是指一套代码工程#xff0c;一次开发上架#xff0c;多端按需部署#xff08;一多#xff09;#xff0c;用于支撑开发者快速高效地开发多终端设备上的应用#xff0c;以节省开发成本。
HarmonyOS系统面向多终端多端部署
一次开发多端部署就是指一套代码工程一次开发上架多端按需部署一多用于支撑开发者快速高效地开发多终端设备上的应用以节省开发成本。
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设备界面呈现出相应的状态为用户提供正确的视觉引导。例如触摸时显示按压状态鼠标特有的悬停状态键盘走焦状态。
