diff --git a/zh-cn/application-dev/quick-start/Readme-CN.md b/zh-cn/application-dev/quick-start/Readme-CN.md index 602210211d93a30aed796024ad05a78666f86194..cb735638614a3c8715ffdecebf3b0d2c00635df0 100644 --- a/zh-cn/application-dev/quick-start/Readme-CN.md +++ b/zh-cn/application-dev/quick-start/Readme-CN.md @@ -45,19 +45,19 @@ - 自定义组件 - [创建自定义组件](arkts-create-custom-components.md) - [页面和自定义组件生命周期](arkts-page-custom-components-lifecycle.md) - - [\@Builder：自定义构建函数](arkts-builder.md) - - [\@BuilderParam：引用\@Builder函数](arkts-builderparam.md) - - [\@Styles：定义组件重用样式](arkts-style.md) - - [\@Extend：定义扩展组件样式](arkts-extend.md) + - [\@Builder装饰器：自定义构建函数](arkts-builder.md) + - [\@BuilderParam装饰器：引用\@Builder函数](arkts-builderparam.md) + - [\@Styles装饰器：定义组件重用样式](arkts-style.md) + - [\@Extend装饰器：定义扩展组件样式](arkts-extend.md) - [stateStyles：多态样式](arkts-statestyles.md) - 状态管理 - [状态管理概述](arkts-state-management-overview.md) - 管理组件拥有的状态 - - [\@State：组件内状态](arkts-state.md) - - [\@Prop：父子单向同步](arkts-prop.md) - - [\@Link：父子双向同步](arkts-link.md) - - [\@Provide和\@Consume：与后代组件双向同步](arkts-provide-and-consume.md) - - [\@Observed和\@ObjectLink：嵌套类对象属性变化](arkts-observed-and-objectlink.md) + - [\@State装饰器：组件内状态](arkts-state.md) + - [\@Prop装饰器：父子单向同步](arkts-prop.md) + - [\@Link装饰器：父子双向同步](arkts-link.md) + - [\@Provide装饰器和\@Consume装饰器：与后代组件双向同步](arkts-provide-and-consume.md) + - [\@Observed装饰器和\@ObjectLink装饰器：嵌套类对象属性变化](arkts-observed-and-objectlink.md) - 管理应用拥有的状态 - [管理应用拥有的状态概述](arkts-application-state-management-overview.md) - [LocalStorage：页面级UI状态存储](arkts-localstorage.md) @@ -66,7 +66,7 @@ - [Environment：设备环境查询](arkts-environment.md) - 其他状态管理 - [其他状态管理概述](arkts-other-state-mgmt-functions-overview.md) - - [\@Watch：状态变量更改通知](arkts-watch.md) + - [\@Watch装饰器：状态变量更改通知](arkts-watch.md) - [$$语法：内置组件双向同步](arkts-two-way-sync.md) - 渲染控制 - [渲染控制概述](arkts-rendering-control-overview.md) diff --git a/zh-cn/application-dev/quick-start/arkts-builder.md b/zh-cn/application-dev/quick-start/arkts-builder.md index 0de195ec6e80014163e1a76ca973e6563aea79ce..b3c1e91eb13e3796404520ff096c01d077f14211 100644 --- a/zh-cn/application-dev/quick-start/arkts-builder.md +++ b/zh-cn/application-dev/quick-start/arkts-builder.md @@ -1,4 +1,4 @@ -# \@Builder：自定义构建函数 +# \@Builder装饰器：自定义构建函数 前面章节介绍了如何创建一个自定义组件。该自定义组件内部UI结构固定，仅与使用方进行数据传递。ArkUI还提供了一种更轻量的UI元素复用机制\@Builder，\@Builder所装饰的函数遵循build()函数语法规则，开发者可以将重复使用的UI元素抽象成一个方法，在build方法里调用。 diff --git a/zh-cn/application-dev/quick-start/arkts-builderparam.md b/zh-cn/application-dev/quick-start/arkts-builderparam.md index dc606cb66e6ba4731d611f4769f2b90d6e452437..010af3a87371bb96c75185086ca12547a50f36d8 100644 --- a/zh-cn/application-dev/quick-start/arkts-builderparam.md +++ b/zh-cn/application-dev/quick-start/arkts-builderparam.md @@ -1,4 +1,4 @@ -# \@BuilderParam：引用\@Builder函数 +# \@BuilderParam装饰器：引用\@Builder函数 当开发者创建了自定义组件，并想对该组件添加特定功能时，例如在自定义组件中添加一个点击跳转操作。若直接在组件内嵌入事件方法，将会导致所有引入该自定义组件的地方均增加了该功能。为解决此问题，ArkUI引入了\@BuilderParam装饰器，\@BuilderParam用来装饰指向\@Builder方法的变量，开发者可在初始化自定义组件时对此属性进行赋值，为自定义组件增加特定的功能。该装饰器用于声明任意UI描述的一个元素，类似slot占位符。 diff --git a/zh-cn/application-dev/quick-start/arkts-extend.md b/zh-cn/application-dev/quick-start/arkts-extend.md index 450ec1b2450138023f7abf4b55ee0a857bbf72ed..c10bd5e3180e5178327c7b912b43d5c7c0cda475 100644 --- a/zh-cn/application-dev/quick-start/arkts-extend.md +++ b/zh-cn/application-dev/quick-start/arkts-extend.md @@ -1,4 +1,4 @@ -# \@Extend：定义扩展组件样式 +# \@Extend装饰器：定义扩展组件样式 在前文的示例中，可以使用\@Styles用于样式的扩展，在\@Styles的基础上，我们提供了\@Extend，用于扩展原生组件样式。 diff --git a/zh-cn/application-dev/quick-start/arkts-link.md b/zh-cn/application-dev/quick-start/arkts-link.md index da33f8b4da658562b7e9c577f57a7344817d4ba7..0c00c83b5cf44f7c0f742b64bbb14e17d5deb3d6 100644 --- a/zh-cn/application-dev/quick-start/arkts-link.md +++ b/zh-cn/application-dev/quick-start/arkts-link.md @@ -1,4 +1,4 @@ -# \@Link：父子双向同步 +# \@Link装饰器：父子双向同步 子组件中被\@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。 @@ -182,5 +182,6 @@ struct Parent { } ``` - 上文所述，ArkUI框架可以观察到数组元素的添加，删除和替换。在该示例中\@State和\@Link的类型是相同的number[]，不允许将\@Link定义成number类型（\@Link item : number），并在父组件中用\@State数组中每个数据项创建子组件。如果要使用这个场景，可以参考[\@Prop](arkts-prop.md)和\@Observed。 + + \ No newline at end of file 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 500fcce70f9dc8ac87e206df15eeaa9a2433e59f..960057f9ba2699945d03293b89eedfd679071b2f 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 @@ -1,4 +1,4 @@ -# \@Observed和\@ObjectLink：嵌套类对象属性变化 +# \@Observed装饰器和\@ObjectLink装饰器：嵌套类对象属性变化 上文所述的装饰器仅能观察到第一层的变化，但是在实际应用开发中，应用会根据开发需要，封装自己的数据模型。对于多层嵌套的情况，比如二维数组，或者数组项class，或者class的属性是class，他们的第二层的属性变化是无法观察到的。这就引出了\@Observed/\@ObjectLink装饰器。 diff --git a/zh-cn/application-dev/quick-start/arkts-prop.md b/zh-cn/application-dev/quick-start/arkts-prop.md index f8663e44503b813f1241b4b9532adc55e298c362..3070bc4f807eefbe8cf1205bbeb10ad19a6b3267 100644 --- a/zh-cn/application-dev/quick-start/arkts-prop.md +++ b/zh-cn/application-dev/quick-start/arkts-prop.md @@ -1,4 +1,4 @@ -# \@Prop：父子单向同步 +# \@Prop装饰器：父子单向同步 \@Prop装饰的变量可以和父组件建立单向的同步关系。\@Prop装饰的变量是可变的，但是变化不会同步回其父组件。 @@ -360,3 +360,5 @@ struct MainProgram { } } ``` + + \ No newline at end of file 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 7b5dff76c60c9431532c2f281fd794d196207be0..b7fb19e1b5a6d389fd92de0d3c8d89c46696b5fe 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 @@ -1,4 +1,4 @@ -# \@Provide和\@Consume：与后代组件双向同步 +# \@Provide装饰器和\@Consume装饰器：与后代组件双向同步 \@Provide和\@Consume，应用于与后代组件的双向数据同步，应用于状态数据在多个层级之间传递的场景。不同于上文提到的父子组件之间通过命名参数机制传递，\@Provide和\@Consume摆脱参数传递机制的束缚，实现跨层级传递。 diff --git a/zh-cn/application-dev/quick-start/arkts-state.md b/zh-cn/application-dev/quick-start/arkts-state.md index 19bc807d0f326c1429806124a99929bb2dbd0e63..9565a7d4c6bb469e171f03691c1f90024f114861 100644 --- a/zh-cn/application-dev/quick-start/arkts-state.md +++ b/zh-cn/application-dev/quick-start/arkts-state.md @@ -1,4 +1,4 @@ -# \@State：组件内状态 +# \@State装饰器：组件内状态 \@State装饰的变量，或称为状态变量，一旦变量拥有了状态属性，就和自定义组件的渲染绑定起来。当状态改变时，UI会发生对应的渲染改变。 diff --git a/zh-cn/application-dev/quick-start/arkts-style.md b/zh-cn/application-dev/quick-start/arkts-style.md index 3fbf608cb33814888c1ad2012fe0578d952d3044..8b69bb2bceb3642c0196e612104cec193503bfee 100644 --- a/zh-cn/application-dev/quick-start/arkts-style.md +++ b/zh-cn/application-dev/quick-start/arkts-style.md @@ -1,4 +1,4 @@ -# \@Styles：定义组件重用样式 +# \@Styles装饰器：定义组件重用样式 如果每个组件的样式都需要单独设置，在开发过程中会出现大量代码在进行重复样式设置，虽然可以复制粘贴，但为了代码简洁性和后续方便维护，我们推出了可以提炼公共样式进行复用的装饰器\@Styles。 diff --git a/zh-cn/application-dev/quick-start/arkts-watch.md b/zh-cn/application-dev/quick-start/arkts-watch.md index b1dbbfb0e395c8e7e628783635cb899e0468992a..f23723177de596166dbe9c836fdc1e4e3e5129b5 100644 --- a/zh-cn/application-dev/quick-start/arkts-watch.md +++ b/zh-cn/application-dev/quick-start/arkts-watch.md @@ -1,4 +1,4 @@ -# \@Watch：状态变量更改通知 +# \@Watch装饰器：状态变量更改通知 \@Watch应用于对状态变量的监听。如果开发者需要关注某个状态变量的值是否改变，可以使用\@Watch为状态变量设置回调函数。 diff --git a/zh-cn/application-dev/ui/Readme-CN.md b/zh-cn/application-dev/ui/Readme-CN.md index a858e0f0603db676aeaf8752dfd0e8f729f64c78..aa9dfeb4f30438c8daefef0c472471c621896b6b 100755 --- a/zh-cn/application-dev/ui/Readme-CN.md +++ b/zh-cn/application-dev/ui/Readme-CN.md @@ -6,39 +6,39 @@ - 开发布局 - [布局概述](arkts-layout-development-overview.md) - 构建布局 - - [线性布局](arkts-layout-development-linear.md) - - [层叠布局](arkts-layout-development-stack-layout.md) - - [弹性布局](arkts-layout-development-flex-layout.md) - - [相对布局](arkts-layout-development-relative-layout.md) - - [栅格布局](arkts-layout-development-grid-layout.md) - - [媒体查询](arkts-layout-development-media-query.md) - - [创建列表](arkts-layout-development-create-list.md) - - [创建网格](arkts-layout-development-create-grid.md) - - [创建轮播](arkts-layout-development-create-looping.md) + - [线性布局（Row/Column）](arkts-layout-development-linear.md) + - [层叠布局（Stack）](arkts-layout-development-stack-layout.md) + - [弹性布局（Flex）](arkts-layout-development-flex-layout.md) + - [相对布局（RelativeContainer）](arkts-layout-development-relative-layout.md) + - [栅格布局（GridRow/GridCol）](arkts-layout-development-grid-layout.md) + - [媒体查询（mediaquery）](arkts-layout-development-media-query.md) + - [创建列表（List）](arkts-layout-development-create-list.md) + - [创建网格（Grid/GridItem）](arkts-layout-development-create-grid.md) + - [创建轮播（Swiper）](arkts-layout-development-create-looping.md) - [改善布局性能](arkts-layout-development-performance-boost.md) - 添加组件 - 添加常用组件 - - [按钮](arkts-common-components-button.md) - - [单选框](arkts-common-components-radio-button.md) - - [切换按钮](arkts-common-components-switch.md) - - [进度条](arkts-common-components-progress-indicator.md) - - [文本显示](arkts-common-components-text-display.md) - - [文本输入](arkts-common-components-text-input.md) - - [自定义弹窗](arkts-common-components-custom-dialog.md) - - [视频播放](arkts-common-components-video-player.md) + - [按钮（Button）](arkts-common-components-button.md) + - [单选框（Radio）](arkts-common-components-radio-button.md) + - [切换按钮（Toggle）](arkts-common-components-switch.md) + - [进度条（Progress）](arkts-common-components-progress-indicator.md) + - [文本显示（Text/Span）](arkts-common-components-text-display.md) + - [文本输入（TextInput/TextArea）](arkts-common-components-text-input.md) + - [自定义弹窗（CustomDialog）](arkts-common-components-custom-dialog.md) + - [视频播放（Video）](arkts-common-components-video-player.md) - [XComponent](arkts-common-components-xcomponent.md) - 添加气泡和菜单 - - [气泡提示](arkts-popup-and-menu-components-popup.md) - - [菜单](arkts-popup-and-menu-components-menu.md) + - [气泡提示（Popup）](arkts-popup-and-menu-components-popup.md) + - [菜单（Menu）](arkts-popup-and-menu-components-menu.md) - 设置页面路由和组件导航 - - [页面路由](arkts-routing.md) + - [页面路由（router）](arkts-routing.md) - 组件导航 - [Navigation](arkts-navigation-navigation.md) - [Tabs](arkts-navigation-tabs.md) - 显示图形 - - [显示图片](arkts-graphics-display.md) - - [绘制几何图形](arkts-geometric-shape-drawing.md) - - [使用画布绘制自定义图形](arkts-drawing-customization-on-canvas.md) + - [显示图片（Image）](arkts-graphics-display.md) + - [绘制几何图形（Shape）](arkts-geometric-shape-drawing.md) + - [使用画布绘制自定义图形（Canvas）](arkts-drawing-customization-on-canvas.md) - 使用动画 - [动画概述](arkts-animation-overview.md) - 页面内的动画 diff --git a/zh-cn/application-dev/ui/arkts-common-components-button.md b/zh-cn/application-dev/ui/arkts-common-components-button.md index 08a05ae17b2bbe6319e71977ab261e5a60153a5a..c8ef521a5a68220cd5816f0c2d753b0b4607f51b 100644 --- a/zh-cn/application-dev/ui/arkts-common-components-button.md +++ b/zh-cn/application-dev/ui/arkts-common-components-button.md @@ -1,4 +1,4 @@ -# 按钮 +# 按钮（Button） Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮。Button当做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。具体用法请参考[Button](../reference/arkui-ts/ts-basic-components-button.md)。 diff --git a/zh-cn/application-dev/ui/arkts-common-components-custom-dialog.md b/zh-cn/application-dev/ui/arkts-common-components-custom-dialog.md index 94808dff9a47d5157983b4fbcdf8f1b1abb92cf6..5c66afe75251410303e165497e339b9b340fd007 100644 --- a/zh-cn/application-dev/ui/arkts-common-components-custom-dialog.md +++ b/zh-cn/application-dev/ui/arkts-common-components-custom-dialog.md @@ -1,4 +1,4 @@ -# 自定义弹窗 +# 自定义弹窗（CustomDialog） 自定义弹窗CustomDialog可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。具体用法请参考[自定义弹窗](../reference/arkui-ts/ts-methods-custom-dialog-box.md)。 @@ -9,7 +9,7 @@ 1. 使用\@CustomDialog装饰器装饰自定义弹窗。 2. \@CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）。 - + ```ts @CustomDialog struct CustomDialogExample { @@ -25,7 +25,7 @@ ``` 3. 创建构造器，与装饰器呼应相连。 - + ```ts dialogController: CustomDialogController = new CustomDialogController({ builder: CustomDialogExample({}), @@ -33,7 +33,7 @@ ``` 4. 点击与onClick事件绑定的组件使弹窗弹出 - + ```ts Flex({justifyContent:FlexAlign.Center}){ Button('click me') @@ -52,7 +52,7 @@ 1. 在\@CustomDialog装饰器内添加按钮操作，同时添加数据函数的创建。 - + ```ts @CustomDialog struct CustomDialogExample { @@ -80,7 +80,7 @@ ``` 2. 页面内需要在构造器内进行接收，同时创建相应的函数操作。 - + ```ts dialogController: CustomDialogController = new CustomDialogController({ builder: CustomDialogExample({ diff --git a/zh-cn/application-dev/ui/arkts-common-components-progress-indicator.md b/zh-cn/application-dev/ui/arkts-common-components-progress-indicator.md index 70026bd8724058808a26dcbd303ca6a0fdd85367..0374736ff4ff621c7266015ac351356beabd2bc3 100644 --- a/zh-cn/application-dev/ui/arkts-common-components-progress-indicator.md +++ b/zh-cn/application-dev/ui/arkts-common-components-progress-indicator.md @@ -1,4 +1,4 @@ -# 进度条 +# 进度条（Progress） Progress是进度条显示组件，显示内容通常为某次目标操作的当前进度。具体用法请参考[Progress](../reference/arkui-ts/ts-basic-components-progress.md)。 diff --git a/zh-cn/application-dev/ui/arkts-common-components-radio-button.md b/zh-cn/application-dev/ui/arkts-common-components-radio-button.md index e1c4b45dcb936ba274cb6b47ad2c1cb12468e640..96022554efdf3445dcf054c052b1442fc1c0f3a8 100644 --- a/zh-cn/application-dev/ui/arkts-common-components-radio-button.md +++ b/zh-cn/application-dev/ui/arkts-common-components-radio-button.md @@ -1,4 +1,4 @@ -# 单选框 +# 单选框（Radio） Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。具体用法请参考[Radio](../reference/arkui-ts/ts-basic-components-radio.md)。 diff --git a/zh-cn/application-dev/ui/arkts-common-components-switch.md b/zh-cn/application-dev/ui/arkts-common-components-switch.md index 251dfadc90ed9ef70c81f6187c27f7548a690d86..266867b86ee8cd301870331ef4a32a81ed165014 100644 --- a/zh-cn/application-dev/ui/arkts-common-components-switch.md +++ b/zh-cn/application-dev/ui/arkts-common-components-switch.md @@ -1,4 +1,4 @@ -# 切换按钮 +# 切换按钮（Toggle） Toggle组件提供状态按钮样式，勾选框样式及开关样式，一般用于两种状态之间的切换。具体用法请参考[Toggle](../reference/arkui-ts/ts-basic-components-toggle.md)。 diff --git a/zh-cn/application-dev/ui/arkts-common-components-text-display.md b/zh-cn/application-dev/ui/arkts-common-components-text-display.md index e91fec8627edf96accc4469e5cc796f309d2a8fe..b9374c1f1daf304f1d690d26115962476e5f6d04 100644 --- a/zh-cn/application-dev/ui/arkts-common-components-text-display.md +++ b/zh-cn/application-dev/ui/arkts-common-components-text-display.md @@ -1,4 +1,4 @@ -# 文本显示 +# 文本显示（Text/Span） Text是文本组件，通常用于展示用户的视图，如显示文章的文字。具体用法可参考[Text](../reference/arkui-ts/ts-basic-components-text.md)。 diff --git a/zh-cn/application-dev/ui/arkts-common-components-text-input.md b/zh-cn/application-dev/ui/arkts-common-components-text-input.md index ce8e4c1a2267b9eec504972353f0ea1c11dd51b6..4b4475f7606dc0d7852ab35c289db59e6318b8c8 100644 --- a/zh-cn/application-dev/ui/arkts-common-components-text-input.md +++ b/zh-cn/application-dev/ui/arkts-common-components-text-input.md @@ -1,4 +1,4 @@ -# 文本输入 +# 文本输入（TextInput/TextArea） TextInput、TextArea是输入框组件，通常用于响应用户的输入操作，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面，例如登录注册页面。具体用法参考[TextInput](../reference/arkui-ts/ts-basic-components-textinput.md)、[TextArea](../reference/arkui-ts/ts-basic-components-textarea.md)。 diff --git a/zh-cn/application-dev/ui/arkts-common-components-video-player.md b/zh-cn/application-dev/ui/arkts-common-components-video-player.md index 084b5fa36a58dc6a37e6c0354ef580dabda4b699..8613a5bd732815e63c85bbd24436c87e6954fbb3 100644 --- a/zh-cn/application-dev/ui/arkts-common-components-video-player.md +++ b/zh-cn/application-dev/ui/arkts-common-components-video-player.md @@ -1,4 +1,4 @@ -# 视频播放 +# 视频播放（Video） Video组件用于播放视频文件并控制其播放状态，常用于为短视频应用和应用内部视频的列表页面。当视频完整出现时会自动播放，用户点击视频区域则会暂停播放，同时显示播放进度条，通过拖动播放进度条指定视频播放到具体位置。具体用法请参考[Video](../reference/arkui-ts/ts-media-components-video.md)。 diff --git a/zh-cn/application-dev/ui/arkts-drawing-customization-on-canvas.md b/zh-cn/application-dev/ui/arkts-drawing-customization-on-canvas.md index a05504f4b58d607bcc679f3c04ca6d772d974b58..4bb1888206da8fd58c7411183d0e163ddf58e125 100644 --- a/zh-cn/application-dev/ui/arkts-drawing-customization-on-canvas.md +++ b/zh-cn/application-dev/ui/arkts-drawing-customization-on-canvas.md @@ -1,4 +1,4 @@ -# 使用画布绘制自定义图形 +# 使用画布绘制自定义图形（Canvas） Canvas提供画布组件，用于自定义绘制图形，开发者使用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象在Canvas组件上进行绘制，绘制对象可以是基础形状、文本、图片等。 diff --git a/zh-cn/application-dev/ui/arkts-geometric-shape-drawing.md b/zh-cn/application-dev/ui/arkts-geometric-shape-drawing.md index f665a9dea4de305774169316400025ba3d89bd74..26ae6ccbdd21ac8a7d5b9ead1a06e3527fc298dd 100644 --- a/zh-cn/application-dev/ui/arkts-geometric-shape-drawing.md +++ b/zh-cn/application-dev/ui/arkts-geometric-shape-drawing.md @@ -1,4 +1,4 @@ -# 绘制几何图形 +# 绘制几何图形（Shape） 绘制组件用于在页面绘制图形，Shape组件是绘制组件的父组件，父组件中会描述所有绘制组件均支持的通用属性。具体用法请参考[Shape](../reference/arkui-ts/ts-drawing-components-shape.md)。 diff --git a/zh-cn/application-dev/ui/arkts-graphics-display.md b/zh-cn/application-dev/ui/arkts-graphics-display.md index 196046e3ff0e846292fbdde4aad88f4d3aa78fbc..50c436787e40d2da78efaac16dd2ee229cb70502 100644 --- a/zh-cn/application-dev/ui/arkts-graphics-display.md +++ b/zh-cn/application-dev/ui/arkts-graphics-display.md @@ -1,4 +1,4 @@ -# 显示图片 +# 显示图片（Image） 开发者经常需要在应用中显示一些图片，例如：按钮中的logo、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现，Image支持多种图片格式，包括png、jpg、bmp、svg和gif，具体用法请参考[Image](../reference/arkui-ts/ts-basic-components-image.md)组件。 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 0525dec32af01ab3ea0f2fa451c9f7585dc65a8e..55417658972cf89fbea80c9a89e2e4258f180a5b 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 @@ -1,4 +1,4 @@ -# 创建网格 +# 创建网格（Grid/GridItem） ## 概述 @@ -331,9 +331,3 @@ Grid() { >**说明：** > >cachedCount的增加会增大UI的CPU、内存开销。使用时需要根据实际情况，综合性能和用户体验进行调整。 - -## 相关实例 - -如需详细了解网格布局的实现，请参考以下示例： - -- [分布式计算器](https://gitee.com/openharmony/applications_app_samples/tree/master/Preset/EtsDistributedCalc) 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 8b63f561bcfc2ee2656d7ad0b561896718d7353e..56623c813255809dd84805d53293343dcc55e868 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 @@ -1,11 +1,11 @@ -# 创建列表 +# 创建列表（List） ## 概述 列表是一种复杂的容器，当列表项达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集，例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求（如通讯录、音乐列表、购物清单等）。 -使用列表可以轻松高效地显示结构化、可滚动的信息。通过在[List](../reference/arkui-ts/ts-container-list.md/)组件中按垂直或者水平方向线性排列子组件[ListItemGroup](../reference/arkui-ts/ts-container-listitemgroup.md/)或[ListItem](../reference/arkui-ts/ts-container-listitem.md)，为列表中的行或列提供单个视图，或使用[循环渲染](../quick-start/arkts-rendering-control-foreach.md)迭代一组行或列，或混合任意数量的单个视图和ForEach结构，构建一个列表。List组件支持使用条件渲染、循环渲染、懒加载等[渲染控制](../quick-start/arkts-rendering-control-overview.md)方式生成子组件。 +使用列表可以轻松高效地显示结构化、可滚动的信息。通过在[List](../reference/arkui-ts/ts-container-list.md)组件中按垂直或者水平方向线性排列子组件[ListItemGroup](../reference/arkui-ts/ts-container-listitemgroup.md)或[ListItem](../reference/arkui-ts/ts-container-listitem.md)，为列表中的行或列提供单个视图，或使用[循环渲染](../quick-start/arkts-rendering-control-foreach.md)迭代一组行或列，或混合任意数量的单个视图和ForEach结构，构建一个列表。List组件支持使用条件渲染、循环渲染、懒加载等[渲染控制](../quick-start/arkts-rendering-control-overview.md)方式生成子组件。 ## 布局与约束 @@ -27,7 +27,7 @@ ListItemGroup用于列表数据的分组展示，其子组件也是ListItem。Li ### 布局 -List除了提供垂直和水平布局能力、超出屏幕时可以滚动的自适应[延伸能力](../key-features/multi-device-app-dev/adaptive-layout.md/#%E5%BB%B6%E4%BC%B8%E8%83%BD%E5%8A%9B)之外，还提供了自适应交叉轴方向上排列个数的布局能力。 +List除了提供垂直和水平布局能力、超出屏幕时可以滚动的自适应[延伸能力](../key-features/multi-device-app-dev/adaptive-layout.md)之外，还提供了自适应交叉轴方向上排列个数的布局能力。 利用垂直布局能力可以构建单列或者多列垂直滚动列表，如下图所示。 @@ -95,7 +95,7 @@ List() { List组件的交叉轴布局可以通过lanes和alignListItem属性进行设置，lanes属性用于确定交叉轴排列的列表项数量，alignListItem用于设置子组件在交叉轴方向的对齐方式。 -List组件的lanes属性通常用于在不同尺寸的设备自适应构建不同行数或列数的列表，即一次开发、多端部署的场景，例如[歌单列表](../key-features/multi-device-app-dev/music-album-page.md#%E6%AD%8C%E5%8D%95%E5%88%97%E8%A1%A8)。lanes属性的取值类型是"number | [LengthConstrain](../reference/arkui-ts/ts-types.md/#lengthconstrain)"，即整数或者LengthConstrain类型。以垂直列表为例，如果将lanes属性设为2，表示构建的是一个两列的垂直列表，如图2中右图所示。lanes的默认值为1，即默认情况下，垂直列表的列数是1。 +List组件的lanes属性通常用于在不同尺寸的设备自适应构建不同行数或列数的列表，即一次开发、多端部署的场景，例如[歌单列表](../key-features/multi-device-app-dev/music-album-page.md)。lanes属性的取值类型是"number | [LengthConstrain](../reference/arkui-ts/ts-types.md#lengthconstrain)"，即整数或者LengthConstrain类型。以垂直列表为例，如果将lanes属性设为2，表示构建的是一个两列的垂直列表，如图2中右图所示。lanes的默认值为1，即默认情况下，垂直列表的列数是1。 ```ts @@ -318,7 +318,7 @@ List() { ![zh-cn_image_0000001511740544](figures/zh-cn_image_0000001511740544.gif) -在使用List组件时，可通过scrollBar属性控制列表滚动条的显示。scrollBar的取值类型为[BarState](../reference/arkui-ts/ts-appendix-enums.md/#barstate)，当取值为BarState.Auto表示按需显示滚动条。此时，当触摸到滚动条区域时显示控件，可上下拖拽滚动条快速浏览内容，拖拽时会变粗。若不进行任何操作，2秒后滚动条自动消失。 +在使用List组件时，可通过scrollBar属性控制列表滚动条的显示。scrollBar的取值类型为[BarState](../reference/arkui-ts/ts-appendix-enums.md#barstate)，当取值为BarState.Auto表示按需显示滚动条。此时，当触摸到滚动条区域时显示控件，可上下拖拽滚动条快速浏览内容，拖拽时会变粗。若不进行任何操作，2秒后滚动条自动消失。 ```ts @@ -478,7 +478,7 @@ struct ContactsList { ![zh-cn_image_0000001511900520](figures/zh-cn_image_0000001511900520.gif) -List组件初始化时，可以通过scroller参数绑定一个[Scroller](../reference/arkui-ts/ts-container-scroll.md/#scroller)对象，进行列表的滚动控制。例如，用户在新闻应用中，点击新闻页面底部的返回顶部按钮时，就可以通过Scroller对象的scrollToIndex方法使列表滚动到指定的列表项索引位置。 +List组件初始化时，可以通过scroller参数绑定一个[Scroller](../reference/arkui-ts/ts-container-scroll.md#scroller)对象，进行列表的滚动控制。例如，用户在新闻应用中，点击新闻页面底部的返回顶部按钮时，就可以通过Scroller对象的scrollToIndex方法使列表滚动到指定的列表项索引位置。 首先，需要创建一个Scroller的对象listScroller。 @@ -520,7 +520,7 @@ Stack({ alignContent: Alignment.BottomEnd }) { ![zh-cn_image_0000001563060769](figures/zh-cn_image_0000001563060769.gif) -如上图所示，当联系人列表从A滚动到B时，右侧索引栏也需要同步从选中A状态变成选中B状态。此场景可以通过监听List组件的onScrollIndex事件来实现，右侧索引栏需要使用字母表索引组件[AlphabetIndexer](../reference/arkui-ts/ts-container-alphabet-indexer.md/)。 +如上图所示，当联系人列表从A滚动到B时，右侧索引栏也需要同步从选中A状态变成选中B状态。此场景可以通过监听List组件的onScrollIndex事件来实现，右侧索引栏需要使用字母表索引组件[AlphabetIndexer](../reference/arkui-ts/ts-container-alphabet-indexer.md)。 在列表滚动时，根据列表此时所在的索引值位置firstIndex，重新计算字母索引栏对应字母的位置selectedIndex。由于AlphabetIndexer组件通过selected属性设置了选中项索引值，当selectedIndex变化时会触发AlphabetIndexer组件重新渲染，从而显示为选中对应字母的状态。 @@ -621,7 +621,7 @@ struct MessageList { ![zh-cn_image_0000001511580952](figures/zh-cn_image_0000001511580952.png) -在ListItem中使用[Badge](../reference/arkui-ts/ts-container-badge.md/)组件可实现给列表项添加标记功能。Badge是可以附加在单个组件上用于信息标记的容器组件。 +在ListItem中使用[Badge](../reference/arkui-ts/ts-container-badge.md)组件可实现给列表项添加标记功能。Badge是可以附加在单个组件上用于信息标记的容器组件。 在消息列表中，若希望在联系人头像右上角添加标记，可在实现消息列表项ListItem的联系人头像时，将头像Image组件作为Badge的子组件。 @@ -643,7 +643,7 @@ Badge({ ## 下拉刷新与上拉加载 -页面的下拉刷新与上拉加载功能在移动应用中十分常见，例如，新闻页面的内容刷新和加载。这两种操作的原理都是通过响应用户的[触摸事件](../reference/arkui-ts/ts-universal-events-touch.md/)，在顶部或者底部显示一个刷新或加载视图，完成后再将此视图隐藏。 +页面的下拉刷新与上拉加载功能在移动应用中十分常见，例如，新闻页面的内容刷新和加载。这两种操作的原理都是通过响应用户的[触摸事件](../reference/arkui-ts/ts-universal-events-touch.md)，在顶部或者底部显示一个刷新或加载视图，完成后再将此视图隐藏。 以下拉刷新为例，其实现主要分成三步： diff --git a/zh-cn/application-dev/ui/arkts-layout-development-create-looping.md b/zh-cn/application-dev/ui/arkts-layout-development-create-looping.md index 714b7af86eaa66fffc8827b94a7aa7d5ddb43834..e36a2d9f941f82282bd2aece94746a1bfa35cb55 100644 --- a/zh-cn/application-dev/ui/arkts-layout-development-create-looping.md +++ b/zh-cn/application-dev/ui/arkts-layout-development-create-looping.md @@ -1,4 +1,4 @@ -# 创建轮播 +# 创建轮播（Swiper） [Swiper](../reference/arkui-ts/ts-container-swiper.md)组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力。 diff --git a/zh-cn/application-dev/ui/arkts-layout-development-flex-layout.md b/zh-cn/application-dev/ui/arkts-layout-development-flex-layout.md index b1b551a4a8d1644618e3fa270214892b9a1cf58c..964a6156ffdf8e063dbd030dc55a7fa8c51f13ab 100644 --- a/zh-cn/application-dev/ui/arkts-layout-development-flex-layout.md +++ b/zh-cn/application-dev/ui/arkts-layout-development-flex-layout.md @@ -1,4 +1,4 @@ -# 弹性布局 +# 弹性布局（Flex） ## 概述 diff --git a/zh-cn/application-dev/ui/arkts-layout-development-grid-layout.md b/zh-cn/application-dev/ui/arkts-layout-development-grid-layout.md index b148fb8cdd1e8dd939475199d8abda32772d1a6a..3affd66f04a97ce5655ff925f912df66c80fd43a 100644 --- a/zh-cn/application-dev/ui/arkts-layout-development-grid-layout.md +++ b/zh-cn/application-dev/ui/arkts-layout-development-grid-layout.md @@ -1,4 +1,4 @@ -# 栅格布局 +# 栅格布局（GridRow/GridCol） ## 概述 diff --git a/zh-cn/application-dev/ui/arkts-layout-development-linear.md b/zh-cn/application-dev/ui/arkts-layout-development-linear.md index 1dee7a3963c2ec6f14636b6f3fda5e5d94820f9a..38585141a0bb6a64e595c277658cf55342cf9821 100644 --- a/zh-cn/application-dev/ui/arkts-layout-development-linear.md +++ b/zh-cn/application-dev/ui/arkts-layout-development-linear.md @@ -1,4 +1,4 @@ -# 线性布局 +# 线性布局（Row/Column） ## 概述 diff --git a/zh-cn/application-dev/ui/arkts-layout-development-media-query.md b/zh-cn/application-dev/ui/arkts-layout-development-media-query.md index c68a848341f5500497fc74a3fdf4bd7a4f233d72..7f15c97ed6fd3bd9d130dcb9ff4cf90ccacc61bf 100644 --- a/zh-cn/application-dev/ui/arkts-layout-development-media-query.md +++ b/zh-cn/application-dev/ui/arkts-layout-development-media-query.md @@ -1,4 +1,4 @@ -# 媒体查询 +# 媒体查询（mediaquery） ## 概述 diff --git a/zh-cn/application-dev/ui/arkts-layout-development-relative-layout.md b/zh-cn/application-dev/ui/arkts-layout-development-relative-layout.md index 6f61183dd9b41e91eec078222b2c5e8928f3414a..3e3b9afbf2e9df811d8cd399528cfd3f7a8b9327 100644 --- a/zh-cn/application-dev/ui/arkts-layout-development-relative-layout.md +++ b/zh-cn/application-dev/ui/arkts-layout-development-relative-layout.md @@ -1,4 +1,4 @@ -# 相对布局 +# 相对布局（RelativeContainer） ## 概述 diff --git a/zh-cn/application-dev/ui/arkts-layout-development-stack-layout.md b/zh-cn/application-dev/ui/arkts-layout-development-stack-layout.md index 73b4fc615c9b71112b9b245b5cdcaa593616a7bf..c18957fc88548f0640bb80619db8028e3cd1f610 100644 --- a/zh-cn/application-dev/ui/arkts-layout-development-stack-layout.md +++ b/zh-cn/application-dev/ui/arkts-layout-development-stack-layout.md @@ -1,4 +1,4 @@ -# 层叠布局 +# 层叠布局（Stack） ## 概述 diff --git a/zh-cn/application-dev/ui/arkts-popup-and-menu-components-menu.md b/zh-cn/application-dev/ui/arkts-popup-and-menu-components-menu.md index 08231b5832981c9db33a280b026f7fd1279cf79f..6a5b06eafebb38c1a229cd741b1c82b3c4201ba4 100644 --- a/zh-cn/application-dev/ui/arkts-popup-and-menu-components-menu.md +++ b/zh-cn/application-dev/ui/arkts-popup-and-menu-components-menu.md @@ -1,4 +1,4 @@ -# 菜单 +# 菜单（Menu） Menu是菜单接口，一般用于鼠标右键弹窗、点击弹窗等。具体用法请参考[Menu控制](../reference/arkui-ts/ts-universal-attributes-menu.md)。 diff --git a/zh-cn/application-dev/ui/arkts-popup-and-menu-components-popup.md b/zh-cn/application-dev/ui/arkts-popup-and-menu-components-popup.md index 6c2712d95d2c8ccee73972d2aa6da6942e73adc1..da1f91d3cca833fa4b901bd5a65a4facaf0d1b15 100644 --- a/zh-cn/application-dev/ui/arkts-popup-and-menu-components-popup.md +++ b/zh-cn/application-dev/ui/arkts-popup-and-menu-components-popup.md @@ -1,4 +1,4 @@ -# 气泡提示 +# 气泡提示（Popup） Popup属性可绑定在组件上显示气泡弹窗提示，设置弹窗内容、交互逻辑和显示状态。主要用于屏幕录制、信息弹出提醒等显示状态。 diff --git a/zh-cn/application-dev/ui/arkts-routing.md b/zh-cn/application-dev/ui/arkts-routing.md index 0ee4fd8da20ab6172820da9eb361674f525fe7ba..74a0bd7f00e60d167d8f571abeab62f943342708 100644 --- a/zh-cn/application-dev/ui/arkts-routing.md +++ b/zh-cn/application-dev/ui/arkts-routing.md @@ -1,4 +1,4 @@ -# 页面路由 +# 页面路由（router） 页面路由指在应用程序中实现不同页面之间的跳转和数据传递。OpenHarmony提供了Router模块，通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。本文将从[页面跳转](#页面跳转)、[页面返回](#页面返回)和[页面返回前增加一个询问框](#页面返回前增加一个询问框)几个方面介绍Router模块提供的功能。 diff --git a/zh-cn/application-dev/website.md b/zh-cn/application-dev/website.md index 70809cc4e2fbb632dccc4c646a4eccba7c8e3ff7..900b602d72b7bcb1c7e07ff3616471761eaf14fb 100644 --- a/zh-cn/application-dev/website.md +++ b/zh-cn/application-dev/website.md @@ -47,19 +47,19 @@ - 自定义组件 - [创建自定义组件](quick-start/arkts-create-custom-components.md) - [页面和自定义组件生命周期](quick-start/arkts-page-custom-components-lifecycle.md) - - [\@Builder：自定义构建函数](quick-start/arkts-builder.md) - - [\@BuilderParam：引用\@Builder函数](quick-start/arkts-builderparam.md) - - [\@Styles：定义组件重用样式](quick-start/arkts-style.md) - - [\@Extend：定义扩展组件样式](quick-start/arkts-extend.md) + - [\@Builder装饰器：自定义构建函数](quick-start/arkts-builder.md) + - [\@BuilderParam装饰器：引用\@Builder函数](quick-start/arkts-builderparam.md) + - [\@Styles装饰器：定义组件重用样式](quick-start/arkts-style.md) + - [\@Extend装饰器：定义扩展组件样式](quick-start/arkts-extend.md) - [stateStyles：多态样式](quick-start/arkts-statestyles.md) - 状态管理 - [状态管理概述](quick-start/arkts-state-management-overview.md) - 管理组件拥有的状态 - - [\@State：组件内状态](quick-start/arkts-state.md) - - [\@Prop：父子单向同步](quick-start/arkts-prop.md) - - [\@Link：父子双向同步](quick-start/arkts-link.md) - - [\@Provide和\@Consume：与后代组件双向同步](quick-start/arkts-provide-and-consume.md) - - [\@Observed和\@ObjectLink：嵌套类对象属性变化](quick-start/arkts-observed-and-objectlink.md) + - [\@State装饰器：组件内状态](quick-start/arkts-state.md) + - [\@Prop装饰器：父子单向同步](quick-start/arkts-prop.md) + - [\@Link装饰器：父子双向同步](quick-start/arkts-link.md) + - [\@Provide装饰器和\@Consume装饰器：与后代组件双向同步](quick-start/arkts-provide-and-consume.md) + - [\@Observed装饰器和\@ObjectLink装饰器：嵌套类对象属性变化](quick-start/arkts-observed-and-objectlink.md) - 管理应用拥有的状态 - [管理应用拥有的状态概述](quick-start/arkts-application-state-management-overview.md) - [LocalStorage：页面级UI状态存储](quick-start/arkts-localstorage.md) @@ -68,7 +68,7 @@ - [Environment：设备环境查询](quick-start/arkts-environment.md) - 其他状态管理 - [其他状态管理概述](quick-start/arkts-other-state-mgmt-functions-overview.md) - - [\@Watch：状态变量更改通知](quick-start/arkts-watch.md) + - [\@Watch装饰器：状态变量更改通知](quick-start/arkts-watch.md) - [$$语法：内置组件双向同步](quick-start/arkts-two-way-sync.md) - 渲染控制 - [渲染控制概述](quick-start/arkts-rendering-control-overview.md) @@ -241,39 +241,39 @@ - 开发布局 - [布局概述](ui/arkts-layout-development-overview.md) - 构建布局 - - [线性布局](ui/arkts-layout-development-linear.md) - - [层叠布局](ui/arkts-layout-development-stack-layout.md) - - [弹性布局](ui/arkts-layout-development-flex-layout.md) - - [相对布局](ui/arkts-layout-development-relative-layout.md) - - [栅格布局](ui/arkts-layout-development-grid-layout.md) - - [媒体查询](ui/arkts-layout-development-media-query.md) - - [创建列表](ui/arkts-layout-development-create-list.md) - - [创建网格](ui/arkts-layout-development-create-grid.md) - - [创建轮播](ui/arkts-layout-development-create-looping.md) + - [线性布局（Row/Column）](ui/arkts-layout-development-linear.md) + - [层叠布局（Stack）](ui/arkts-layout-development-stack-layout.md) + - [弹性布局（Flex）](ui/arkts-layout-development-flex-layout.md) + - [相对布局（RelativeContainer）](ui/arkts-layout-development-relative-layout.md) + - [栅格布局（GridRow/GridCol）](ui/arkts-layout-development-grid-layout.md) + - [媒体查询（mediaquery）](ui/arkts-layout-development-media-query.md) + - [创建列表（List）](ui/arkts-layout-development-create-list.md) + - [创建网格（Grid/GridItem）](ui/arkts-layout-development-create-grid.md) + - [创建轮播（Swiper）](ui/arkts-layout-development-create-looping.md) - [改善布局性能](ui/arkts-layout-development-performance-boost.md) - 添加组件 - 添加常用组件 - - [按钮](ui/arkts-common-components-button.md) - - [单选框](ui/arkts-common-components-radio-button.md) - - [切换按钮](ui/arkts-common-components-switch.md) - - [进度条](ui/arkts-common-components-progress-indicator.md) - - [文本显示](ui/arkts-common-components-text-display.md) - - [文本输入](ui/arkts-common-components-text-input.md) - - [自定义弹窗](ui/arkts-common-components-custom-dialog.md) - - [视频播放](ui/arkts-common-components-video-player.md) + - [按钮（Button）](ui/arkts-common-components-button.md) + - [单选框（Radio）](ui/arkts-common-components-radio-button.md) + - [切换按钮（Toggle）](ui/arkts-common-components-switch.md) + - [进度条（Progress）](ui/arkts-common-components-progress-indicator.md) + - [文本显示（Text/Span）](ui/arkts-common-components-text-display.md) + - [文本输入（TextInput/TextArea）](ui/arkts-common-components-text-input.md) + - [自定义弹窗（CustomDialog）](ui/arkts-common-components-custom-dialog.md) + - [视频播放（Video）](ui/arkts-common-components-video-player.md) - [XComponent](ui/arkts-common-components-xcomponent.md) - 添加气泡和菜单 - - [气泡提示](ui/arkts-popup-and-menu-components-popup.md) - - [菜单](ui/arkts-popup-and-menu-components-menu.md) + - [气泡提示（Popup）](ui/arkts-popup-and-menu-components-popup.md) + - [菜单（Menu）](ui/arkts-popup-and-menu-components-menu.md) - 设置页面路由和组件导航 - - [页面路由](ui/arkts-routing.md) + - [页面路由（router）](ui/arkts-routing.md) - 组件导航 - [Navigation](ui/arkts-navigation-navigation.md) - [Tabs](ui/arkts-navigation-tabs.md) - 显示图形 - - [显示图片](ui/arkts-graphics-display.md) - - [绘制几何图形](ui/arkts-geometric-shape-drawing.md) - - [使用画布绘制自定义图形](ui/arkts-drawing-customization-on-canvas.md) + - [显示图片（Image）](ui/arkts-graphics-display.md) + - [绘制几何图形（Shape）](ui/arkts-geometric-shape-drawing.md) + - [使用画布绘制自定义图形（Canvas）](ui/arkts-drawing-customization-on-canvas.md) - 使用动画 - [动画概述](ui/arkts-animation-overview.md) - 页面内的动画