Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
dbfbdc30
D
Docs
项目概览
OpenHarmony
/
Docs
大约 1 年 前同步成功
通知
159
Star
292
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看板
体验新版 GitCode,发现更多精彩内容 >>
You need to sign in or sign up before continuing.
提交
dbfbdc30
编写于
4月 11, 2023
作者:
H
HelloCrease
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update docs
Signed-off-by:
N
HelloCrease
<
lian15@huawei.com
>
上级
53af7fb6
变更
11
显示空白变更内容
内联
并排
Showing
11 changed file
with
24 addition
and
13 deletion
+24
-13
zh-cn/application-dev/quick-start/arkts-declarative-ui-description.md
...ation-dev/quick-start/arkts-declarative-ui-description.md
+1
-1
zh-cn/application-dev/quick-start/arkts-link.md
zh-cn/application-dev/quick-start/arkts-link.md
+1
-0
zh-cn/application-dev/quick-start/arkts-observed-and-objectlink.md
...lication-dev/quick-start/arkts-observed-and-objectlink.md
+1
-0
zh-cn/application-dev/quick-start/arkts-other-state-mgmt-functions-overview.md
.../quick-start/arkts-other-state-mgmt-functions-overview.md
+2
-2
zh-cn/application-dev/quick-start/arkts-provide-and-consume.md
.../application-dev/quick-start/arkts-provide-and-consume.md
+3
-2
zh-cn/application-dev/quick-start/arkts-rendering-control-ifelse.md
...ication-dev/quick-start/arkts-rendering-control-ifelse.md
+2
-1
zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001511900496.png
...ference/arkui-ts/figures/zh-cn_image_0000001511900496.png
+0
-0
zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001563060749.png
...ference/arkui-ts/figures/zh-cn_image_0000001563060749.png
+0
-0
zh-cn/application-dev/ui/arkts-layout-development-create-grid.md
...pplication-dev/ui/arkts-layout-development-create-grid.md
+4
-3
zh-cn/application-dev/ui/arkts-layout-development-create-list.md
...pplication-dev/ui/arkts-layout-development-create-list.md
+3
-4
zh-cn/application-dev/ui/arkts-ui-development-overview.md
zh-cn/application-dev/ui/arkts-ui-development-overview.md
+7
-0
未找到文件。
zh-cn/application-dev/quick-start/arkts-declarative-ui-description.md
浏览文件 @
dbfbdc30
...
...
@@ -40,7 +40,7 @@ Column() {
-
Text组件的非必选参数content。
-
```ts
```
ts
// string类型的参数
Text
(
'
test
'
)
// $r形式引入应用资源,可应用于多语言场景
...
...
zh-cn/application-dev/quick-start/arkts-link.md
浏览文件 @
dbfbdc30
...
...
@@ -5,6 +5,7 @@
> **说明:**
>
> 从API version 9开始,该装饰器支持在ArkTS卡片中使用。
...
...
zh-cn/application-dev/quick-start/arkts-observed-and-objectlink.md
浏览文件 @
dbfbdc30
...
...
@@ -5,6 +5,7 @@
> **说明:**
>
> 从API version 9开始,这两个装饰器支持在ArkTS卡片中使用。
...
...
zh-cn/application-dev/quick-start/arkts-other-state-mgmt-functions-overview.md
浏览文件 @
dbfbdc30
...
...
@@ -4,6 +4,6 @@
除了前面章节提到的组件状态管理和应用状态管理,ArkTS还提供了
\@
Watch和$$来为开发者提供更多功能:
-
\@
Watch
用于监听状态变量的变化。
-
[
\@Watch
](
arkts-watch.md
)
用于监听状态变量的变化。
-
$$运算符
:给内置组件提供TS变量的引用,使得TS变量和内置组件的内部状态保持同步。
-
[
$$运算符
](
arkts-two-way-sync.md
)
:给内置组件提供TS变量的引用,使得TS变量和内置组件的内部状态保持同步。
zh-cn/application-dev/quick-start/arkts-provide-and-consume.md
浏览文件 @
dbfbdc30
...
...
@@ -52,7 +52,7 @@
| -------------- | ---------------------------------------- |
| 装饰器参数 | 别名:常量字符串,可选。
<br/>
如果提供了别名,则必须有
\@
Provide的变量和其有相同的别名才可以匹配成功;否则,则需要变量名相同才能匹配成功。 |
| 同步类型 | 双向:从
\@
Provide变量(具体请参见
\@
Provide)到所有
\@
Consume变量,以及相反的方向。双向同步操作与
\@
State和
\@
Link的组合相同。 |
| 允许装饰的变量类型 | Object、class、string、number、boolean、enum类型,以及这些类型的数组。嵌套类型的场景请参考
[
观察变化
](
#观察变化
)
。
<br/>
不支持any,不允许使用undefined和null。
<br/>
必须指定类型。
\@
Provide变量的
\@
Consume变量的类型必须相同。
<br/>
**说明:**
<br/>
-
\@
Consume装饰的变量,在其父节点或者祖先节点上,必须有对应的属性和别名的
\@
Provide装饰的变量。 |
| 允许装饰的变量类型 | Object、class、string、number、boolean、enum类型,以及这些类型的数组。嵌套类型的场景请参考
[
观察变化
](
#观察变化
)
。
<br/>
不支持any,不允许使用undefined和null。
<br/>
必须指定类型。
\@
Provide变量的
\@
Consume变量的类型必须相同。
<br/>
**说明:**
<br/>
\@
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的同步更新。
## 使用场景
...
...
zh-cn/application-dev/quick-start/arkts-rendering-control-ifelse.md
浏览文件 @
dbfbdc30
...
...
@@ -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值所做的修改。
...
...
zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001511900496.png
0 → 100644
浏览文件 @
dbfbdc30
6.0 KB
zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001563060749.png
0 → 100644
浏览文件 @
dbfbdc30
3.7 KB
zh-cn/application-dev/ui/arkts-layout-development-create-grid.md
浏览文件 @
dbfbdc30
...
...
@@ -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
)
...
...
zh-cn/application-dev/ui/arkts-layout-development-create-list.md
浏览文件 @
dbfbdc30
...
...
@@ -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
zh-cn/application-dev/ui/arkts-ui-development-overview.md
浏览文件 @
dbfbdc30
...
...
@@ -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和用户交互的必要元素。方舟开发框架提供了多种交互事件,除了触摸事件、鼠标事件、键盘按键事件、焦点事件等通用事件外,还包括基于通用事件进行进一步识别的手势事件。手势事件有单一手势如点击手势、长按手势、拖动手势、捏合手势、旋转手势、滑动手势,以及通过单一手势事件进行组合的组合手势事件。
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录