Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
211d2eaa
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看板
提交
211d2eaa
编写于
9月 23, 2022
作者:
S
sienna1128
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update docs
Signed-off-by:
N
sienna1128
<
lixiaoyan45@huawei.com
>
上级
4f73f8fb
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
26 addition
and
25 deletion
+26
-25
zh-cn/application-dev/reference/arkui-ts/ts-container-listitemgroup.md
...tion-dev/reference/arkui-ts/ts-container-listitemgroup.md
+1
-1
zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md
...ence/arkui-ts/ts-universal-component-area-change-event.md
+2
-2
zh-cn/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md
...ui-ts/ts-universal-component-visible-area-change-event.md
+1
-1
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md
...ication-dev/reference/arkui-ts/ts-universal-events-key.md
+2
-0
zh-cn/application-dev/ui/arkui-overview.md
zh-cn/application-dev/ui/arkui-overview.md
+14
-15
zh-cn/application-dev/ui/ui-ts-overview.md
zh-cn/application-dev/ui/ui-ts-overview.md
+6
-6
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-container-listitemgroup.md
浏览文件 @
211d2eaa
...
...
@@ -96,7 +96,7 @@ struct ListItemGroupExample {
},
item
=>
item
)
}
.
borderRadius
(
20
)
.
divider
({
strokeWidth
:
1
,
color
:
0xDCDCDC
}
)
// 每行之间的分界线
.
divider
({
strokeWidth
:
1
,
color
:
Color
.
Blue
)
// 每行之间的分界线
})
}
.
width
(
'
90%
'
)
...
...
zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md
浏览文件 @
211d2eaa
...
...
@@ -22,7 +22,7 @@
@
Component
struct
AreaExample
{
@
State
value
:
string
=
'
Text
'
@
State
size
1
:
string
=
''
@
State
size
:
string
=
''
build
()
{
Column
()
{
...
...
@@ -33,7 +33,7 @@ struct AreaExample {
})
.
onAreaChange
((
oldValue
:
Area
,
newValue
:
Area
)
=>
{
console
.
info
(
`Ace: on area change, oldValue is
${
JSON
.
stringify
(
oldValue
)}
value is
${
JSON
.
stringify
(
newValue
)}
`
)
this
.
size
1
=
JSON
.
stringify
(
newValue
)
this
.
size
=
JSON
.
stringify
(
newValue
)
})
Text
(
'
new area is:
\n
'
+
this
.
size
).
margin
({
right
:
30
,
left
:
30
})
}
...
...
zh-cn/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md
浏览文件 @
211d2eaa
# 组件可见区域变化事件
组件可见区域
变化事件指组件在屏幕中显示的面积变化,提供了判断组件是否完全或部分显示在屏幕中的能力,通常适用于像
广告曝光埋点之类的场景。
组件可见区域
是指组件在屏幕中显示的区域,组件可见区域变化事件提供了判断组件是否完全或部分显示在屏幕中的能力,适用于
广告曝光埋点之类的场景。
> **说明:**
>
...
...
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md
浏览文件 @
211d2eaa
...
...
@@ -13,6 +13,8 @@
| ---------------------------------------- | ---- | ---------------------------------------- |
| onKeyEvent(event:
(event?:
KeyEvent)
=
>
void) | 是 | 绑定该方法的组件获焦后,按键动作触发该方法调用,event参数见
[
KeyEvent
](
#keyevent对象说明
)
介绍。 |
>
> 该事件适用于所有可交互组件(默认可获焦),例如Button;对于Text,Image等不可获焦组件,可以设置.focasable(true)后使用按键事件。
## KeyEvent对象说明
...
...
zh-cn/application-dev/ui/arkui-overview.md
浏览文件 @
211d2eaa
...
...
@@ -2,42 +2,41 @@
## 框架介绍
方舟开发框架(简称:ArkUI),是一套构建用户界面的开发框架,提供开发者进行应用UI开发所必需的能力。
方舟开发框架(简称:ArkUI),是一套UI开发框架,提供开发者进行应用UI开发时所必需的能力。
## 基本概念
-
组件:组件是界面搭建与显示的最小单位。开发者通过多种组件的组合,构建出满足自身应用诉求的完整界面。
-
页面:
页面是ArkUI
最小的调度分割单位。开发者可以将应用设计为多个功能页面,每个页面进行单独的文件管理,并通过路由API实现页面的调度管理,以实现应用内功能的解耦。
-
页面:
page页面是方舟开发框架
最小的调度分割单位。开发者可以将应用设计为多个功能页面,每个页面进行单独的文件管理,并通过路由API实现页面的调度管理,以实现应用内功能的解耦。
## 主要特征
-
UI组件:ArkUI不仅提供了多种基础组件,如文本显示、图片显示、按键交互等,也提供了支持视频播放能力的媒体组件。并且针对不同类型设备进行了组件设计,提供了组件在不同平台上的样式适配能力,此种组件称为“多态组件”。
-
布局:ArkUI提供了多种布局方式,除了经典的弹性布局能力,也提供了列表、宫格、栅格布局和适应多分辨率场景开发的原子布局能力。
-
UI组件:方舟开发框架不仅提供了多种基础组件,如文本显示、图片显示、按键交互等,也提供了支持视频播放能力的媒体组件。并且针对不同类型设备进行了组件设计,提供了组件在不同平台上的样式适配能力,此种组件称为“多态组件”。
-
动画:ArkUI对于UI界面的美化,除了组件内置动画效果外,也提供了属性动画、转场动画和自定义动画
能力。
-
布局:UI界面设计离不开布局的参与。方舟开发框架提供了多种布局方式,不仅保留了经典的弹性布局能力,也提供了列表、宫格、栅格布局和适应多分辨率场景开发的原子布局
能力。
-
绘制:ArkUI提供了多种绘制能力,以满足开发者绘制自定义形状的需求,支持图形绘制、颜色填充、文本绘制、图片绘制等
。
-
动画:方舟开发框架对于UI界面的美化,除了组件内置动画效果外,也提供了属性动画、转场动画和自定义动画能力
。
-
交互事件:ArkUI提供了多种交互能力,满足应用在不同平台通过不同输入设备均可正常进行UI交互响应,默认适配了触摸手势、遥控器、鼠标等输入操作,同时也提供事件通知能力
。
-
绘制:方舟开发框架提供了多种绘制能力,以满足开发者绘制自定义形状的需求,支持图形绘制、颜色填充、文本绘制、图片绘制等
。
-
平台API通道:ArkUI提供了API扩展机制,平台能力通过此种机制进行封装,提供风格统一的JS接口
。
-
交互事件:方舟开发框架提供了多种交互能力,满足应用在不同平台通过不同输入设备均可正常进行UI交互响应,默认适配了触摸手势、遥控器、鼠标等输入操作,同时也提供事件通知能力
。
-
平台API通道:方舟开发框架提供了API扩展机制,平台能力通过此种机制进行封装,提供风格统一的JS接口。
## 两种开发范式
ArkUI针对不同使用场景,技术背景的开发者提供了两种开发范式,分别是基于eTS的声明式开发范式(简称“声明式开发范式”)和兼容JS的类Web开发范式(简称“类Web开发范式”)。
-
两种开发范式:方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式,分别是基于eTS的声明式开发范式(简称“声明式开发范式”)和兼容JS的类Web开发范式(简称“类Web开发范式”)。
| 开发范式名称 | 简介 | 适用场景 | 适用人群 |
| -------- | ---------------------------------------- | ---------------- | ------------------- |
| -------- | ---------------------------------------- | ---------------- | ------------------- |
| 声明式开发范式 | 采用TS语言并进行声明式UI语法扩展,从组件、动效和状态管理三个维度提供了UI绘制能力。UI开发更接近自然语义的编程方式,让开发者直观地描述UI界面,不必关心框架如何实现UI绘制和渲染,实现极简高效开发。同时,选用有类型标注的TS语言,引入编译期的类型校验。 | 复杂度较大、团队合作度较高的程序 | 移动系统应用开发人员、系统应用开发人员 |
| 类Web开发范式 | 采用经典的H
TML、CSS、JavaScript三段式开发方式。使用HTML标签文件进行布局搭建,使用CSS文件进行样式描述,使用JavaScript文件进行逻辑处理。UI界面与数据之间通过单向数据绑定的方式建立关联,当数据发生变化时,UI界面自动触发更新。此种开发方式,更接近Web前端开发者的使用习惯,便于开发者快速将已有的Web应用改造成ArkUI
应用。 | 界面较为简单的中小型应用和卡片 | Web前端开发人员 |
| 类Web开发范式 | 采用经典的H
ML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建,使用CSS文件进行样式描述,使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联,当数据发生变化时,UI界面自动触发更新。此种开发方式,更接近Web前端开发者的使用习惯,快速将已有的Web应用改造成方舟开发框架
应用。 | 界面较为简单的中小型应用和卡片 | Web前端开发人员 |
## 框架结构
##
#
框架结构
![
zh-cn_image_0000001183709904
](
figures/zh-cn_image_0000001183709904.png
)
上图所示,类Web开发范式与声明式开发范式的UI后端引擎和语言运行时是共用的,其中,UI后端引擎实现了ArkUI
的六种基本能力。声明式开发范式无需JS Framework进行页面DOM管理,渲染更新链路更为精简,占用内存更少,因此更推荐开发者选用声明式开发范式来搭建应用UI界面。
从上图可以看出,类Web开发范式与声明式开发范式的UI后端引擎和语言运行时是共用的,其中,UI后端引擎实现了方舟开发框架
的六种基本能力。声明式开发范式无需JS Framework进行页面DOM管理,渲染更新链路更为精简,占用内存更少,因此更推荐开发者选用声明式开发范式来搭建应用UI界面。
\ No newline at end of file
zh-cn/application-dev/ui/ui-ts-overview.md
浏览文件 @
211d2eaa
# 概述
ArkUI(声明式开发范式)
是一套开发极简、高性能、跨设备应用的UI开发框架,支持开发者高效的构建跨设备应用UI界面。
基于TS扩展的声明式开发范式的方舟开发框架
是一套开发极简、高性能、跨设备应用的UI开发框架,支持开发者高效的构建跨设备应用UI界面。
## 基础能力
声明式开发范式采用接近自然语义的编程方式,从组件、动效和状态管理三个维度提供UI能力,并提供系统能力接口,便于开发者直观高效地描述UI界面,极简地调用系统能力,不必关心UI绘制和渲染的底层实现,极大地提高开发者的开发效率与体验
。
使用基于TS扩展的声明式开发范式的方舟开发框架,采用更接近自然语义的编程方式,让开发者可以直观地描述UI界面,不必关心框架如何实现UI绘制和渲染,实现极简高效开发。开发框架不仅从组件、动效和状态管理三个维度来提供UI能力,还提供了系统能力接口,实现系统能力的极简调用
。
具体请参考
[
声明式开发范式API
](
../reference/arkui-ts/Readme-CN.md
)
。
请参考
[
基于TS扩展的声明式开发范式API
](
../reference/arkui-ts/ts-universal-events-click.md
)
文档,全面地了解组件,更好地开发应用
。
-
**开箱即用的组件**
框架提供丰富的系统
组件,通过链式调用的方式设置组件属性实现不同的组件样式,达到不同渲染效果。应用开发中,开发者基于组件化思想,将页面分割为多个独立的UI单元,每个UI单元使用系统组件组合拼接,实现代码的封装、复用,具有更浅的结构性和
工程性。
框架提供丰富的系统
预置组件,可以通过链式调用的方式设置系统组件的渲染效果。开发者可以组合系统组件为自定义组件,通过这种方式将页面组件化为一个个独立的UI单元,实现页面不同单元的独立创建、开发和复用,使页面具有更强的
工程性。
-
**丰富的动效接口**
...
...
@@ -22,12 +22,12 @@ ArkUI(声明式开发范式)是一套开发极简、高性能、跨设备应用
-
**状态与数据管理**
状态数据管理
是声明式开发范式的特色,框架提供功能不同的装饰器对UI组件状态和应用程序状态进行管理,为开发者提供了清晰的页面数据传递方式和渲染更新方法,便于开发者完整地构建整个应用的数据更新和UI渲染流程
。
状态数据管理
作为基于TS扩展的声明式开发范式的特色,通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态,两者协作可以使开发者完整地构建整个应用的数据更新和UI渲染
。
-
**系统能力接口**
ArkUI封装了丰富的
[
系统能力接口
](
../reference/apis/Readme-CN.md
)
,实现
系统能力调用的极简开发。
使用基于TS扩展的声明式开发范式的方舟开发框架,还封装了丰富的系统能力接口,开发者可以通过简单的接口调用,实现从UI设计到
系统能力调用的极简开发。
## 整体架构
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录