Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
53129f0b
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,发现更多精彩内容 >>
未验证
提交
53129f0b
编写于
4月 11, 2023
作者:
O
openharmony_ci
提交者:
Gitee
4月 11, 2023
浏览文件
操作
浏览文件
下载
差异文件
!17149 自检问题修改
Merge pull request !17149 from LiAn/OpenHarmony-3.2-Release
上级
c9320752
2a4fe9ad
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
13 addition
and
8 deletion
+13
-8
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
+0
-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
+2
-3
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/website.md
zh-cn/application-dev/website.md
+0
-1
未找到文件。
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
浏览文件 @
53129f0b
...
...
@@ -105,7 +105,6 @@
-
[
ColumnSplit
](
ts-container-columnsplit.md
)
-
[
Counter
](
ts-container-counter.md
)
-
[
Flex
](
ts-container-flex.md
)
-
[
FlowItem
](
ts-container-flowitem.md
)
-
[
GridCol
](
ts-container-gridcol.md
)
-
[
GridRow
](
ts-container-gridrow.md
)
-
[
Grid
](
ts-container-grid.md
)
...
...
zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001511900496.png
0 → 100644
浏览文件 @
53129f0b
6.0 KB
zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001563060749.png
0 → 100644
浏览文件 @
53129f0b
3.7 KB
zh-cn/application-dev/ui/arkts-layout-development-create-grid.md
浏览文件 @
53129f0b
...
...
@@ -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
浏览文件 @
53129f0b
...
...
@@ -516,7 +516,7 @@ Stack({ alignContent: Alignment.BottomEnd }) {
除了字母索引之外,滚动列表结合多级分类索引在应用开发过程中也很常见,例如购物应用的商品分类页面,多级分类也需要监听列表的滚动位置。
**图14**
字母索引响应联系人列表滚动
**图14**
字母索引响应联系人列表滚动
![
zh-cn_image_0000001563060769
](
figures/zh-cn_image_0000001563060769.gif
)
...
...
@@ -569,6 +569,7 @@ struct ContactsList {
**图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
浏览文件 @
53129f0b
...
...
@@ -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和用户交互的必要元素。方舟开发框架提供了多种交互事件,除了触摸事件、鼠标事件、键盘按键事件、焦点事件等通用事件外,还包括基于通用事件进行进一步识别的手势事件。手势事件有单一手势如点击手势、长按手势、拖动手势、捏合手势、旋转手势、滑动手势,以及通过单一手势事件进行组合的组合手势事件。
...
...
zh-cn/application-dev/website.md
浏览文件 @
53129f0b
...
...
@@ -767,7 +767,6 @@
-
[
ColumnSplit
](
reference/arkui-ts/ts-container-columnsplit.md
)
-
[
Counter
](
reference/arkui-ts/ts-container-counter.md
)
-
[
Flex
](
reference/arkui-ts/ts-container-flex.md
)
-
[
FlowItem
](
reference/arkui-ts/ts-container-flowitem.md
)
-
[
GridCol
](
reference/arkui-ts/ts-container-gridcol.md
)
-
[
GridRow
](
reference/arkui-ts/ts-container-gridrow.md
)
-
[
Grid
](
reference/arkui-ts/ts-container-grid.md
)
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录