From dbfbdc303d515fe71347af0d6d05be28773798b9 Mon Sep 17 00:00:00 2001 From: HelloCrease Date: Tue, 11 Apr 2023 19:55:09 +0800 Subject: [PATCH] update docs Signed-off-by: HelloCrease --- .../arkts-declarative-ui-description.md | 2 +- zh-cn/application-dev/quick-start/arkts-link.md | 1 + .../quick-start/arkts-observed-and-objectlink.md | 1 + .../arkts-other-state-mgmt-functions-overview.md | 4 ++-- .../quick-start/arkts-provide-and-consume.md | 5 +++-- .../arkts-rendering-control-ifelse.md | 3 ++- .../figures/zh-cn_image_0000001511900496.png | Bin 0 -> 6120 bytes .../figures/zh-cn_image_0000001563060749.png | Bin 0 -> 3774 bytes .../ui/arkts-layout-development-create-grid.md | 7 ++++--- .../ui/arkts-layout-development-create-list.md | 7 +++---- .../ui/arkts-ui-development-overview.md | 7 +++++++ 11 files changed, 24 insertions(+), 13 deletions(-) create mode 100644 zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001511900496.png create mode 100644 zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001563060749.png diff --git a/zh-cn/application-dev/quick-start/arkts-declarative-ui-description.md b/zh-cn/application-dev/quick-start/arkts-declarative-ui-description.md index d4ca2ea18b..f75f73a168 100644 --- a/zh-cn/application-dev/quick-start/arkts-declarative-ui-description.md +++ b/zh-cn/application-dev/quick-start/arkts-declarative-ui-description.md @@ -40,7 +40,7 @@ Column() { - Text组件的非必选参数content。 -- ```ts + ```ts // string类型的参数 Text('test') // $r形式引入应用资源，可应用于多语言场景 diff --git a/zh-cn/application-dev/quick-start/arkts-link.md b/zh-cn/application-dev/quick-start/arkts-link.md index 2f66fd1692..023deb552d 100644 --- a/zh-cn/application-dev/quick-start/arkts-link.md +++ b/zh-cn/application-dev/quick-start/arkts-link.md @@ -5,6 +5,7 @@ > **说明：** +> > 从API version 9开始，该装饰器支持在ArkTS卡片中使用。 diff --git a/zh-cn/application-dev/quick-start/arkts-observed-and-objectlink.md b/zh-cn/application-dev/quick-start/arkts-observed-and-objectlink.md index 417c45305c..fef50b05be 100644 --- a/zh-cn/application-dev/quick-start/arkts-observed-and-objectlink.md +++ b/zh-cn/application-dev/quick-start/arkts-observed-and-objectlink.md @@ -5,6 +5,7 @@ > **说明：** +> > 从API version 9开始，这两个装饰器支持在ArkTS卡片中使用。 diff --git a/zh-cn/application-dev/quick-start/arkts-other-state-mgmt-functions-overview.md b/zh-cn/application-dev/quick-start/arkts-other-state-mgmt-functions-overview.md index f47b542b64..58682627ce 100644 --- a/zh-cn/application-dev/quick-start/arkts-other-state-mgmt-functions-overview.md +++ b/zh-cn/application-dev/quick-start/arkts-other-state-mgmt-functions-overview.md @@ -4,6 +4,6 @@ 除了前面章节提到的组件状态管理和应用状态管理，ArkTS还提供了\@Watch和$$来为开发者提供更多功能： -- \@Watch用于监听状态变量的变化。 +- [\@Watch](arkts-watch.md)用于监听状态变量的变化。 -- $$运算符：给内置组件提供TS变量的引用，使得TS变量和内置组件的内部状态保持同步。 +- [$$运算符](arkts-two-way-sync.md)：给内置组件提供TS变量的引用，使得TS变量和内置组件的内部状态保持同步。 diff --git a/zh-cn/application-dev/quick-start/arkts-provide-and-consume.md b/zh-cn/application-dev/quick-start/arkts-provide-and-consume.md index f0b2f76a1b..7b5dff76c6 100644 --- a/zh-cn/application-dev/quick-start/arkts-provide-and-consume.md +++ b/zh-cn/application-dev/quick-start/arkts-provide-and-consume.md @@ -52,7 +52,7 @@ | -------------- | ---------------------------------------- | | 装饰器参数 | 别名：常量字符串，可选。
如果提供了别名，则必须有\@Provide的变量和其有相同的别名才可以匹配成功；否则，则需要变量名相同才能匹配成功。 | | 同步类型 | 双向：从\@Provide变量（具体请参见\@Provide）到所有\@Consume变量，以及相反的方向。双向同步操作与\@State和\@Link的组合相同。 | -| 允许装饰的变量类型 | Object、class、string、number、boolean、enum类型，以及这些类型的数组。嵌套类型的场景请参考[观察变化](#观察变化)。
不支持any，不允许使用undefined和null。
必须指定类型。\@Provide变量的\@Consume变量的类型必须相同。
**说明：**
- \@Consume装饰的变量，在其父节点或者祖先节点上，必须有对应的属性和别名的\@Provide装饰的变量。 | +| 允许装饰的变量类型 | Object、class、string、number、boolean、enum类型，以及这些类型的数组。嵌套类型的场景请参考[观察变化](#观察变化)。
不支持any，不允许使用undefined和null。
必须指定类型。\@Provide变量的\@Consume变量的类型必须相同。
**说明：**
\@Consume装饰的变量，在其父节点或者祖先节点上，必须有对应的属性和别名的\@Provide装饰的变量。 | | 被装饰变量的初始值 | 无，禁止本地初始化。 | @@ -112,7 +112,8 @@ 2. 通知\@Consume更新后，子组件所有依赖\@Consume的系统组件（elementId）都会被通知更新。以此实现\@Provide对\@Consume状态数据同步。 3. 当\@Consume装饰的数据变化时： - 1. 通过初始渲染的步骤可知，子组件\@Consume持有\@Provide的实例。在\@Consume更新后调用\@Provide的更新方法，将更新的数值同步回\@Provide，以此实现\@Consume向\@Provide的同步更新。 + + 通过初始渲染的步骤可知，子组件\@Consume持有\@Provide的实例。在\@Consume更新后调用\@Provide的更新方法，将更新的数值同步回\@Provide，以此实现\@Consume向\@Provide的同步更新。 ## 使用场景 diff --git a/zh-cn/application-dev/quick-start/arkts-rendering-control-ifelse.md b/zh-cn/application-dev/quick-start/arkts-rendering-control-ifelse.md index 5a9c98c279..67a2da23ce 100644 --- a/zh-cn/application-dev/quick-start/arkts-rendering-control-ifelse.md +++ b/zh-cn/application-dev/quick-start/arkts-rendering-control-ifelse.md @@ -123,7 +123,8 @@ struct MainView { CounterView（label为 'CounterView \#positive'）子组件在初次渲染时创建。此子组件携带名为counter的状态变量。当修改CounterView.counter状态变量时，CounterView（label为 'CounterView \#positive'）子组件重新渲染时并保留状态变量值。当MainView.toggle状态变量的值更改为false时，MainView父组件内的if语句将更新，随后将删除CounterView（label为 'CounterView \#positive'）子组件。与此同时，将创建新的CounterView（label为 'CounterView \#negative'）实例。而它自己的counter状态变量设置为初始值0。 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** +> > CounterView（label为 'CounterView \#positive'）和CounterView（label为 'CounterView \#negative'）是同一自定义组件的两个不同实例。if分支的更改，不会更新现有子组件，也不会保留状态。 以下示例展示了条件更改时，若需要保留counter值所做的修改。 diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001511900496.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001511900496.png new file mode 100644 index 0000000000000000000000000000000000000000..1231a0e0e693e1648c06b25898596bdc8546a3e0 GIT binary patch literal 6120 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 Rf!00EBTZe6;`>%1{{k+v!TJCI literal 0 HcmV?d00001 diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001563060749.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001563060749.png new file mode 100644 index 0000000000000000000000000000000000000000..a9b5769ad867f880dbe2b746b15de80cadbf799e GIT binary patch literal 3774 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 literal 0 HcmV?d00001 diff --git a/zh-cn/application-dev/ui/arkts-layout-development-create-grid.md b/zh-cn/application-dev/ui/arkts-layout-development-create-grid.md index 743acc8765..0525dec32a 100644 --- a/zh-cn/application-dev/ui/arkts-layout-development-create-grid.md +++ b/zh-cn/application-dev/ui/arkts-layout-development-create-grid.md @@ -140,7 +140,7 @@ Grid() { 网格布局采用二维布局的方式组织其内部元素，如下图所示。 - **图7** 通用办公服务   +**图7** 通用办公服务   ![zh-cn_image_0000001563060729](figures/zh-cn_image_0000001563060729.png) @@ -206,9 +206,10 @@ struct OfficeService { 在两个网格单元之间的网格横向间距称为行间距，网格纵向间距称为列间距，如下图所示。 - **图8** 网格的行列间距   +**图8** 网格的行列间距   ![zh-cn_image_0000001511580908](figures/zh-cn_image_0000001511580908.png) + 通过Grid的rowsGap和columnsGap可以设置网格布局的行列间距。在图5所示的计算器中，行间距为15vp，列间距为10vp。 @@ -225,7 +226,7 @@ Grid() { 可滚动的网格布局常用在文件管理、购物或视频列表等页面中，如下图所示。在设置Grid的行列数量与占比时，如果仅设置行、列数量与占比中的一个，即仅设置rowsTemplate或仅设置columnsTemplate属性，网格单元按照设置的方向排列，超出Grid显示区域后，Grid拥有可滚动能力。 - **图9** 横向可滚动网格布局 +**图9** 横向可滚动网格布局 ![zh-cn_image_0000001511740512](figures/zh-cn_image_0000001511740512.gif) diff --git a/zh-cn/application-dev/ui/arkts-layout-development-create-list.md b/zh-cn/application-dev/ui/arkts-layout-development-create-list.md index e3761f3817..220f06b6f8 100644 --- a/zh-cn/application-dev/ui/arkts-layout-development-create-list.md +++ b/zh-cn/application-dev/ui/arkts-layout-development-create-list.md @@ -516,7 +516,7 @@ Stack({ alignContent: Alignment.BottomEnd }) { 除了字母索引之外，滚动列表结合多级分类索引在应用开发过程中也很常见，例如购物应用的商品分类页面，多级分类也需要监听列表的滚动位置。 - **图14** 字母索引响应联系人列表滚动   +**图14** 字母索引响应联系人列表滚动   ![zh-cn_image_0000001563060769](figures/zh-cn_image_0000001563060769.gif) @@ -566,9 +566,10 @@ struct ContactsList { 侧滑菜单在许多应用中都很常见。例如，通讯类应用通常会给消息列表提供侧滑删除功能，即用户可以通过向左侧滑列表的某一项，再点击删除按钮删除消息，如下图所示。 - **图15** 侧滑删除列表项   +**图15** 侧滑删除列表项   ![zh-cn_image_0000001563060773](figures/zh-cn_image_0000001563060773.gif) + ListItem的swipeAction属性可用于实现列表项的左右滑动功能。swipeAction属性方法初始化时有必填参数SwipeActionOptions，其中，start参数表示设置列表项右滑时起始端滑出的组件，end参数表示设置列表项左滑时尾端滑出的组件。 在消息列表中，end参数表示设置ListItem左滑时尾端划出自定义组件，即删除按钮。在初始化end方法时，将滑动列表项的索引传入删除按钮组件，当用户点击删除按钮时，可以根据索引值来删除列表项对应的数据，从而实现侧滑删除功能。 @@ -838,5 +839,3 @@ List() { - [新闻数据加载](https://gitee.com/openharmony/codelabs/tree/master/NetworkManagement/NewsDataArkTS) - [音乐专辑页](../key-features/multi-device-app-dev/music-album-page.md) - -[../reference/arkui-ts/ts-container-listitem.md]: \ No newline at end of file diff --git a/zh-cn/application-dev/ui/arkts-ui-development-overview.md b/zh-cn/application-dev/ui/arkts-ui-development-overview.md index dd58416c25..92edc4d7d6 100644 --- a/zh-cn/application-dev/ui/arkts-ui-development-overview.md +++ b/zh-cn/application-dev/ui/arkts-ui-development-overview.md @@ -5,24 +5,31 @@ - **ArkTS** + ArkTS是UI开发语言，基于TypeScript（简称TS）语言扩展而来，是TS的超集。扩展能力包含各种装饰器、自定义组件、UI描述机制。状态数据管理作为基于ArkTS的声明式开发范式的特色，通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态，两者协作可以使开发者完整地构建整个应用的数据更新和UI渲染。ArkTS语言的基础知识请参考[学习ArkTS语言](../quick-start/arkts-get-started.md)。 - **布局** + 布局是UI的必要元素，它定义了组件在界面中的位置。ArkUI框架提供了多种布局方式，除了基础的线性布局、层叠布局、弹性布局、相对布局、栅格布局外，也提供了相对复杂的列表、宫格、轮播。 - **组件** + 组件是UI的必要元素，形成了在界面中的样子，由框架直接提供的称为**系统组件**，由开发者定义的称为**自定义组件**。系统内置组件包括按钮、单选框、进度条、文本等。开发者可以通过链式调用的方式设置系统内置组件的渲染效果。开发者可以将系统内置组件组合为自定义组件，通过这种方式将页面组件化为一个个独立的UI单元，实现页面不同单元的独立创建、开发和复用，具有更强的工程性。 - **页面路由和组件导航** + 应用可能包含多个页面，可通过页面路由实现页面间的跳转。一个页面内可能存在组件间的导航如典型的分栏，可通过导航组件实现组件间的导航。 - **图形** + 方舟开发框架提供了多种类型图片的显示能力和多种自定义绘制的能力，以满足开发者的自定义绘图需求，支持绘制形状、填充颜色、绘制文本、变形与裁剪、嵌入图片等。 - **动画** + 动画是UI的重要元素之一。优秀的动画设计能够极大地提升用户体验，框架提供了丰富的动画能力，除了组件内置动画效果外，还包括属性动画、显式动画、自定义转场动画以及动画API等，开发者可以通过封装的物理模型或者调用动画能力API来实现自定义动画轨迹。 - **交互事件** + 交互事件是UI和用户交互的必要元素。方舟开发框架提供了多种交互事件，除了触摸事件、鼠标事件、键盘按键事件、焦点事件等通用事件外，还包括基于通用事件进行进一步识别的手势事件。手势事件有单一手势如点击手势、长按手势、拖动手势、捏合手势、旋转手势、滑动手势，以及通过单一手势事件进行组合的组合手势事件。 -- GitLab