提交 0325ed0a 编写于 作者: Z zengyawen

update docs

Signed-off-by: Nzengyawen <zengyawen1@huawei.com>
上级 5e40cd0f
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
设备类型分为default(默认设备)、tablet、tv、wearable等,有多种查询设备类型的方式。 设备类型分为default(默认设备)、tablet、tv、wearable等,有多种查询设备类型的方式。
1. 通过命令行的方式查询设备类型。 1. 通过命令行的方式查询设备类型。
通过命令行查询指定系统参数(const.build.characteristics)进而确定设备类型,详见[系统参数介绍](https://gitee.com/openharmony/docs/blob/master/zh-cn/device-dev/subsystems/subsys-boot-init-sysparam.md) 通过命令行查询指定系统参数(const.build.characteristics)进而确定设备类型,详见[系统参数介绍](../../../device-dev/subsystems/subsys-boot-init-sysparam.md)
```shell ```shell
......
# 工程管理 # 工程管理
DevEco Studio的基本使用,请参考[DevEco Studio使用指南](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/deveco-studio-user-guide-for-openharmony.md)。本章主要介绍如何使用DevEco Studio进行多设备应用开发。 DevEco Studio的基本使用,请参考[DevEco Studio使用指南](../../quick-start/deveco-studio-user-guide-for-openharmony.md)。本章主要介绍如何使用DevEco Studio进行多设备应用开发。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
...@@ -75,7 +75,7 @@ DevEco Studio的基本使用,请参考[DevEco Studio使用指南](https://gite ...@@ -75,7 +75,7 @@ DevEco Studio的基本使用,请参考[DevEco Studio使用指南](https://gite
### 修改Module类型及其设备类型 ### 修改Module类型及其设备类型
通过修改每个模块中的配置文件(module.json5)对模块进行配置,配置文件中各字段含义详见[配置文件说明](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/stage-structure.md) 通过修改每个模块中的配置文件(module.json5)对模块进行配置,配置文件中各字段含义详见[配置文件说明](../../quick-start/stage-structure.md)
- 将default模块的deviceTypes配置为["phone", "tablet"],同时将其type字段配置为entry。 - 将default模块的deviceTypes配置为["phone", "tablet"],同时将其type字段配置为entry。
即default模块编译出的hap包在默认设备和平板上安装和运行。 即default模块编译出的hap包在默认设备和平板上安装和运行。
......
...@@ -14,13 +14,13 @@ ...@@ -14,13 +14,13 @@
| 输入 | 开发接口 | 触控屏 | 鼠标 | 触控板 | | 输入 | 开发接口 | 触控屏 | 鼠标 | 触控板 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| 点击 | [onClick](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md) | √ | √ | √ | | 点击 | [onClick](../../reference/arkui-ts/ts-universal-events-click.md) | √ | √ | √ |
| 长按 | [LongPressGesture](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md) | √ | √ | × | | 长按 | [LongPressGesture](../../reference/arkui-ts/ts-basic-gestures-longpressgesture.md) | √ | √ | × |
| 双击 | [TapGesture](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md) | √ | √ | √ | | 双击 | [TapGesture](../../reference/arkui-ts/ts-basic-gestures-tapgesture.md) | √ | √ | √ |
| 轻扫 | [SwipeGesture](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md) | √ | √ | √ | | 轻扫 | [SwipeGesture](../../reference/arkui-ts/ts-basic-gestures-swipegesture.md) | √ | √ | √ |
| 滚动及平移 | [PanGesture](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md) | √ | √ | √ | | 滚动及平移 | [PanGesture](../../reference/arkui-ts/ts-basic-gestures-pangesture.md) | √ | √ | √ |
| 缩放 | [PinchGesture](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md) | √ | √ | √ | | 缩放 | [PinchGesture](../../reference/arkui-ts/ts-basic-gestures-pinchgesture.md) | √ | √ | √ |
| 旋转 | [RotationGesture](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md) | √ | NA | √ | | 旋转 | [RotationGesture](../../reference/arkui-ts/ts-basic-gestures-rotationgesture.md) | √ | NA | √ |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> - 点击事件(onClick)其实是点击手势(TapGesture)的一个特殊场景(单指单次点击)。该场景使用的非常广泛,为了方便开发者使用及符合传统开发习惯,所以专门提供了开发接口。 > - 点击事件(onClick)其实是点击手势(TapGesture)的一个特殊场景(单指单次点击)。该场景使用的非常广泛,为了方便开发者使用及符合传统开发习惯,所以专门提供了开发接口。
......
# 界面布局
- **[概述](interface-layout-design-intro.md)**
- **[布局基础](layout-design-basics.md)**
- **[布局基础运用案例](design-layout-cases.md)**
\ No newline at end of file
...@@ -50,7 +50,7 @@ HAP包是OpenHarmony的安装包,一个HAP在工程目录中对应一个Module ...@@ -50,7 +50,7 @@ HAP包是OpenHarmony的安装包,一个HAP在工程目录中对应一个Module
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> - Module是开发者开发的相对独立的功能模块,由代码、资源、第三方库及应用配置文件组成,属于IDE开发视图的概念。Module分为entry、feature及har三种类型,相应的可以编译生成entry类型的HAP包、feature类型的HAP包,以及har包。 > - Module是开发者开发的相对独立的功能模块,由代码、资源、第三方库及应用配置文件组成,属于IDE开发视图的概念。Module分为entry、feature及har三种类型,相应的可以编译生成entry类型的HAP包、feature类型的HAP包,以及har包。
> >
> - 如果需要了解应用程序包结构更多详情,可以查看[包结构说明](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/package-structure.md)。 > - 如果需要了解应用程序包结构更多详情,可以查看[包结构说明](../../quick-start/package-structure.md)。
### 方舟开发框架 ### 方舟开发框架
...@@ -73,7 +73,7 @@ OpenHarmony提供了方舟开发框架(简称:ArkUI),提供开发者进 ...@@ -73,7 +73,7 @@ OpenHarmony提供了方舟开发框架(简称:ArkUI),提供开发者进
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> - 声明式开发范式占用内存更少,**更推荐开发者选用声明式开发范式来搭建应用UI界面**。 > - 声明式开发范式占用内存更少,**更推荐开发者选用声明式开发范式来搭建应用UI界面**。
> >
> - 可以查看[方舟开发框架概述](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkui-overview.md),了解方舟开发框架更多详情。 > - 可以查看[方舟开发框架概述](../../ui/arkui-overview.md),了解方舟开发框架更多详情。
### 部署模型 ### 部署模型
......
# 布局基础
- **[栅格系统](design-grid.md)**
- **[自适应布局](design-adaptive-layout.md)**
- **[响应式布局](design-responsive-layout.md)**
\ No newline at end of file
...@@ -13,11 +13,11 @@ ...@@ -13,11 +13,11 @@
自适应布局和响应式布局常常需要借助容器类组件实现,或与容器类组件搭配使用。 自适应布局和响应式布局常常需要借助容器类组件实现,或与容器类组件搭配使用。
- 自适应布局常常需要借助[Row组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md)[Column组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md)[Flex组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md)实现。 - 自适应布局常常需要借助[Row组件](../../reference/arkui-ts/ts-container-row.md)[Column组件](../../reference/arkui-ts/ts-container-column.md)[Flex组件](../../reference/arkui-ts/ts-container-flex.md)实现。
![image-20220922185907892](figures/image-20220922185907892.png) ![image-20220922185907892](figures/image-20220922185907892.png)
- 响应式布局常常与[GridRow组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-gridrow.md)[Grid组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md)[List组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md)[Swiper组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md)[Tabs组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md)搭配使用。 - 响应式布局常常与[GridRow组件](../../reference/arkui-ts/ts-container-gridrow.md)[Grid组件](../../reference/arkui-ts/ts-container-grid.md)[List组件](../../reference/arkui-ts/ts-container-list.md)[Swiper组件](../../reference/arkui-ts/ts-container-swiper.md)[Tabs组件](../../reference/arkui-ts/ts-container-tabs.md)搭配使用。
![image-20220922190217247](figures/image-20220922190217247.png) ![image-20220922190217247](figures/image-20220922190217247.png)
......
# 布局能力
- **[布局简介](layout-intro.md)**
- **[自适应布局](adaptive-layout.md)**
- **[响应式布局](responsive-layout.md)**
- **[典型布局场景](typical-layout-scenario.md)**
- **[典型页面场景](typical-page-layout.md)**
\ No newline at end of file
# 人机交互
- **[交互基础](interaction-basics.md)**
- **[常见输入方式](common-input-modes.md)**
- **[交互事件归一](design-interaction-event-normalization.md)**
\ No newline at end of file
...@@ -19,6 +19,6 @@ ...@@ -19,6 +19,6 @@
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> - 开发多设备上同一页面时,建议开发者多使用[自定义组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/ts-component-based-component.md),既可以增加代码的可读性和可维护性,同时也可以尽可能的实现代码复用。 > - 开发多设备上同一页面时,建议开发者多使用[自定义组件](../../ui/ts-component-based-component.md),既可以增加代码的可读性和可维护性,同时也可以尽可能的实现代码复用。
> >
> - 本章中涉及的示例代码均可以在[OpenHarmony应用示例](https://gitee.com/openharmony/applications_app_samples/tree/master/MultiDeviceAppDev)中获取,感兴趣的开发者可以自行下载、运行及查看效果。 > - 本章中涉及的示例代码均可以在[OpenHarmony应用示例](https://gitee.com/openharmony/applications_app_samples/tree/master/MultiDeviceAppDev)中获取,感兴趣的开发者可以自行下载、运行及查看效果。
# 页面开发的一多能力介绍
- **[简介](page-development-intro.md)**
- **[布局能力](layout.md)**
- **[交互归一](interaction-event-normalization.md)**
- **[多态组件](polymorphic-controls.md)**
- **[资源使用](resource-usage.md)**
\ No newline at end of file
...@@ -35,11 +35,11 @@ resources ...@@ -35,11 +35,11 @@ resources
base目录默认存在,而限定词目录需要开发者自行创建,其名称可以由一个或多个表征应用场景或设备特征的限定词组合而成。应用使用某资源时,系统会根据当前设备状态优先从相匹配的限定词目录中寻找该资源。只有当resources目录中没有与设备状态匹配的限定词目录,或者在限定词目录中找不到该资源时,才会去base目录中查找。rawfile是原始文件目录,它不会根据设备状态去匹配不同的资源,故不在本文的讨论范文内。 base目录默认存在,而限定词目录需要开发者自行创建,其名称可以由一个或多个表征应用场景或设备特征的限定词组合而成。应用使用某资源时,系统会根据当前设备状态优先从相匹配的限定词目录中寻找该资源。只有当resources目录中没有与设备状态匹配的限定词目录,或者在限定词目录中找不到该资源时,才会去base目录中查找。rawfile是原始文件目录,它不会根据设备状态去匹配不同的资源,故不在本文的讨论范文内。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> - 请访问[声明式开发范式资源文件分类](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/ui-ts-basic-resource-file-categories.md),了解限定词目录的命名规则、创建流程、匹配规则等,本文不展开介绍。 > - 请访问[声明式开发范式资源文件分类](../../ui/ui-ts-basic-resource-file-categories.md),了解限定词目录的命名规则、创建流程、匹配规则等,本文不展开介绍。
> >
> - 没有设备状态匹配的限定词目录,或者在限定词目录中找不到目标资源时,会继续在base目录中查找。**强烈建议对于所有应用自定义资源都在base目录中定义默认值**,防止出现找不到资源值的异常场景。 > - 没有设备状态匹配的限定词目录,或者在限定词目录中找不到目标资源时,会继续在base目录中查找。**强烈建议对于所有应用自定义资源都在base目录中定义默认值**,防止出现找不到资源值的异常场景。
> >
> - 类Web开发范式的资源文件路径及资源限定词的使用与声明式范式不同,详情请参考[类Web开发范式资源限定与访问](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/js-framework-resource-restriction.md)及[类Web开发范式文件组织](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/js-framework-file.md)。 > - 类Web开发范式的资源文件路径及资源限定词的使用与声明式范式不同,详情请参考[类Web开发范式资源限定与访问](../../ui/js-framework-resource-restriction.md)及[类Web开发范式文件组织](../../ui/js-framework-file.md)。
base目录与限定词目录下面可以创建资源组目录(包括element、media等),用于存放特定类型的资源文件。 base目录与限定词目录下面可以创建资源组目录(包括element、media等),用于存放特定类型的资源文件。
...@@ -73,7 +73,7 @@ base目录与限定词目录下面可以创建资源组目录(包括element、 ...@@ -73,7 +73,7 @@ base目录与限定词目录下面可以创建资源组目录(包括element、
在工程中,通过 "$r('app.type.name')" 的形式引用应用资源。app代表是应用内resources目录中定义的资源;type 代表资源类型(或资源的存放位置),可以取 color、float、string、plural和media,name代表资源命名,由开发者添加资源时确定。 在工程中,通过 "$r('app.type.name')" 的形式引用应用资源。app代表是应用内resources目录中定义的资源;type 代表资源类型(或资源的存放位置),可以取 color、float、string、plural和media,name代表资源命名,由开发者添加资源时确定。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 可以查看[声明式范式访问应用资源](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/ts-resource-access.md),了解资源访问的更多细节。 > 可以查看[声明式范式访问应用资源](../../ui/ts-resource-access.md),了解资源访问的更多细节。
### 示例 ### 示例
......
...@@ -45,7 +45,7 @@ OpenHarmony提供了多种方法,判断应用当前处于何种断点,进而 ...@@ -45,7 +45,7 @@ OpenHarmony提供了多种方法,判断应用当前处于何种断点,进而
通过窗口对象监听断点变化的核心是获取窗口对象及注册窗口尺寸变化的回调函数。 通过窗口对象监听断点变化的核心是获取窗口对象及注册窗口尺寸变化的回调函数。
1. 在Ability的[onWindowStageCreate](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/ability/stage-ability.md)生命周期回调中,获取并记录[窗口](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-window.md)对象。 1. 在Ability的[onWindowStageCreate](../../ability/stage-ability.md)生命周期回调中,获取并记录[窗口](../../reference/apis/js-apis-window.md)对象。
``` ```
// MainAbility.ts // MainAbility.ts
...@@ -126,11 +126,11 @@ OpenHarmony提供了多种方法,判断应用当前处于何种断点,进而 ...@@ -126,11 +126,11 @@ OpenHarmony提供了多种方法,判断应用当前处于何种断点,进而
在实际应用开发过程中,开发者常常需要针对不同类型设备或同一类型设备的不同状态来修改应用的样式。媒体查询提供了丰富的媒体特征监听能力,可以监听应用显示区域变化、横竖屏、深浅色、设备类型等等,因此在应用开发过程中使用的非常广泛。 在实际应用开发过程中,开发者常常需要针对不同类型设备或同一类型设备的不同状态来修改应用的样式。媒体查询提供了丰富的媒体特征监听能力,可以监听应用显示区域变化、横竖屏、深浅色、设备类型等等,因此在应用开发过程中使用的非常广泛。
本小节仅介绍**媒体查询跟断点的结合**,即如何借助媒体查询能力,监听断点的变化,读者可以自行查阅官网中关于[媒体查询](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md)的相关介绍了解更详细的用法。 本小节仅介绍**媒体查询跟断点的结合**,即如何借助媒体查询能力,监听断点的变化,读者可以自行查阅官网中关于[媒体查询](../../ui/ui-ts-layout-mediaquery.md)的相关介绍了解更详细的用法。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 类Web开发范式,支持在js文件和css文件中使用媒体查询,请查看[js媒体查询](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-mediaquery.md)和[css媒体查询](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-js/js-components-common-mediaquery.md)了解详细用法。 > 类Web开发范式,支持在js文件和css文件中使用媒体查询,请查看[js媒体查询](../../reference/apis/js-apis-mediaquery.md)和[css媒体查询](../../reference/arkui-js/js-components-common-mediaquery.md)了解详细用法。
**示例:** **示例:**
...@@ -280,7 +280,7 @@ struct MediaQuerySample { ...@@ -280,7 +280,7 @@ struct MediaQuerySample {
| ![zh-cn_image_0000001336486244](figures/zh-cn_image_0000001336486244.jpg) | ![zh-cn_image_0000001386646685](figures/zh-cn_image_0000001386646685.jpg) | | ![zh-cn_image_0000001336486244](figures/zh-cn_image_0000001336486244.jpg) | ![zh-cn_image_0000001386646685](figures/zh-cn_image_0000001386646685.jpg) |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> - ArkUI在API 9对栅格组件做了重构,推出了新的栅格组件[GridRow](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-gridrow.md)和[GridCol](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-gridcol.md),同时原有的[GridContainer组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-gridcontainer.md)及[栅格设置](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md)已经废弃。 > - ArkUI在API 9对栅格组件做了重构,推出了新的栅格组件[GridRow](../../reference/arkui-ts/ts-container-gridrow.md)和[GridCol](../../reference/arkui-ts/ts-container-gridcol.md),同时原有的[GridContainer组件](../../reference/arkui-ts/ts-container-gridcontainer.md)及[栅格设置](../../reference/arkui-ts/ts-universal-attributes-grid.md)已经废弃。
> >
> - 本文中提到的栅格组件,如无特别说明,都是指GridRow和GridCol组件。 > - 本文中提到的栅格组件,如无特别说明,都是指GridRow和GridCol组件。
...@@ -387,7 +387,7 @@ struct GridRowSample2 { ...@@ -387,7 +387,7 @@ struct GridRowSample2 {
栅格组件columns默认为12列,gutter默认为0,同时支持开发者根据实际需要定义不同断点下的columns数量以及gutter长度。特别的,在栅格组件实际使用过程中,常常会发生多个元素占据的列数相加超过总列数而折行的场景。栅格组件还允许开发者分别定义水平方向的gutter(相邻两列之间的间距)和垂直方向的gutter(折行时相邻两行之间的间距)。 栅格组件columns默认为12列,gutter默认为0,同时支持开发者根据实际需要定义不同断点下的columns数量以及gutter长度。特别的,在栅格组件实际使用过程中,常常会发生多个元素占据的列数相加超过总列数而折行的场景。栅格组件还允许开发者分别定义水平方向的gutter(相邻两列之间的间距)和垂直方向的gutter(折行时相邻两行之间的间距)。
考虑到[组件通用属性](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md)中已经有margin和padding,栅格组件不再单独提供额外的margin属性,直接使用通用属性即可。借助margin或者padding属性,均可以控制栅格组件与父容器左右边缘的距离,但是二者也存在一些差异: 考虑到[组件通用属性](../../reference/arkui-ts/ts-universal-attributes-size.md)中已经有margin和padding,栅格组件不再单独提供额外的margin属性,直接使用通用属性即可。借助margin或者padding属性,均可以控制栅格组件与父容器左右边缘的距离,但是二者也存在一些差异:
- margin区域在栅格组件的边界外,padding区域在栅格组件的边界内。 - margin区域在栅格组件的边界外,padding区域在栅格组件的边界内。
- 栅格组件的backgroundColor会影响padding区域,但不会影响margin区域。 - 栅格组件的backgroundColor会影响padding区域,但不会影响margin区域。
......
...@@ -34,9 +34,9 @@ ...@@ -34,9 +34,9 @@
**实现方案** **实现方案**
不同断点下,页签在页面中的位置及尺寸都有差异,可以结合响应式布局能力,设置不同断点下[Tab组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md)的barPosition、vertical、barWidth和barHeight属性实现目标效果。 不同断点下,页签在页面中的位置及尺寸都有差异,可以结合响应式布局能力,设置不同断点下[Tab组件](../../reference/arkui-ts/ts-container-tabs.md)的barPosition、vertical、barWidth和barHeight属性实现目标效果。
另外,页签栏中的文字和图片的相对位置不同,同样可以通过设置不同断点下[tabBar](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md#%E5%B1%9E%E6%80%A7)对应的CustomBuilder中的布局方向,实现目标效果。 另外,页签栏中的文字和图片的相对位置不同,同样可以通过设置不同断点下[tabBar](../../reference/arkui-ts/ts-container-tabcontent.md#%E5%B1%9E%E6%80%A7)对应的CustomBuilder中的布局方向,实现目标效果。
**参考代码** **参考代码**
...@@ -144,7 +144,7 @@ struct Home { ...@@ -144,7 +144,7 @@ struct Home {
**实现方案** **实现方案**
运营横幅通常使用[Swiper组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md)实现。不同断点下,运营横幅中展示的图片数量不同。只需要结合响应式布局,配置不同断点下Swiper组件的displayCount属性,即可实现目标效果。 运营横幅通常使用[Swiper组件](../../reference/arkui-ts/ts-container-swiper.md)实现。不同断点下,运营横幅中展示的图片数量不同。只需要结合响应式布局,配置不同断点下Swiper组件的displayCount属性,即可实现目标效果。
**参考代码** **参考代码**
...@@ -202,9 +202,9 @@ export default struct Banner { ...@@ -202,9 +202,9 @@ export default struct Banner {
**实现方案** **实现方案**
不同断点下,页面中图片的排布不同,此场景可以通过响应式布局能力结合[Grid组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md)实现,通过调整不同断点下的Grid组件的columnsTemplate属性即可实现目标效果。 不同断点下,页面中图片的排布不同,此场景可以通过响应式布局能力结合[Grid组件](../../reference/arkui-ts/ts-container-grid.md)实现,通过调整不同断点下的Grid组件的columnsTemplate属性即可实现目标效果。
另外,由于本例中各列的宽度相同,也可以通过响应式布局能力结合[List组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md)实现,通过调整不同断点下的List组件的lanes属性也可实现目标效果。 另外,由于本例中各列的宽度相同,也可以通过响应式布局能力结合[List组件](../../reference/arkui-ts/ts-container-list.md)实现,通过调整不同断点下的List组件的lanes属性也可实现目标效果。
**参考代码** **参考代码**
...@@ -341,7 +341,7 @@ struct MultiLaneList { ...@@ -341,7 +341,7 @@ struct MultiLaneList {
**实现方案** **实现方案**
侧边栏通常通过[SideBarContainer组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md)实现,结合响应式布局能力,在不同断点下为SiderBarConContainer组件的sideBarWidth、showControlButton等属性配置不同的值,即可实现目标效果。 侧边栏通常通过[SideBarContainer组件](../../reference/arkui-ts/ts-container-sidebarcontainer.md)实现,结合响应式布局能力,在不同断点下为SiderBarConContainer组件的sideBarWidth、showControlButton等属性配置不同的值,即可实现目标效果。
**参考代码** **参考代码**
...@@ -433,7 +433,7 @@ struct SideBarSample { ...@@ -433,7 +433,7 @@ struct SideBarSample {
**实现方案** **实现方案**
图片通常使用[Image组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md)展示,Image组件的objectFit属性默认为ImageFit.Cover,即保持宽高比进行缩小或者放大以使得图片两边都大于或等于显示边界。在大图浏览场景下,因屏幕与图片的宽高比可能有差异,常常会发生图片被截断的问题。此时只需将Image组件的objectFit属性设置为ImageFit.Contain,即保持宽高比进行缩小或者放大并使得图片完全显示在显示边界内,即可解决该问题。 图片通常使用[Image组件](../../reference/arkui-ts/ts-basic-components-image.md)展示,Image组件的objectFit属性默认为ImageFit.Cover,即保持宽高比进行缩小或者放大以使得图片两边都大于或等于显示边界。在大图浏览场景下,因屏幕与图片的宽高比可能有差异,常常会发生图片被截断的问题。此时只需将Image组件的objectFit属性设置为ImageFit.Contain,即保持宽高比进行缩小或者放大并使得图片完全显示在显示边界内,即可解决该问题。
**参考代码** **参考代码**
...@@ -609,7 +609,7 @@ export default struct Header { ...@@ -609,7 +609,7 @@ export default struct Header {
**实现方案** **实现方案**
借助[栅格组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-gridrow.md),控制待显示内容在不同的断点下占据不同的列数,即可实现不同设备上的缩进效果。另外还可以调整不同断点下栅格组件与两侧的间距,获得更好的显示效果。 借助[栅格组件](../../reference/arkui-ts/ts-container-gridrow.md),控制待显示内容在不同的断点下占据不同的列数,即可实现不同设备上的缩进效果。另外还可以调整不同断点下栅格组件与两侧的间距,获得更好的显示效果。
**参考代码** **参考代码**
......
# 典型页面场景
- **[应用市场首页](appgallery-home-page.md)**
- **[音乐专辑页](music-album-page.md)**
\ No newline at end of file
# 应用UX设计
- **[设计原则和要点](design-principles.md)**
- **[应用架构设计](architecture-design.md)**
- **[界面布局](interface-layout-design.md)**
- **[人机交互](man-machine-interaction.md)**
- **[视觉风格](visual-style.md)**
- **[多态控件](design-polymorphic-controls.md)**
- **[设计自检表](design-checklist.md)**
- **[设计交付](design-delivery.md)**
- **[资源](design-resources.md)**
\ No newline at end of file
# 视觉风格
- **[视觉基础](visual-basics.md)**
- **[色彩](visual-style-color.md)**
- **[字体](visual-style-font.md)**
- **[图标](visual-style-icon.md)**
\ No newline at end of file
# 开发参考 # 开发参考
- [Syscap列表](syscap-list.md)
- [组件参考(基于eTS的声明式开发范式)](arkui-ts/Readme-CN.md) - [组件参考(基于eTS的声明式开发范式)](arkui-ts/Readme-CN.md)
- [组件参考(兼容JS的类Web开发范式)](arkui-js/Readme-CN.md) - [组件参考(兼容JS的类Web开发范式)](arkui-js/Readme-CN.md)
- [JS服务卡片UI组件参考](js-service-widget-ui/Readme-CN.md) - [JS服务卡片UI组件参考](js-service-widget-ui/Readme-CN.md)
- [接口参考(JS及TS API)](apis/Readme-CN.md) - [接口参考(JS及TS API)](apis/Readme-CN.md)
- 接口参考(Native API) - 接口参考(Native API)
- [OpenHarmony Native API](native-apis/Readme-CN.md) - [OpenHarmony Native API](native-apis/Readme-CN.md)
- [Native API标准库](native-lib/Readme-CN.md) - [Native API标准库](native-lib/Readme-CN.md)
...@@ -49,6 +49,7 @@ ...@@ -49,6 +49,7 @@
- [@ohos.application.formInfo (FormInfo)](js-apis-formInfo.md) - [@ohos.application.formInfo (FormInfo)](js-apis-formInfo.md)
- [@ohos.application.formProvider (FormProvider)](js-apis-formprovider.md) - [@ohos.application.formProvider (FormProvider)](js-apis-formprovider.md)
- [@ohos.application.missionManager (missionManager)](js-apis-missionManager.md) - [@ohos.application.missionManager (missionManager)](js-apis-missionManager.md)
- [@ohos.application.quickFixManager (quickFixManager)](js-apis-application-quickFixManager.md)
- [@ohos.application.Want (Want)](js-apis-application-Want.md) - [@ohos.application.Want (Want)](js-apis-application-Want.md)
- [@ohos.continuation.continuationManager (ContinuationExtraParams)](js-apis-continuation-continuationExtraParams.md) - [@ohos.continuation.continuationManager (ContinuationExtraParams)](js-apis-continuation-continuationExtraParams.md)
- [@ohos.continuation.continuationManager (continuationManager)](js-apis-continuation-continuationManager.md) - [@ohos.continuation.continuationManager (continuationManager)](js-apis-continuation-continuationManager.md)
...@@ -60,6 +61,7 @@ ...@@ -60,6 +61,7 @@
- application/[ExtensionRunningInfo (ExtensionRunningInfo)](js-apis-extensionrunninginfo.md) - application/[ExtensionRunningInfo (ExtensionRunningInfo)](js-apis-extensionrunninginfo.md)
- application/[MissionSnapshot (MissionSnapshot)](js-apis-application-MissionSnapshot.md) - application/[MissionSnapshot (MissionSnapshot)](js-apis-application-MissionSnapshot.md)
- application/[ProcessRunningInfo (ProcessRunningInfo)](js-apis-processrunninginfo.md) - application/[ProcessRunningInfo (ProcessRunningInfo)](js-apis-processrunninginfo.md)
- application/[ProcessRunningInformation (ProcessRunningInformation)](js-apis-processrunninginformation.md)
- application/[shellCmdResult (ShellCmdResult)](js-apis-application-shellCmdResult.md) - application/[shellCmdResult (ShellCmdResult)](js-apis-application-shellCmdResult.md)
- continuation/[ContinuationResult (ContinuationResult)](js-apis-continuation-continuationResult.md) - continuation/[ContinuationResult (ContinuationResult)](js-apis-continuation-continuationResult.md)
- 公共事件与通知 - 公共事件与通知
...@@ -81,6 +83,7 @@ ...@@ -81,6 +83,7 @@
- bundle/[ApplicationInfo (ApplicationInfo)](js-apis-bundle-ApplicationInfo.md) - bundle/[ApplicationInfo (ApplicationInfo)](js-apis-bundle-ApplicationInfo.md)
- bundle/[BundleInfo (BundleInfo)](js-apis-bundle-BundleInfo.md) - bundle/[BundleInfo (BundleInfo)](js-apis-bundle-BundleInfo.md)
- bundle/[BundleInstaller (BundleInstaller)](js-apis-bundle-BundleInstaller.md) - bundle/[BundleInstaller (BundleInstaller)](js-apis-bundle-BundleInstaller.md)
- bundle/[BundleStatusCallback (BundleStatusCallback)](js-apis-Bundle-BundleStatusCallback.md)
- bundle/[CustomizeData (CustomizeData)](js-apis-bundle-CustomizeData.md) - bundle/[CustomizeData (CustomizeData)](js-apis-bundle-CustomizeData.md)
- bundle/[DispatchInfo (DispatchInfo)](js-apis-dispatchInfo.md) - bundle/[DispatchInfo (DispatchInfo)](js-apis-dispatchInfo.md)
- bundle/[ElementName (ElementName)](js-apis-bundle-ElementName.md) - bundle/[ElementName (ElementName)](js-apis-bundle-ElementName.md)
...@@ -199,6 +202,7 @@ ...@@ -199,6 +202,7 @@
- 系统基础能力 - 系统基础能力
- [@ohos.accessibility (辅助功能)](js-apis-accessibility.md) - [@ohos.accessibility (辅助功能)](js-apis-accessibility.md)
- [@ohos.accessibility.config (系统辅助功能配置)](js-apis-accessibility-config.md)
- [@ohos.faultLogger (故障日志获取)](js-apis-faultLogger.md) - [@ohos.faultLogger (故障日志获取)](js-apis-faultLogger.md)
- [@ohos.hiAppEvent (应用打点)](js-apis-hiappevent.md) - [@ohos.hiAppEvent (应用打点)](js-apis-hiappevent.md)
- [@ohos.hichecker (检测模式)](js-apis-hichecker.md) - [@ohos.hichecker (检测模式)](js-apis-hichecker.md)
...@@ -231,6 +235,7 @@ ...@@ -231,6 +235,7 @@
- [@ohos.multimodalInput.keyCode (键值)](js-apis-keycode.md) - [@ohos.multimodalInput.keyCode (键值)](js-apis-keycode.md)
- [@ohos.multimodalInput.keyEvent (按键输入事件)](js-apis-keyevent.md) - [@ohos.multimodalInput.keyEvent (按键输入事件)](js-apis-keyevent.md)
- [@ohos.multimodalInput.mouseEvent (鼠标输入事件)](js-apis-mouseevent.md) - [@ohos.multimodalInput.mouseEvent (鼠标输入事件)](js-apis-mouseevent.md)
- [@ohos.multimodalInput.pointer (鼠标指针)](js-apis-pointer.md)
- [@ohos.multimodalInput.touchEvent (触摸输入事件)](js-apis-touchevent.md) - [@ohos.multimodalInput.touchEvent (触摸输入事件)](js-apis-touchevent.md)
- [@ohos.power (系统电源管理)](js-apis-power.md) - [@ohos.power (系统电源管理)](js-apis-power.md)
- [@ohos.runningLock (Runninglock锁)](js-apis-runninglock.md) - [@ohos.runningLock (Runninglock锁)](js-apis-runninglock.md)
...@@ -248,6 +253,7 @@ ...@@ -248,6 +253,7 @@
- [@ohos.account.osAccount (系统帐号管理)](js-apis-osAccount.md) - [@ohos.account.osAccount (系统帐号管理)](js-apis-osAccount.md)
- 语言基础类库 - 语言基础类库
- [@ohos.buffer (Buffer)](js-apis-buffer.md)
- [@ohos.convertxml (xml转换JavaScript)](js-apis-convertxml.md) - [@ohos.convertxml (xml转换JavaScript)](js-apis-convertxml.md)
- [@ohos.process (获取进程相关的信息)](js-apis-process.md) - [@ohos.process (获取进程相关的信息)](js-apis-process.md)
- [@ohos.uri (URI字符串解析)](js-apis-uri.md) - [@ohos.uri (URI字符串解析)](js-apis-uri.md)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册