Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
4c3347df
D
Docs
项目概览
OpenHarmony
/
Docs
大约 2 年 前同步成功
通知
161
Star
293
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
未验证
提交
4c3347df
编写于
6月 20, 2023
作者:
O
openharmony_ci
提交者:
Gitee
6月 20, 2023
浏览文件
操作
浏览文件
下载
差异文件
!19938 19927挑单:更新标题
Merge pull request !19938 from LiAn/OpenHarmony-3.2-Release
上级
b5335c68
00059226
变更
36
隐藏空白更改
内联
并排
Showing
36 changed file
with
116 addition
and
119 deletion
+116
-119
zh-cn/application-dev/quick-start/Readme-CN.md
zh-cn/application-dev/quick-start/Readme-CN.md
+10
-10
zh-cn/application-dev/quick-start/arkts-builder.md
zh-cn/application-dev/quick-start/arkts-builder.md
+1
-1
zh-cn/application-dev/quick-start/arkts-builderparam.md
zh-cn/application-dev/quick-start/arkts-builderparam.md
+1
-1
zh-cn/application-dev/quick-start/arkts-extend.md
zh-cn/application-dev/quick-start/arkts-extend.md
+1
-1
zh-cn/application-dev/quick-start/arkts-link.md
zh-cn/application-dev/quick-start/arkts-link.md
+3
-2
zh-cn/application-dev/quick-start/arkts-observed-and-objectlink.md
...lication-dev/quick-start/arkts-observed-and-objectlink.md
+1
-1
zh-cn/application-dev/quick-start/arkts-prop.md
zh-cn/application-dev/quick-start/arkts-prop.md
+3
-1
zh-cn/application-dev/quick-start/arkts-provide-and-consume.md
.../application-dev/quick-start/arkts-provide-and-consume.md
+1
-1
zh-cn/application-dev/quick-start/arkts-state.md
zh-cn/application-dev/quick-start/arkts-state.md
+1
-1
zh-cn/application-dev/quick-start/arkts-style.md
zh-cn/application-dev/quick-start/arkts-style.md
+1
-1
zh-cn/application-dev/quick-start/arkts-watch.md
zh-cn/application-dev/quick-start/arkts-watch.md
+1
-1
zh-cn/application-dev/ui/Readme-CN.md
zh-cn/application-dev/ui/Readme-CN.md
+23
-23
zh-cn/application-dev/ui/arkts-common-components-button.md
zh-cn/application-dev/ui/arkts-common-components-button.md
+1
-1
zh-cn/application-dev/ui/arkts-common-components-custom-dialog.md
...plication-dev/ui/arkts-common-components-custom-dialog.md
+6
-6
zh-cn/application-dev/ui/arkts-common-components-progress-indicator.md
...tion-dev/ui/arkts-common-components-progress-indicator.md
+1
-1
zh-cn/application-dev/ui/arkts-common-components-radio-button.md
...pplication-dev/ui/arkts-common-components-radio-button.md
+1
-1
zh-cn/application-dev/ui/arkts-common-components-switch.md
zh-cn/application-dev/ui/arkts-common-components-switch.md
+1
-1
zh-cn/application-dev/ui/arkts-common-components-text-display.md
...pplication-dev/ui/arkts-common-components-text-display.md
+1
-1
zh-cn/application-dev/ui/arkts-common-components-text-input.md
.../application-dev/ui/arkts-common-components-text-input.md
+1
-1
zh-cn/application-dev/ui/arkts-common-components-video-player.md
...pplication-dev/ui/arkts-common-components-video-player.md
+1
-1
zh-cn/application-dev/ui/arkts-drawing-customization-on-canvas.md
...plication-dev/ui/arkts-drawing-customization-on-canvas.md
+1
-1
zh-cn/application-dev/ui/arkts-geometric-shape-drawing.md
zh-cn/application-dev/ui/arkts-geometric-shape-drawing.md
+1
-1
zh-cn/application-dev/ui/arkts-graphics-display.md
zh-cn/application-dev/ui/arkts-graphics-display.md
+1
-1
zh-cn/application-dev/ui/arkts-layout-development-create-grid.md
...pplication-dev/ui/arkts-layout-development-create-grid.md
+1
-7
zh-cn/application-dev/ui/arkts-layout-development-create-list.md
...pplication-dev/ui/arkts-layout-development-create-list.md
+9
-9
zh-cn/application-dev/ui/arkts-layout-development-create-looping.md
...ication-dev/ui/arkts-layout-development-create-looping.md
+1
-1
zh-cn/application-dev/ui/arkts-layout-development-flex-layout.md
...pplication-dev/ui/arkts-layout-development-flex-layout.md
+1
-1
zh-cn/application-dev/ui/arkts-layout-development-grid-layout.md
...pplication-dev/ui/arkts-layout-development-grid-layout.md
+1
-1
zh-cn/application-dev/ui/arkts-layout-development-linear.md
zh-cn/application-dev/ui/arkts-layout-development-linear.md
+1
-1
zh-cn/application-dev/ui/arkts-layout-development-media-query.md
...pplication-dev/ui/arkts-layout-development-media-query.md
+1
-1
zh-cn/application-dev/ui/arkts-layout-development-relative-layout.md
...cation-dev/ui/arkts-layout-development-relative-layout.md
+1
-1
zh-cn/application-dev/ui/arkts-layout-development-stack-layout.md
...plication-dev/ui/arkts-layout-development-stack-layout.md
+1
-1
zh-cn/application-dev/ui/arkts-popup-and-menu-components-menu.md
...pplication-dev/ui/arkts-popup-and-menu-components-menu.md
+1
-1
zh-cn/application-dev/ui/arkts-popup-and-menu-components-popup.md
...plication-dev/ui/arkts-popup-and-menu-components-popup.md
+1
-1
zh-cn/application-dev/ui/arkts-routing.md
zh-cn/application-dev/ui/arkts-routing.md
+1
-1
zh-cn/application-dev/website.md
zh-cn/application-dev/website.md
+33
-33
未找到文件。
zh-cn/application-dev/quick-start/Readme-CN.md
浏览文件 @
4c3347df
...
...
@@ -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
)
...
...
zh-cn/application-dev/quick-start/arkts-builder.md
浏览文件 @
4c3347df
# \@Builder:自定义构建函数
# \@Builder
装饰器
:自定义构建函数
前面章节介绍了如何创建一个自定义组件。该自定义组件内部UI结构固定,仅与使用方进行数据传递。ArkUI还提供了一种更轻量的UI元素复用机制
\@
Builder,
\@
Builder所装饰的函数遵循build()函数语法规则,开发者可以将重复使用的UI元素抽象成一个方法,在build方法里调用。
...
...
zh-cn/application-dev/quick-start/arkts-builderparam.md
浏览文件 @
4c3347df
# \@BuilderParam:引用\@Builder函数
# \@BuilderParam
装饰器
:引用\@Builder函数
当开发者创建了自定义组件,并想对该组件添加特定功能时,例如在自定义组件中添加一个点击跳转操作。若直接在组件内嵌入事件方法,将会导致所有引入该自定义组件的地方均增加了该功能。为解决此问题,ArkUI引入了
\@
BuilderParam装饰器,
\@
BuilderParam用来装饰指向
\@
Builder方法的变量,开发者可在初始化自定义组件时对此属性进行赋值,为自定义组件增加特定的功能。该装饰器用于声明任意UI描述的一个元素,类似slot占位符。
...
...
zh-cn/application-dev/quick-start/arkts-extend.md
浏览文件 @
4c3347df
# \@Extend:定义扩展组件样式
# \@Extend
装饰器
:定义扩展组件样式
在前文的示例中,可以使用
\@
Styles用于样式的扩展,在
\@
Styles的基础上,我们提供了
\@
Extend,用于扩展原生组件样式。
...
...
zh-cn/application-dev/quick-start/arkts-link.md
浏览文件 @
4c3347df
# \@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_check-->
\ No newline at end of file
zh-cn/application-dev/quick-start/arkts-observed-and-objectlink.md
浏览文件 @
4c3347df
# \@Observed
和\@ObjectLink
:嵌套类对象属性变化
# \@Observed
装饰器和\@ObjectLink装饰器
:嵌套类对象属性变化
上文所述的装饰器仅能观察到第一层的变化,但是在实际应用开发中,应用会根据开发需要,封装自己的数据模型。对于多层嵌套的情况,比如二维数组,或者数组项class,或者class的属性是class,他们的第二层的属性变化是无法观察到的。这就引出了
\@
Observed/
\@
ObjectLink装饰器。
...
...
zh-cn/application-dev/quick-start/arkts-prop.md
浏览文件 @
4c3347df
# \@Prop:父子单向同步
# \@Prop
装饰器
:父子单向同步
\@
Prop装饰的变量可以和父组件建立单向的同步关系。
\@
Prop装饰的变量是可变的,但是变化不会同步回其父组件。
...
...
@@ -360,3 +360,5 @@ struct MainProgram {
}
}
```
<!--no_check-->
\ No newline at end of file
zh-cn/application-dev/quick-start/arkts-provide-and-consume.md
浏览文件 @
4c3347df
# \@Provide
和\@Consume
:与后代组件双向同步
# \@Provide
装饰器和\@Consume装饰器
:与后代组件双向同步
\@
Provide和
\@
Consume,应用于与后代组件的双向数据同步,应用于状态数据在多个层级之间传递的场景。不同于上文提到的父子组件之间通过命名参数机制传递,
\@
Provide和
\@
Consume摆脱参数传递机制的束缚,实现跨层级传递。
...
...
zh-cn/application-dev/quick-start/arkts-state.md
浏览文件 @
4c3347df
# \@State:组件内状态
# \@State
装饰器
:组件内状态
\@
State装饰的变量,或称为状态变量,一旦变量拥有了状态属性,就和自定义组件的渲染绑定起来。当状态改变时,UI会发生对应的渲染改变。
...
...
zh-cn/application-dev/quick-start/arkts-style.md
浏览文件 @
4c3347df
# \@Styles:定义组件重用样式
# \@Styles
装饰器
:定义组件重用样式
如果每个组件的样式都需要单独设置,在开发过程中会出现大量代码在进行重复样式设置,虽然可以复制粘贴,但为了代码简洁性和后续方便维护,我们推出了可以提炼公共样式进行复用的装饰器
\@
Styles。
...
...
zh-cn/application-dev/quick-start/arkts-watch.md
浏览文件 @
4c3347df
# \@Watch:状态变量更改通知
# \@Watch
装饰器
:状态变量更改通知
\@
Watch应用于对状态变量的监听。如果开发者需要关注某个状态变量的值是否改变,可以使用
\@
Watch为状态变量设置回调函数。
...
...
zh-cn/application-dev/ui/Readme-CN.md
浏览文件 @
4c3347df
...
...
@@ -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
)
-
页面内的动画
...
...
zh-cn/application-dev/ui/arkts-common-components-button.md
浏览文件 @
4c3347df
# 按钮
# 按钮
(Button)
Button是按钮组件,通常用于响应用户的点击操作,其类型包括胶囊按钮、圆形按钮、普通按钮。Button当做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。具体用法请参考
[
Button
](
../reference/arkui-ts/ts-basic-components-button.md
)
。
...
...
zh-cn/application-dev/ui/arkts-common-components-custom-dialog.md
浏览文件 @
4c3347df
# 自定义弹窗
# 自定义弹窗
(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
({
...
...
zh-cn/application-dev/ui/arkts-common-components-progress-indicator.md
浏览文件 @
4c3347df
# 进度条
# 进度条
(Progress)
Progress是进度条显示组件,显示内容通常为某次目标操作的当前进度。具体用法请参考
[
Progress
](
../reference/arkui-ts/ts-basic-components-progress.md
)
。
...
...
zh-cn/application-dev/ui/arkts-common-components-radio-button.md
浏览文件 @
4c3347df
# 单选框
# 单选框
(Radio)
Radio是单选框组件,通常用于提供相应的用户交互选择项,同一组的Radio中只有一个可以被选中。具体用法请参考
[
Radio
](
../reference/arkui-ts/ts-basic-components-radio.md
)
。
...
...
zh-cn/application-dev/ui/arkts-common-components-switch.md
浏览文件 @
4c3347df
# 切换按钮
# 切换按钮
(Toggle)
Toggle组件提供状态按钮样式,勾选框样式及开关样式,一般用于两种状态之间的切换。具体用法请参考
[
Toggle
](
../reference/arkui-ts/ts-basic-components-toggle.md
)
。
...
...
zh-cn/application-dev/ui/arkts-common-components-text-display.md
浏览文件 @
4c3347df
# 文本显示
# 文本显示
(Text/Span)
Text是文本组件,通常用于展示用户的视图,如显示文章的文字。具体用法可参考
[
Text
](
../reference/arkui-ts/ts-basic-components-text.md
)
。
...
...
zh-cn/application-dev/ui/arkts-common-components-text-input.md
浏览文件 @
4c3347df
# 文本输入
# 文本输入
(TextInput/TextArea)
TextInput、TextArea是输入框组件,通常用于响应用户的输入操作,比如评论区的输入、聊天框的输入、表格的输入等,也可以结合其它组件构建功能页面,例如登录注册页面。具体用法参考
[
TextInput
](
../reference/arkui-ts/ts-basic-components-textinput.md
)
、
[
TextArea
](
../reference/arkui-ts/ts-basic-components-textarea.md
)
。
...
...
zh-cn/application-dev/ui/arkts-common-components-video-player.md
浏览文件 @
4c3347df
# 视频播放
# 视频播放
(Video)
Video组件用于播放视频文件并控制其播放状态,常用于为短视频应用和应用内部视频的列表页面。当视频完整出现时会自动播放,用户点击视频区域则会暂停播放,同时显示播放进度条,通过拖动播放进度条指定视频播放到具体位置。具体用法请参考
[
Video
](
../reference/arkui-ts/ts-media-components-video.md
)
。
...
...
zh-cn/application-dev/ui/arkts-drawing-customization-on-canvas.md
浏览文件 @
4c3347df
# 使用画布绘制自定义图形
# 使用画布绘制自定义图形
(Canvas)
Canvas提供画布组件,用于自定义绘制图形,开发者使用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象在Canvas组件上进行绘制,绘制对象可以是基础形状、文本、图片等。
...
...
zh-cn/application-dev/ui/arkts-geometric-shape-drawing.md
浏览文件 @
4c3347df
# 绘制几何图形
# 绘制几何图形
(Shape)
绘制组件用于在页面绘制图形,Shape组件是绘制组件的父组件,父组件中会描述所有绘制组件均支持的通用属性。具体用法请参考
[
Shape
](
../reference/arkui-ts/ts-drawing-components-shape.md
)
。
...
...
zh-cn/application-dev/ui/arkts-graphics-display.md
浏览文件 @
4c3347df
# 显示图片
# 显示图片
(Image)
开发者经常需要在应用中显示一些图片,例如:按钮中的logo、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现,Image支持多种图片格式,包括png、jpg、bmp、svg和gif,具体用法请参考
[
Image
](
../reference/arkui-ts/ts-basic-components-image.md
)
组件。
...
...
zh-cn/application-dev/ui/arkts-layout-development-create-grid.md
浏览文件 @
4c3347df
# 创建网格
# 创建网格
(Grid/GridItem)
## 概述
...
...
@@ -331,9 +331,3 @@ Grid() {
>**说明:**
>
>cachedCount的增加会增大UI的CPU、内存开销。使用时需要根据实际情况,综合性能和用户体验进行调整。
## 相关实例
如需详细了解网格布局的实现,请参考以下示例:
-
[
分布式计算器
](
https://gitee.com/openharmony/applications_app_samples/tree/master/Preset/EtsDistributedCalc
)
zh-cn/application-dev/ui/arkts-layout-development-create-list.md
浏览文件 @
4c3347df
# 创建列表
# 创建列表
(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() {

在使用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 {

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 }) {

如上图所示,当联系人列表从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 {

在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
)
,在顶部或者底部显示一个刷新或加载视图,完成后再将此视图隐藏。
以下拉刷新为例,其实现主要分成三步:
...
...
zh-cn/application-dev/ui/arkts-layout-development-create-looping.md
浏览文件 @
4c3347df
# 创建轮播
# 创建轮播
(Swiper)
[
Swiper
](
../reference/arkui-ts/ts-container-swiper.md
)
组件提供滑动轮播显示的能力。Swiper本身是一个容器组件,当设置了多个子组件后,可以对这些子组件进行轮播显示。通常,在一些应用首页显示推荐的内容时,需要用到轮播显示的能力。
...
...
zh-cn/application-dev/ui/arkts-layout-development-flex-layout.md
浏览文件 @
4c3347df
# 弹性布局
# 弹性布局
(Flex)
## 概述
...
...
zh-cn/application-dev/ui/arkts-layout-development-grid-layout.md
浏览文件 @
4c3347df
# 栅格布局
# 栅格布局
(GridRow/GridCol)
## 概述
...
...
zh-cn/application-dev/ui/arkts-layout-development-linear.md
浏览文件 @
4c3347df
# 线性布局
# 线性布局
(Row/Column)
## 概述
...
...
zh-cn/application-dev/ui/arkts-layout-development-media-query.md
浏览文件 @
4c3347df
# 媒体查询
# 媒体查询
(mediaquery)
## 概述
...
...
zh-cn/application-dev/ui/arkts-layout-development-relative-layout.md
浏览文件 @
4c3347df
# 相对布局
# 相对布局
(RelativeContainer)
## 概述
...
...
zh-cn/application-dev/ui/arkts-layout-development-stack-layout.md
浏览文件 @
4c3347df
# 层叠布局
# 层叠布局
(Stack)
## 概述
...
...
zh-cn/application-dev/ui/arkts-popup-and-menu-components-menu.md
浏览文件 @
4c3347df
# 菜单
# 菜单
(Menu)
Menu是菜单接口,一般用于鼠标右键弹窗、点击弹窗等。具体用法请参考
[
Menu控制
](
../reference/arkui-ts/ts-universal-attributes-menu.md
)
。
...
...
zh-cn/application-dev/ui/arkts-popup-and-menu-components-popup.md
浏览文件 @
4c3347df
# 气泡提示
# 气泡提示
(Popup)
Popup属性可绑定在组件上显示气泡弹窗提示,设置弹窗内容、交互逻辑和显示状态。主要用于屏幕录制、信息弹出提醒等显示状态。
...
...
zh-cn/application-dev/ui/arkts-routing.md
浏览文件 @
4c3347df
# 页面路由
# 页面路由
(router)
页面路由指在应用程序中实现不同页面之间的跳转和数据传递。OpenHarmony提供了Router模块,通过不同的url地址,可以方便地进行页面路由,轻松地访问不同的页面。本文将从
[
页面跳转
](
#页面跳转
)
、
[
页面返回
](
#页面返回
)
和
[
页面返回前增加一个询问框
](
#页面返回前增加一个询问框
)
几个方面介绍Router模块提供的功能。
...
...
zh-cn/application-dev/website.md
浏览文件 @
4c3347df
...
...
@@ -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
)
-
页面内的动画
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录