Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
“995cfb3882f7bff15f7803cc2061e1d562a4c2dd”上不存在“...reference/arkui-ts/ts-framework-framework.md”
未验证 提交 ede87950 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!2574 界面异常显示文档修改 

Merge pull request !2574 from LiAn/master
上级 85474511 79502a9d
隐藏空白更改
内联 并排
Showing with 379 addition and 388 deletion
zh-cn/application-dev/internationalization/i18n-guidelines.md
浏览文件 @ ede87950
...@@ -89,15 +89,15 @@ ...@@ -89,15 +89,15 @@
| 模块 | 接口名称 | 描述 | | 模块 | 接口名称 | 描述 |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| ohos.i18n | getCalendar(locale:&nbsp;string,&nbsp;type?:&nbsp;string):&nbsp;Calendar<sup>8+</sup> | 获取指定locale和type的日历对象。 | | ohos.i18n | getCalendar(locale:&nbsp;string,&nbsp;type?:&nbsp;string):&nbsp;Calendar<sup>8+</sup> | 获取指定locale和type的日历对象。 |
| ohos.i18n | setTime(date:&nbsp;Date)<sup>8+</sup> | 设置日历对象内部的时间日期。 | | ohos.i18n | setTime(date:&nbsp;Date): void<sup>8+</sup> | 设置日历对象内部的时间日期。 |
| ohos.i18n | setTime(time:&nbsp;number)<sup>8+</sup> | 设置日历对象内部的时间日期。 | | ohos.i18n | setTime(time:&nbsp;number): void<sup>8+</sup> | 设置日历对象内部的时间日期。 |
| ohos.i18n | set(year:&nbsp;number,&nbsp;month:&nbsp;number,&nbsp;date:&nbsp;number,&nbsp;hour?:&nbsp;number,&nbsp;minute?:&nbsp;number,&nbsp;second?:&nbsp;number)<sup>8+</sup> | 设置日历对象的年、月、日、时、分、秒。 | | ohos.i18n | set(year:&nbsp;number,&nbsp;month:&nbsp;number,&nbsp;date:&nbsp;number,&nbsp;hour?:&nbsp;number,&nbsp;minute?:&nbsp;number,&nbsp;second?:&nbsp;number): void<sup>8+</sup> | 设置日历对象的年、月、日、时、分、秒。 |
| ohos.i18n | setTimeZone(timezone:&nbsp;string)<sup>8+</sup> | 设置日历对象的时区。 | | ohos.i18n | setTimeZone(timezone:&nbsp;string): void<sup>8+</sup> | 设置日历对象的时区。 |
| ohos.i18n | getTimeZone():&nbsp;string<sup>8+</sup> | 获取日历对象的时区。 | | ohos.i18n | getTimeZone():&nbsp;string<sup>8+</sup> | 获取日历对象的时区。 |
| ohos.i18n | getFirstDayOfWeek():&nbsp;number<sup>8+</sup> | 获取日历对象的一周起始日。 | | ohos.i18n | getFirstDayOfWeek():&nbsp;number<sup>8+</sup> | 获取日历对象的一周起始日。 |
| ohos.i18n | setFirstDayOfWeek(value:&nbsp;number)<sup>8+</sup> | 设置日历对象的一周起始日。 | | ohos.i18n | setFirstDayOfWeek(value:&nbsp;number): void<sup>8+</sup> | 设置日历对象的一周起始日。 |
| ohos.i18n | getMinimalDaysInFirstWeek():&nbsp;number<sup>8+</sup> | 获取一年中第一周的最小天数。 | | ohos.i18n | getMinimalDaysInFirstWeek():&nbsp;number<sup>8+</sup> | 获取一年中第一周的最小天数。 |
| ohos.i18n | setMinimalDaysInFirstWeek(value:&nbsp;number)<sup>8+</sup> | 设置一年中第一周的最小天数。 | | ohos.i18n | setMinimalDaysInFirstWeek(value:&nbsp;number): void<sup>8+</sup> | 设置一年中第一周的最小天数。 |
| ohos.i18n | getDisplayName(locale:&nbsp;string):&nbsp;string<sup>8+</sup> | 获取日历对象的本地化表示。 | | ohos.i18n | getDisplayName(locale:&nbsp;string):&nbsp;string<sup>8+</sup> | 获取日历对象的本地化表示。 |
| ohos.i18n | isWeekend(date?:&nbsp;Date):&nbsp;boolean<sup>8+</sup> | 判断给定的日期是否在日历中是周末。 | | ohos.i18n | isWeekend(date?:&nbsp;Date):&nbsp;boolean<sup>8+</sup> | 判断给定的日期是否在日历中是周末。 |
...@@ -251,7 +251,7 @@ ...@@ -251,7 +251,7 @@
| -------- | -------- | -------- | | -------- | -------- | -------- |
| ohos.i18n | getInstance(locale?:&nbsp;string):&nbsp;IndexUtil<sup>8+</sup> | 实例化字母表索引对象。 | | ohos.i18n | getInstance(locale?:&nbsp;string):&nbsp;IndexUtil<sup>8+</sup> | 实例化字母表索引对象。 |
| ohos.i18n | getIndexList():&nbsp;Array&lt;string&gt;<sup>8+</sup> | 获取当前Locale的索引列表。 | | ohos.i18n | getIndexList():&nbsp;Array&lt;string&gt;<sup>8+</sup> | 获取当前Locale的索引列表。 |
| ohos.i18n | addLocale(locale:&nbsp;string)<sup>8+</sup> | 将新的Locale对应的索引加入当前索引列表。 | | ohos.i18n | addLocale(locale:&nbsp;string): void<sup>8+</sup> | 将新的Locale对应的索引加入当前索引列表。 |
| ohos.i18n | getIndex(text:&nbsp;string):&nbsp;string<sup>8+</sup> | 获取text对应的索引。 | | ohos.i18n | getIndex(text:&nbsp;string):&nbsp;string<sup>8+</sup> | 获取text对应的索引。 |
...@@ -298,7 +298,7 @@ ...@@ -298,7 +298,7 @@
| 模块 | 接口名称 | 描述 | | 模块 | 接口名称 | 描述 |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| ohos.i18n | getLineInstance(locale:&nbsp;string):&nbsp;BreakIterator<sup>8+</sup> | 实例化断行对象。 | | ohos.i18n | getLineInstance(locale:&nbsp;string):&nbsp;BreakIterator<sup>8+</sup> | 实例化断行对象。 |
| ohos.i18n | setLineBreakText(text:&nbsp;string)<sup>8+</sup> | 设置要处理的文本。 | | ohos.i18n | setLineBreakText(text:&nbsp;string): void<sup>8+</sup> | 设置要处理的文本。 |
| ohos.i18n | getLineBreakText():&nbsp;string<sup>8+</sup> | 获取要处理的文本。 | | ohos.i18n | getLineBreakText():&nbsp;string<sup>8+</sup> | 获取要处理的文本。 |
| ohos.i18n | current():&nbsp;number<sup>8+</sup> | 获取当前断行对象在处理文本的位置。 | | ohos.i18n | current():&nbsp;number<sup>8+</sup> | 获取当前断行对象在处理文本的位置。 |
| ohos.i18n | first():&nbsp;number<sup>8+</sup> | 将断行对象设置到第一个可断句的分割点。 | | ohos.i18n | first():&nbsp;number<sup>8+</sup> | 将断行对象设置到第一个可断句的分割点。 |
......
zh-cn/application-dev/internationalization/intl-guidelines.md
浏览文件 @ ede87950
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
``` ```
4. 最小化区域信息 4. 最小化区域信息
调用minimize方法来最大化区域信息，即当存在脚本与地区信息时，对其进行删除。 调用minimize方法来最小化区域信息，即当存在脚本与地区信息时，对其进行删除。
``` ```
var minimizedLocale = localeObj.minimize(); var minimizedLocale = localeObj.minimize();
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
| 模块 | 接口名称 | 描述 | | 模块 | 接口名称 | 描述 |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| ohos.intl | constructor()<sup>8+</sup> | 创建日期时间格式化对象。 | | ohos.intl | constructor()<sup>8+</sup> | 创建日期时间格式化对象。 |
| ohos.intl | constructor(locale:&nbsp;string&nbsp;\|&nbsp;Array,&nbsp;options?:&nbsp;DateTimeOptions) | 创建日期时间格式化对象，并设置提供的Locale和格式化相关属性。 | | ohos.intl | constructor(locale:&nbsp;string&nbsp;\|&nbsp;Array&lt;string&gt;,&nbsp;options?:&nbsp;DateTimeOptions) | 创建日期时间格式化对象，并设置提供的Locale和格式化相关属性。 |
| ohos.intl | format(date:&nbsp;Date):&nbsp;string | 依据DateTimeFormat对象的Locale及其他格式化属性，计算日期时间的格式化表示。 | | ohos.intl | format(date:&nbsp;Date):&nbsp;string | 依据DateTimeFormat对象的Locale及其他格式化属性，计算日期时间的格式化表示。 |
| ohos.intl | formatRange(startDate:&nbsp;Date,&nbsp;endDate:&nbsp;Date):&nbsp;string | 依据DateTimeFormat对象的Locale及其他格式化属性，计算时间段的格式化表示。 | | ohos.intl | formatRange(startDate:&nbsp;Date,&nbsp;endDate:&nbsp;Date):&nbsp;string | 依据DateTimeFormat对象的Locale及其他格式化属性，计算时间段的格式化表示。 |
| ohos.intl | resolvedOptions():&nbsp;DateTimeOptions | 获取DateTimeFormat对象的相关属性。 | | ohos.intl | resolvedOptions():&nbsp;DateTimeOptions | 获取DateTimeFormat对象的相关属性。 |
...@@ -119,7 +119,7 @@ ...@@ -119,7 +119,7 @@
| 模块 | 接口名称 | 描述 | | 模块 | 接口名称 | 描述 |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| ohos.intl | constructor()<SUP>8+</SUP> | 创建数字格式化对象。 | | ohos.intl | constructor()<SUP>8+</SUP> | 创建数字格式化对象。 |
| ohos.intl | constructor(locale:&nbsp;string&nbsp;\|&nbsp;Array,&nbsp;options?:&nbsp;NumberOptions) | 创建数字格式化对象，并设置提供的locale和格式化相关属性。 | | ohos.intl | constructor(locale:&nbsp;string&nbsp;\|&nbsp;Array&lt;string&gt;,&nbsp;options?:&nbsp;NumberOptions) | 创建数字格式化对象，并设置提供的locale和格式化相关属性。 |
| ohos.intl | format(number:&nbsp;number):&nbsp;string | 依据NumberFormat对象的Locale及其他格式化属性，计算数字的格式化表示。 | | ohos.intl | format(number:&nbsp;number):&nbsp;string | 依据NumberFormat对象的Locale及其他格式化属性，计算数字的格式化表示。 |
| ohos.intl | resolvedOptions():&nbsp;NumberOptions | 获取NumberFormat对象的相关属性。 | | ohos.intl | resolvedOptions():&nbsp;NumberOptions | 获取NumberFormat对象的相关属性。 |
...@@ -167,7 +167,7 @@ ...@@ -167,7 +167,7 @@
| 模块 | 接口名称 | 描述 | | 模块 | 接口名称 | 描述 |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| ohos.intl | constructor()<sup>8+</sup> | 创建排序对象。 | | ohos.intl | constructor()<sup>8+</sup> | 创建排序对象。 |
| ohos.intl | constructor(locale:&nbsp;string&nbsp;\|&nbsp;Array,&nbsp;options?:&nbsp;CollatorOptions)<sup>8+</sup> | 创建排序对象，并设置提供的locale和其他相关属性。 | | ohos.intl | constructor(locale:&nbsp;string&nbsp;\|&nbsp;Array&lt;string&gt;,&nbsp;options?:&nbsp;CollatorOptions)<sup>8+</sup> | 创建排序对象，并设置提供的locale和其他相关属性。 |
| ohos.intl | compare(first:&nbsp;string,&nbsp;second:&nbsp;string):&nbsp;number<sup>8+</sup> | 依据排序对象的Locale及其属性，计算两个字符串的比较结果。 | | ohos.intl | compare(first:&nbsp;string,&nbsp;second:&nbsp;string):&nbsp;number<sup>8+</sup> | 依据排序对象的Locale及其属性，计算两个字符串的比较结果。 |
| ohos.intl | resolvedOptions():&nbsp;CollatorOptions<sup>8+</sup> | 获取排序对象的相关属性。 | | ohos.intl | resolvedOptions():&nbsp;CollatorOptions<sup>8+</sup> | 获取排序对象的相关属性。 |
...@@ -215,7 +215,7 @@ ...@@ -215,7 +215,7 @@
| 模块 | 接口名称 | 描述 | | 模块 | 接口名称 | 描述 |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| ohos.intl | constructor()<sup>8+</sup> | 创建单复数对象。 | | ohos.intl | constructor()<sup>8+</sup> | 创建单复数对象。 |
| ohos.intl | constructor(locale:&nbsp;string&nbsp;\|&nbsp;Array,&nbsp;options?:&nbsp;PluralRulesOptions)<sup>8+</sup> | 创建单复数对象，并设置提供的locale和其他相关属性。 | | ohos.intl | constructor(locale:&nbsp;string&nbsp;\|&nbsp;Array&lt;string&gt;,&nbsp;options?:&nbsp;PluralRulesOptions)<sup>8+</sup> | 创建单复数对象，并设置提供的locale和其他相关属性。 |
| ohos.intl | select(n:&nbsp;number):&nbsp;string<sup>8+</sup> | 依据单复数对象的Locale及其他格式化属性，计算数字的单复数类别。 | | ohos.intl | select(n:&nbsp;number):&nbsp;string<sup>8+</sup> | 依据单复数对象的Locale及其他格式化属性，计算数字的单复数类别。 |
...@@ -254,9 +254,9 @@ ...@@ -254,9 +254,9 @@
| 模块 | 接口名称 | 描述 | | 模块 | 接口名称 | 描述 |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| ohos.intl | constructor()<sup>8+</sup> | 创建相对时间格式化对象。 | | ohos.intl | constructor()<sup>8+</sup> | 创建相对时间格式化对象。 |
| ohos.intl | constructor(locale:&nbsp;string&nbsp;\|&nbsp;Array,&nbsp;options?:&nbsp;RelativeTimeFormatInputOptions)<sup>8+</sup> | 创建相对时间格式化对象，并设置提供的locale和格式化相关属性。 | | ohos.intl | constructor(locale:&nbsp;string&nbsp;\|&nbsp;Array&lt;string&gt;,&nbsp;options?:&nbsp;RelativeTimeFormatInputOptions)<sup>8+</sup> | 创建相对时间格式化对象，并设置提供的locale和格式化相关属性。 |
| ohos.intl | format(value:&nbsp;number,&nbsp;unit:&nbsp;string):&nbsp;string<sup>8+</sup> | 依据相对时间格式化对象的Locale及其他格式化属性，计算相对时间的格式化表示。 | | ohos.intl | format(value:&nbsp;number,&nbsp;unit:&nbsp;string):&nbsp;string<sup>8+</sup> | 依据相对时间格式化对象的Locale及其他格式化属性，计算相对时间的格式化表示。 |
| ohos.intl | formatToParts(value:&nbsp;number,&nbsp;unit:&nbsp;string):&nbsp;Array<sup>8+</sup> | 依据相对时间格式化对象的Locale及其他格式化属性，返回相对时间格式化表示的各个部分。 | | ohos.intl | formatToParts(value:&nbsp;number,&nbsp;unit:&nbsp;string):&nbsp;Array&lt;object&gt;<sup>8+</sup> | 依据相对时间格式化对象的Locale及其他格式化属性，返回相对时间格式化表示的各个部分。 |
| ohos.intl | resolvedOptions():&nbsp;RelativeTimeFormatResolvedOptions<sup>8+</sup> | 获取相对时间格式化对象的相关属性。 | | ohos.intl | resolvedOptions():&nbsp;RelativeTimeFormatResolvedOptions<sup>8+</sup> | 获取相对时间格式化对象的相关属性。 |
...@@ -270,7 +270,7 @@ ...@@ -270,7 +270,7 @@
var relativeTimeFormat = new intl.RelativeTimeFormat(); var relativeTimeFormat = new intl.RelativeTimeFormat();
``` ```
另一种方法是使用开发者提供的Locale和格式化参数来创建数字格式化对象。其中，格式化参数是可选的，完整的参数列表参见[ RelativeTimeFormatInputOptions](../reference/apis/js-apis-intl.md)。 另一种方法是使用开发者提供的Locale和格式化参数来创建相对时间格式化对象。其中，格式化参数是可选的，完整的参数列表参见[ RelativeTimeFormatInputOptions](../reference/apis/js-apis-intl.md)。
``` ```
var relativeTimeFormat = new intl.RelativeTimeFormat("zh-CN", {numeric: "always", style: "long"}; var relativeTimeFormat = new intl.RelativeTimeFormat("zh-CN", {numeric: "always", style: "long"};
...@@ -294,7 +294,7 @@ ...@@ -294,7 +294,7 @@
var formatResult = relativeTimeFormat.formatToParts(number, unit); var formatResult = relativeTimeFormat.formatToParts(number, unit);
``` ```
4. 相对时间格式化对象的相关属性 4. 访问相对时间格式化对象的相关属性
RelativeTimeFormat的resolvedOptions方法会返回一个对象，该对象包含了RelativeTimeFormat对象的所有相关属性及其值，完整的属性列表参见[ RelativeTimeFormatResolvedOptions](../reference/apis/js-apis-intl.md)。 RelativeTimeFormat的resolvedOptions方法会返回一个对象，该对象包含了RelativeTimeFormat对象的所有相关属性及其值，完整的属性列表参见[ RelativeTimeFormatResolvedOptions](../reference/apis/js-apis-intl.md)。
``` ```
......
zh-cn/application-dev/reference/apis/Readme-CN.md
浏览文件 @ ede87950
...@@ -83,16 +83,16 @@ ...@@ -83,16 +83,16 @@
- [事件注入](js-apis-inputeventclient.md) - [事件注入](js-apis-inputeventclient.md)
- 基本功能 - 基本功能
- [应用上下文](js-apis-system-app.md) - [应用上下文](js-apis-system-app.md)
- [日志打印](js-apis-basic-features-logs.md) - [日志打印](js-apis-logs.md)
- [页面路由](js-apis-router.md) - [页面路由](js-apis-router.md)
- [弹窗](js-apis-prompt.md) - [弹窗](js-apis-prompt.md)
- [应用配置](js-apis-system-configuration.md) - [应用配置](js-apis-system-configuration.md)
- [定时器](js-apis-basic-features-timer.md) - [定时器](js-apis-timer.md)
- [锁屏管理](js-apis-screen-lock.md) - [锁屏管理](js-apis-screen-lock.md)
- [设置系统时间](js-apis-system-time.md) - [设置系统时间](js-apis-system-time.md)
- [壁纸](js-apis-wallpaper.md) - [壁纸](js-apis-wallpaper.md)
- [剪贴板](js-apis-pasteboard.md) - [剪贴板](js-apis-pasteboard.md)
- [动画](js-apis-basic-features-animator.md) - [动画](js-apis-animator.md)
- [WebGL](js-apis-webgl.md) - [WebGL](js-apis-webgl.md)
- [WebGL2](js-apis-webgl2.md) - [WebGL2](js-apis-webgl2.md)
- [屏幕截图](js-apis-screenshot.md) - [屏幕截图](js-apis-screenshot.md)
......
zh-cn/application-dev/reference/apis/js-apis-basic-features-logs.md → zh-cn/application-dev/reference/apis/js-apis-logs.md
浏览文件 @ ede87950
# 日志打印 # 日志打印
## 导入模块
无需导入。
## 权限列表
无
## console.debug ## console.debug
debug(message: string): void debug(message: string): void
......
zh-cn/application-dev/reference/apis/js-apis-basic-features-timer.md → zh-cn/application-dev/reference/apis/js-apis-timer.md
浏览文件 @ ede87950
# 定时器 # 定时器
## 导入模块
无需导入。
## 权限列表
无
## setTimeout ## setTimeout
setTimeout(handler[,delay[,…args]]): number setTimeout(handler[,delay[,…args]]): number
......
zh-cn/application-dev/ui/arkui-overview.md
浏览文件 @ ede87950
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
| **开发范式名称** | **语言生态** | **UI更新方式** | **适用场景** | **适用人群** | | **开发范式名称** | **语言生态** | **UI更新方式** | **适用场景** | **适用人群** |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| 类Web开发范式 | JS语言 | 数据驱动更新 | 界面较为简单的类小程序应用和卡片 | Web前端开发人员 | | 类Web开发范式 | JS语言 | 数据驱动更新 | 界面较为简单的程序应用和卡片 | Web前端开发人员 |
| 声明式开发范式 | 扩展的TS语言（eTS） | 数据驱动更新 | 复杂度较大、团队合作度较高的程序 | 移动系统应用开发人员、系统应用开发人员 | | 声明式开发范式 | 扩展的TS语言（eTS） | 数据驱动更新 | 复杂度较大、团队合作度较高的程序 | 移动系统应用开发人员、系统应用开发人员 |
......
zh-cn/application-dev/ui/js-framework-file.md
浏览文件 @ ede87950
...@@ -9,6 +9,7 @@ JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如 ...@@ -9,6 +9,7 @@ JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如
![zh-cn_image_0000001127284926](figures/zh-cn_image_0000001127284926.png) ![zh-cn_image_0000001127284926](figures/zh-cn_image_0000001127284926.png)
**图2** 多实例资源共享目录结构 **图2** 多实例资源共享目录结构
![zh-cn_image_0000001173164777](figures/zh-cn_image_0000001173164777.png) ![zh-cn_image_0000001173164777](figures/zh-cn_image_0000001173164777.png)
目录结构中文件分类如下： 目录结构中文件分类如下：
......
zh-cn/application-dev/ui/js-framework-syntax-css.md
浏览文件 @ ede87950
...@@ -4,11 +4,12 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认 ...@@ -4,11 +4,12 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认
## 尺寸单位 ## 尺寸单位
1. 逻辑像素px（文档中以&lt;length&gt;表示）： - 逻辑像素px（文档中以&lt;length&gt;表示）：
1. 默认屏幕具有的逻辑宽度为720px（配置见[配置文件](js-framework-js-tag.md)中的window小节），实际显示时会将页面布局缩放至屏幕实际宽度，如100px在实际宽度为1440物理像素的屏幕上，实际渲染为200物理像素（从720px向1440物理像素，所有尺寸放大2倍）。
2. 额外配置autoDesignWidth为true时（配置见[配置文件](js-framework-js-tag.md)中的window小节），逻辑像素px将按照屏幕密度进行缩放，如100px在屏幕密度为3的设备上，实际渲染为300物理像素。应用需要适配多种设备时，建议采用此方法。
2. 百分比（文档中以&lt;percentage&gt;表示）：表示该组件占父组件尺寸的百分比，如组件的width设置为50%，代表其宽度为父组件的50%。 - 默认屏幕具有的逻辑宽度为720px（配置见[配置文件](js-framework-js-tag.md)中的window小节），实际显示时会将页面布局缩放至屏幕实际宽度，如100px在实际宽度为1440物理像素的屏幕上，实际渲染为200物理像素（从720px向1440物理像素，所有尺寸放大2倍）。
- 额外配置autoDesignWidth为true时（配置见[配置文件](js-framework-js-tag.md)中的window小节），逻辑像素px将按照屏幕密度进行缩放，如100px在屏幕密度为3的设备上，实际渲染为300物理像素。应用需要适配多种设备时，建议采用此方法。
- 百分比（文档中以&lt;percentage&gt;表示）：表示该组件占父组件尺寸的百分比，如组件的width设置为50%，代表其宽度为父组件的50%。
## 样式导入 ## 样式导入
......
zh-cn/application-dev/ui/js-framework-syntax-hml.md
浏览文件 @ ede87950
...@@ -184,7 +184,7 @@ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获 ...@@ -184,7 +184,7 @@ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获
<!-- 绑定事件回调函数，但阻止事件向下传递。5+ --> <!-- 绑定事件回调函数，但阻止事件向下传递。5+ -->
<div grab:touchstart.capture="touchstartfunc"></div> <div grab:touchstart.capture="touchstartfunc"></div>
</div> </div>
``` ```
``` ```
// xxx.js // xxx.js
...@@ -215,6 +215,7 @@ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获 ...@@ -215,6 +215,7 @@ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获
<text>{{index}}.{{value.name}}</text> <text>{{index}}.{{value.name}}</text>
</div> </div>
</div> </div>
``` ```
``` ```
......
zh-cn/application-dev/ui/ts-application-states-apis-environment.md
浏览文件 @ ede87950
# 环境变量 # 环境变量
**Environment**是框架在应用程序启动时创建的单例对象，它为**AppStorage**提供了一系列应用程序需要的环境状态属性，这些属性描述了应用程序运行的设备环境。**Environment**及其属性是不可变的，所有属性值类型均为简单类型。如下示例展示了从**Environment**获取语音环境： Environment是框架在应用程序启动时创建的单例对象，它为AppStorage提供了一系列应用程序需要的环境状态属性，这些属性描述了应用程序运行的设备环境。Environment及其属性是不可变的，所有属性值类型均为简单类型。如下示例展示了从Environment获取语音环境：
``` ```
...@@ -8,13 +8,12 @@ Environment.EnvProp("accessibilityEnabled", "default"); ...@@ -8,13 +8,12 @@ Environment.EnvProp("accessibilityEnabled", "default");
var enable = AppStorageGet("accessibilityEnabled"); var enable = AppStorageGet("accessibilityEnabled");
``` ```
accessibilityEnabled是Environment提供默认系统变量识别符。首先需要将对应系统属性绑定到AppStorage中，再通过AppStorage中的方法或者装饰器访问对应系统的属性数据。
**accessibilityEnabled**是**Environment**提供默认系统变量识别符。首先需要将对应系统属性绑定到AppStorage中，再通过AppStorage中的方法或者装饰器访问对应系统的属性数据。
## Environment接口 ## Environment接口
| **key** | 参数 | 返回值 | **说明** | | key | 参数 | 返回值 | 说明 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| EnvProp | key:&nbsp;string,<br/>defaultValue:&nbsp;any | boolean | 关联此系统项到AppStorage中，建议在app启动时使用此接口。如果该属性在AppStorage已存在，返回false。请勿使用AppStorage中的变量，在调用此方法关联环境变量。 | | EnvProp | key:&nbsp;string,<br/>defaultValue:&nbsp;any | boolean | 关联此系统项到AppStorage中，建议在app启动时使用此接口。如果该属性在AppStorage已存在，返回false。请勿使用AppStorage中的变量，在调用此方法关联环境变量。 |
| EnvProps | keys:&nbsp;{<br/>key:&nbsp;string,<br/>defaultValue:&nbsp;any<br/>}[] | void | 关联此系统项数组到AppStorage中。 | | EnvProps | keys:&nbsp;{<br/>key:&nbsp;string,<br/>defaultValue:&nbsp;any<br/>}[] | void | 关联此系统项数组到AppStorage中。 |
...@@ -23,7 +22,7 @@ var enable = AppStorageGet("accessibilityEnabled"); ...@@ -23,7 +22,7 @@ var enable = AppStorageGet("accessibilityEnabled");
## Environment内置的环境变量 ## Environment内置的环境变量
| **key** | **类型** | **说明** | | key | 类型 | 说明 |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| accessibilityEnabled | boolean | 无障碍屏幕朗读是否启用。 | | accessibilityEnabled | boolean | 无障碍屏幕朗读是否启用。 |
| colorMode | ColorMode | 深浅色模式，可选值为：<br/>-&nbsp;ColorMode.LIGHT：浅色模式；<br/>-&nbsp;ColorMode.DARK：深色模式。 | | colorMode | ColorMode | 深浅色模式，可选值为：<br/>-&nbsp;ColorMode.LIGHT：浅色模式；<br/>-&nbsp;ColorMode.DARK：深色模式。 |
......
zh-cn/application-dev/ui/ts-application-states-apis-persistentstorage.md
浏览文件 @ ede87950
# 持久化数据管理 # 持久化数据管理
方舟开发框架通过**PersistentStorage**类提供了一些静态方法用来管理应用持久化数据，可以将特定标记的持久化数据链接到AppStorage中，并由AppStorage接口访问对应持久化数据，或者通过@StorageLink装饰器来访问对应key的变量。 方舟开发框架通过PersistentStorage类提供了一些静态方法用来管理应用持久化数据，可以将特定标记的持久化数据链接到AppStorage中，并由AppStorage接口访问对应持久化数据，或者通过@StorageLink装饰器来访问对应key的变量。
| 方法 | 参数说明 | 返回值 | 定义 | | 方法 | 参数说明 | 返回值 | 定义 |
......
zh-cn/application-dev/ui/ts-application-states-appstorage.md
浏览文件 @ ede87950
# 应用程序的数据存储 # 应用程序的数据存储
**AppStorage**是应用程序中的单例对象，由UI框架在应用程序启动时创建，在应用程序退出时销毁，为应用程序范围内的可变状态属性提供中央存储。**AppStorage**包含整个应用程序中需要访问的所有状态属性，只要应用程序保持运行，**AppStorage**就会保存所有属性及属性值，属性值可以通过唯一的键值进行访问。 AppStorage是应用程序中的单例对象，由UI框架在应用程序启动时创建，在应用程序退出时销毁，为应用程序范围内的可变状态属性提供中央存储。AppStorage包含整个应用程序中需要访问的所有状态属性，只要应用程序保持运行，AppStorage就会保存所有属性及属性值，属性值可以通过唯一的键值进行访问。
UI组件可以通过装饰器将应用程序状态数据与**AppStorage**进行同步，应用业务逻辑的实现也可以通过接口访问**AppStorage**。 UI组件可以通过装饰器将应用程序状态数据与AppStorage进行同步，应用业务逻辑的实现也可以通过接口访问AppStorage。
**AppStorage**的选择状态属性可以与不同的数据源或数据接收器同步，这些数据源和接收器可以是设备上的本地或远程，并具有不同的功能，如数据持久性。这样的数据源和接收器可以独立于UI在业务逻辑中实现。 AppStorage的选择状态属性可以与不同的数据源或数据接收器同步，这些数据源和接收器可以是设备上的本地或远程，并具有不同的功能，如数据持久性。这样的数据源和接收器可以独立于UI在业务逻辑中实现。
默认情况下，**AppStorage**中的属性是可变的，**AppStorage**还可使用不可变（只读）属性。 默认情况下，AppStorage中的属性是可变的，AppStorage还可使用不可变（只读）属性。
## AppStorage接口 ## AppStorage接口
...@@ -18,9 +18,9 @@ UI组件可以通过装饰器将应用程序状态数据与**AppStorage**进行 ...@@ -18,9 +18,9 @@ UI组件可以通过装饰器将应用程序状态数据与**AppStorage**进行
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| SetAndLink | key:&nbsp;string,<br/>defaultValue:&nbsp;T | @Link | 与Link接口类似，如果当前的key保存于AppStorage，则返回该key对应的value。如果该key未被创建，则创建一个对应default值的Link返回。 | | SetAndLink | key:&nbsp;string,<br/>defaultValue:&nbsp;T | @Link | 与Link接口类似，如果当前的key保存于AppStorage，则返回该key对应的value。如果该key未被创建，则创建一个对应default值的Link返回。 |
| Set | key:&nbsp;string,<br/>newValue:&nbsp;T | void | 对已保存的key值，替换其value值。 | | Set | key:&nbsp;string,<br/>newValue:&nbsp;T | void | 对已保存的key值，替换其value值。 |
| Link | key:&nbsp;string | @Link | 如果存在具有给定键的数据，则返回到此属性的双向数据绑定，该双向绑定意味着变量或者组件对数据的更改将同步到**AppStorage**，通过**AppStorage**对数据的修改将同步到变量或者组件。如果具有此键的属性不存在或属性为只读，则返回**undefined**。 | | Link | key:&nbsp;string | @Link | 如果存在具有给定键的数据，则返回到此属性的双向数据绑定，该双向绑定意味着变量或者组件对数据的更改将同步到AppStorage，通过AppStorage对数据的修改将同步到变量或者组件。如果具有此键的属性不存在或属性为只读，则返回undefined。 |
| SetAndProp | propName:&nbsp;string,<br/>defaultValue:&nbsp;S | @Prop | 与Prop接口类似，如果当前的key保存于AppStorage，则返回该key对应的value。如果该key未被创建，则创建一个对应default值的Prop返回。 | | SetAndProp | propName:&nbsp;string,<br/>defaultValue:&nbsp;S | @Prop | 与Prop接口类似，如果当前的key保存于AppStorage，则返回该key对应的value。如果该key未被创建，则创建一个对应default值的Prop返回。 |
| Prop | key:&nbsp;string | @Prop | 如果存在具有给定键的属性，则返回此属性的单向数据绑定。该单向绑定意味着只能通过**AppStorage**将属性的更改同步到变量或者组件。该方法返回的变量为不可变变量，适用于可变和不可变的状态属性，如果具有此键的属性不存在则返回**undefined**。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;prop方法对应的属性值类型为简单类型。 | | Prop | key:&nbsp;string | @Prop | 如果存在具有给定键的属性，则返回此属性的单向数据绑定。该单向绑定意味着只能通过AppStorage将属性的更改同步到变量或者组件。该方法返回的变量为不可变变量，适用于可变和不可变的状态属性，如果具有此键的属性不存在则返回undefined。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;prop方法对应的属性值类型为简单类型。 |
| SetOrCreate | key:&nbsp;string,<br/>newValue:&nbsp;T | boolean | 如果已存在与给定键名字相同的属性，如果此属性可以被更改则替换其value值且返回true，否则不替换且返回false。<br/>如果不存在存在与给定键名字相同的属性,&nbsp;则创建一个键为key,&nbsp;值为newValue的属性，属性值不支持null和undefined。 | | SetOrCreate | key:&nbsp;string,<br/>newValue:&nbsp;T | boolean | 如果已存在与给定键名字相同的属性，如果此属性可以被更改则替换其value值且返回true，否则不替换且返回false。<br/>如果不存在存在与给定键名字相同的属性,&nbsp;则创建一个键为key,&nbsp;值为newValue的属性，属性值不支持null和undefined。 |
| Get | key:&nbsp;string | T或undefined | 通过此接口获取对应key值的value。 | | Get | key:&nbsp;string | T或undefined | 通过此接口获取对应key值的value。 |
| Has | propName:&nbsp;string | boolean | 判断对应键值的属性是否存在。 | | Has | propName:&nbsp;string | boolean | 判断对应键值的属性是否存在。 |
...@@ -35,19 +35,19 @@ UI组件可以通过装饰器将应用程序状态数据与**AppStorage**进行 ...@@ -35,19 +35,19 @@ UI组件可以通过装饰器将应用程序状态数据与**AppStorage**进行
## AppStorage与组件同步 ## AppStorage与组件同步
在[管理组件拥有的状态](ts-component-states-state.md)中，已经定义了如何将组件的状态变量与父组件或祖先组件中的**@State**装饰的状态变量同步，主要包括**@Prop**、**@Link**、**@Consume**。 在[管理组件拥有的状态](ts-component-states-state.md)中，已经定义了如何将组件的状态变量与父组件或祖先组件中的@State装饰的状态变量同步，主要包括@Prop、@Link、@Consume。
本章节定义如何将组件变量与**AppStorage**同步，主要提供**@StorageLink**和**@StorageProp**装饰器。 本章节定义如何将组件变量与AppStorage同步，主要提供@StorageLink和@StorageProp装饰器。
### @StorageLink装饰器 ### @StorageLink装饰器
组件通过使用@StorageLink(key)装饰的状态变量，与**AppStorage**建立双向数据绑定，**key**为**AppStorage**中的属性键值。当创建包含@StorageLink的状态变量的组件时，该状态变量的值将使用**AppStorage**中的值进行初始化。在UI组件中对@StorageLink的状态变量所做的更改将同步到**AppStorage**，并从**AppStorage**同步到任何其他绑定实例中，如**PersistentStorage**或其他绑定的UI组件。 组件通过使用@StorageLink(key)装饰的状态变量，与AppStorage建立双向数据绑定，key为AppStorage中的属性键值。当创建包含@StorageLink的状态变量的组件时，该状态变量的值将使用AppStorage中的值进行初始化。在UI组件中对@StorageLink的状态变量所做的更改将同步到AppStorage，并从AppStorage同步到任何其他绑定实例中，如PersistentStorage或其他绑定的UI组件。
### @StorageProp装饰器 ### @StorageProp装饰器
组件通过使用@StorageProp(key)装饰的状态变量，将与**AppStorage**建立单向数据绑定，**key**标识AppStorage中的属性键值。当创建包含@StoageProp的状态变量的组件时，该状态变量的值将使用**AppStorage**中的值进行初始化。**AppStorage**中的属性值的更改会导致绑定的UI组件进行状态更新。 组件通过使用@StorageProp(key)装饰的状态变量，将与AppStorage建立单向数据绑定，key标识AppStorage中的属性键值。当创建包含@StoageProp的状态变量的组件时，该状态变量的值将使用AppStorage中的值进行初始化。AppStorage中的属性值的更改会导致绑定的UI组件进行状态更新。
## 示例 ## 示例
......
zh-cn/application-dev/ui/ts-attribution-configuration.md
浏览文件 @ ede87950
# 属性配置 # 属性配置
使用属性方法配置组件的属性，属性方法紧随组件，并用**“.”**运算符连接。 使用属性方法配置组件的属性，属性方法紧随组件，并用“.”运算符连接。
- 配置**Text**组件的字体大小属性： - 配置Text组件的字体大小属性：
``` ```
Text('123') Text('123')
.fontSize(12) .fontSize(12)
``` ```
- 使用**“.”**操作进行链式调用并同时配置组件的多个属性，如下所示： - 使用“.”操作进行链式调用并同时配置组件的多个属性，如下所示：
``` ```
Image('a.jpg') Image('a.jpg')
.alt('error.jpg') .alt('error.jpg')
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
``` ```
- 对于内置组件，框架还为其属性预定义了一些枚举类型，供开发人员调用，枚举值可以作为参数传递。枚举类型必须满足参数类型要求，有关特定属性的枚举类型定义的详细信息。可以按以下方式配置**Text**组件的颜色和字体属性： - 对于内置组件，框架还为其属性预定义了一些枚举类型，供开发人员调用，枚举值可以作为参数传递。枚举类型必须满足参数类型要求，有关特定属性的枚举类型定义的详细信息。可以按以下方式配置Text组件的颜色和字体属性：
``` ```
Text('hello') Text('hello')
.fontSize(20) .fontSize(20)
......
zh-cn/application-dev/ui/ts-child-component-configuration.md
浏览文件 @ ede87950
# 子组件配置 # 子组件配置
对于支持子组件配置的组件，例如容器组件，在**“{ ... }”**里为组件添加子组件的UI描述。**Column**、**Row**、**Stack**、**Button**、**Grid**和**List**组件都是容器组件。 对于支持子组件配置的组件，例如容器组件，在“{ ... }”里为组件添加子组件的UI描述。Column、Row、Stack、Button、Grid和List组件都是容器组件。
- 以下是简单的**Column**示例： - 以下是简单的Column示例：
``` ```
Column() { Column() {
Text('Hello') Text('Hello')
......
zh-cn/application-dev/ui/ts-component-based-component.md
浏览文件 @ ede87950
# @Component # @Component
**@Component**装饰的**struct**表示该结构体具有组件化能力，能够成为一个独立的组件，这种类型的组件也称为自定义组件，在**build**方法里描述UI结构。自定义组件具有以下特点： @Component装饰的struct表示该结构体具有组件化能力，能够成为一个独立的组件，这种类型的组件也称为自定义组件，在build方法里描述UI结构。自定义组件具有以下特点：
- **可组合：**允许开发人员组合使用内置组件、其他组件、公共属性和方法； - 可组合：允许开发人员组合使用内置组件、其他组件、公共属性和方法；
- **可重用：**自定义组件可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用； - 可重用：自定义组件可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用；
- **生命周期：**生命周期的回调方法可以在组件中配置，用于业务逻辑处理； - 生命周期：生命周期的回调方法可以在组件中配置，用于业务逻辑处理；
- **数据驱动更新：**由状态变量的数据驱动，实现UI自动更新。 - 数据驱动更新：由状态变量的数据驱动，实现UI自动更新。
对组件化的深入描述，请参考[深入理解组件化](ts-a-deep-dive-into-component.md)。 对组件化的深入描述，请参考[深入理解组件化](ts-a-deep-dive-into-component.md)。
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
> - 自定义组件禁止自定义构造函数。 > - 自定义组件禁止自定义构造函数。
如下代码定义了**MyComponent**组件**：** 如下代码定义了MyComponent组件：
``` ```
...@@ -37,10 +37,10 @@ struct MyComponent { ...@@ -37,10 +37,10 @@ struct MyComponent {
``` ```
**MyComponent**的**build**方法会在初始渲染时执行，此外，当组件中的状态发生变化时，**build**方法将再次执行。 MyComponent的build方法会在初始渲染时执行，此外，当组件中的状态发生变化时，build方法将再次执行。
以下代码使用了**MyComponent**组件： 以下代码使用了MyComponent组件：
``` ```
...@@ -57,7 +57,7 @@ struct ParentComponent { ...@@ -57,7 +57,7 @@ struct ParentComponent {
``` ```
可以多次使用**MyComponent**，并在不同的组件中进行重用： 可以多次使用MyComponent，并在不同的组件中进行重用：
``` ```
......
zh-cn/application-dev/ui/ts-component-based-customdialog.md
浏览文件 @ ede87950
# @CustomDialog # @CustomDialog
**@CustomDialog**装饰器用于装饰自定义弹窗。 @CustomDialog装饰器用于装饰自定义弹窗。
``` ```
......
zh-cn/application-dev/ui/ts-component-based-entry.md
浏览文件 @ ede87950
# @Entry # @Entry
用**@Entry**装饰的自定义组件用作页面的默认入口组件，加载页面时，将首先创建并呈现**\@Entry**装饰的自定义组件。 用@Entry装饰的自定义组件用作页面的默认入口组件，加载页面时，将首先创建并呈现@Entry装饰的自定义组件。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 在单个源文件中，最多可以使用**\@Entry**装饰一个自定义组件。 > 在单个源文件中，最多可以使用@Entry装饰一个自定义组件。
**@Entry**的用法如下： @Entry的用法如下：
``` ```
......
zh-cn/application-dev/ui/ts-component-based-extend.md
浏览文件 @ ede87950
# @Extend # @Extend
**@Extend**装饰器将新的属性函数添加到内置组件上，如**Text**、**Column**、**Button**等。通过**\@Extend**装饰器可以快速定义并复用组件的自定义样式。 @Extend装饰器将新的属性函数添加到内置组件上，如Text、Column、Button等。通过@Extend装饰器可以快速定义并复用组件的自定义样式。
``` ```
......
zh-cn/application-dev/ui/ts-component-based-preview.md
浏览文件 @ ede87950
# @Preview # @Preview
用**@Preview**装饰的自定义组件可以在DevEco Studio的预览器上进行预览，加载页面时，将创建并呈现**@Preview**装饰的自定义组件。 用@Preview装饰的自定义组件可以在DevEco Studio的预览器上进行预览，加载页面时，将创建并呈现@Preview装饰的自定义组件。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 在单个源文件中，最多可以使用**@Preview**装饰一个自定义组件。 > 在单个源文件中，最多可以使用@Preview装饰一个自定义组件。
**@Preview**的用法如下： @Preview的用法如下：
``` ```
......
zh-cn/application-dev/ui/ts-component-based-styles.md
浏览文件 @ ede87950
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
@Styles装饰器将新的属性函数添加到基本组件上，如**Text**、**Column**、**Button**等。当前@Styles仅支持[通用属性](../reference/arkui-ts/ts-universal-attributes.md)。通过@Styles装饰器可以快速定义并复用组件的自定义样式。 @Styles装饰器将新的属性函数添加到基本组件上，如Text、Column、Button等。当前@Styles仅支持[通用属性](../reference/arkui-ts/ts-universal-attributes.md)。通过@Styles装饰器可以快速定义并复用组件的自定义样式。
@Styles可以定义在组件内或组件外，在组件外定义时需带上function关键字，组件内定义时不需要。 @Styles可以定义在组件内或组件外，在组件外定义时需带上function关键字，组件内定义时不需要。
......
zh-cn/application-dev/ui/ts-component-creation-re-initialization.md
浏览文件 @ ede87950
...@@ -2,46 +2,46 @@ ...@@ -2,46 +2,46 @@
## 初始创建和渲染 ## 初始创建和渲染
1. 创建父组件**ParentComp**； 1. 创建父组件ParentComp；
2. 本地初始化**ParentComp**的状态变量**isCountDown**； 2. 本地初始化ParentComp的状态变量isCountDown；
3. 执行**ParentComp**的**build**函数； 3. 执行ParentComp的build函数；
4. 创建**Column**内置组件； 4. 创建Column内置组件；
1. 创建**Text**内置组件，设置其文本展示内容，并将**Text**组件实例添加到**Column**中； 1. 创建Text内置组件，设置其文本展示内容，并将Text组件实例添加到Column中；
2. 判断if条件，创建**true**分支上的组件； 2. 判断if条件，创建true分支上的组件；
1. 创建**Image**内置组件，并设置其图片源地址； 1. 创建Image内置组件，并设置其图片源地址；
2. 使用给定的构造函数创建**TimerComponent**； 2. 使用给定的构造函数创建TimerComponent；
1. 创建**TimerComponent**对象； 1. 创建TimerComponent对象；
2. 本地初始化成员变量初始值； 2. 本地初始化成员变量初始值；
3. 使用**TimerComponent**构造函数提供的参数更新成员变量的值； 3. 使用TimerComponent构造函数提供的参数更新成员变量的值；
4. 执行**TimerComponent**的**aboutToAppear**函数； 4. 执行TimerComponent的aboutToAppear函数；
5. 执行**TimerComponent**的**build**函数，创建相应的UI描述结构； 5. 执行TimerComponent的build函数，创建相应的UI描述结构；
3. 创建**Button**内置组件，设置相应的内容。 3. 创建Button内置组件，设置相应的内容。
## 状态更新 ## 状态更新
用户单击按钮时： 用户单击按钮时：
1. **ParentComp**的**isCountDown**状态变量的值更改为false； 1. ParentComp的isCountDown状态变量的值更改为false；
2. 执行**ParentComp**的**build**函数； 2. 执行ParentComp的build函数；
3. **Column**内置组件会被框架重用并执行重新初始化； 3. Column内置组件会被框架重用并执行重新初始化；
4. **Column**的子组件会重用内存中的对象，但会进行重新初始化； 4. Column的子组件会重用内存中的对象，但会进行重新初始化；
1. **Text**内置组件会被重用，但使用新的文本内容进行重新初始化； 1. Text内置组件会被重用，但使用新的文本内容进行重新初始化；
2. 判断if条件，使用false分支上的组件； 2. 判断if条件，使用false分支上的组件；
1. 原来true分支上的组件不在使用，这些组件会进行销毁； 1. 原来true分支上的组件不在使用，这些组件会进行销毁；
1. 创建的**Image**内置组件实例进行销毁； 1. 创建的Image内置组件实例进行销毁；
2. **TimerComponent**组件实例进行销毁，**aboutToDisappear**函数被调用； 2. TimerComponent组件实例进行销毁，aboutToDisappear函数被调用；
2. 创建false分支上的组件； 2. 创建false分支上的组件；
1. 创建**Image**内置组件，并设置其图片源地址； 1. 创建Image内置组件，并设置其图片源地址；
2. 使用给定的构造函数重新创建**TimerComponent**； 2. 使用给定的构造函数重新创建TimerComponent；
3. 新创建的**TimerComponent**进行初始化，并调用**aboutToAppear**函数和**build**函数。 3. 新创建的TimerComponent进行初始化，并调用aboutToAppear函数和build函数。
3. **Button**内置组件会被重用，但使用新的图片源地址。 3. Button内置组件会被重用，但使用新的图片源地址。
## 示例 ## 示例
......
zh-cn/application-dev/ui/ts-component-states-link.md
浏览文件 @ ede87950
# @Link # @Link
**@Link**装饰的变量可以和父组件的**@State**变量建立双向数据绑定： @Link装饰的变量可以和父组件的@State变量建立双向数据绑定：
- **支持多种类型：@Link**变量的值与**@State**变量的类型相同，即class、number、string、boolean或这些类型的数组； - 支持多种类型：@Link变量的值与@State变量的类型相同，即class、number、string、boolean或这些类型的数组；
- **私有：**仅在组件内访问； - 私有：仅在组件内访问；
- **单个数据源：**初始化**@Link**变量的父组件的变量必须是**@State**变量； - 单个数据源：初始化@Link变量的父组件的变量必须是@State变量；
- **双向通信：**子组件对**@Link**变量的更改将同步修改父组件的**@State**变量； - 双向通信：子组件对@Link变量的更改将同步修改父组件的@State变量；
- **创建自定义组件时需要将变量的引用传递给@Link变量：**在创建组件的新实例时，必须使用命名参数初始化所有**@Link**变量。**@Link**变量可以使用**@State**变量或**@Link**变量的引用进行初始化，**@State**变量可以通过'**$**'操作符创建引用。 - 创建自定义组件时需要将变量的引用传递给@Link变量：在创建组件的新实例时，必须使用命名参数初始化所有@Link变量。@Link变量可以使用@State变量或@Link变量的引用进行初始化，@State变量可以通过'$'操作符创建引用。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) 说明：
> **@Link**变量不能在组件内部进行初始化。 > @Link变量不能在组件内部进行初始化。
## 简单类型示例 ## 简单类型示例
...@@ -48,7 +48,7 @@ struct PlayButton { ...@@ -48,7 +48,7 @@ struct PlayButton {
} }
``` ```
**@Link**语义是从'**$**'操作符引出，即**$isPlaying**是**this.isPlaying**内部状态的双向数据绑定。当您单击**PlayButton**时，PlayButton 的**Image**组件和**Text**组件将同时进行刷新。 @Link语义是从'$'操作符引出，即$isPlaying是this.isPlaying内部状态的双向数据绑定。当您单击PlayButton时，PlayButton 的Image组件和Text组件将同时进行刷新。
## 复杂类型示例 ## 复杂类型示例
...@@ -88,7 +88,7 @@ struct Child { ...@@ -88,7 +88,7 @@ struct Child {
} }
``` ```
在上面的示例中，点击**Button1**和**Button2**更改父组件中显示的文本项目列表。 在上面的示例中，点击Button1和Button2更改父组件中显示的文本项目列表。
## @Link、@State和@Prop结合使用示例 ## @Link、@State和@Prop结合使用示例
...@@ -127,8 +127,8 @@ struct ChildB { ...@@ -127,8 +127,8 @@ struct ChildB {
} }
``` ```
上述示例中，ParentView包含ChildA和ChildB两个子组件，ParentView的状态变量**counter**分别初始化ChildA和ChildB。 上述示例中，ParentView包含ChildA和ChildB两个子组件，ParentView的状态变量counter分别初始化ChildA和ChildB。
- ChildB使用**@Link**建立双向状态绑定。当**ChildB**修改**counterRef**状态变量值时，该更改将同步到**ParentView**和**ChildA**共享； - ChildB使用@Link建立双向状态绑定。当ChildB修改counterRef状态变量值时，该更改将同步到ParentView和ChildA共享；
- ChildA使用**@Prop**建立从**ParentView**到自身的单向状态绑定。当**ChildA**修改状态时，**ChildA**将重新渲染，但该更改不会传达给**ParentView**和**ChildB**。 - ChildA使用@Prop建立从ParentView到自身的单向状态绑定。当ChildA修改状态时，ChildA将重新渲染，但该更改不会传达给ParentView和ChildB。
zh-cn/application-dev/ui/ts-component-states-prop.md
浏览文件 @ ede87950
# @Prop # @Prop
**@Prop与@State**有相同的语义，但初始化方式不同。**@Prop**装饰的变量必须使用其父组件提供的**@State**变量进行初始化，允许组件内部修改**@Prop**变量，但更改不会通知给父组件，即**@Prop**属于单向数据绑定。 @Prop与@State有相同的语义，但初始化方式不同。@Prop装饰的变量必须使用其父组件提供的@State变量进行初始化，允许组件内部修改@Prop变量，但更改不会通知给父组件，即@Prop属于单向数据绑定。
**@Prop**状态数据具有以下特征： @Prop状态数据具有以下特征：
- **支持简单类型：**仅支持number、string、boolean简单类型； - 支持简单类型：仅支持number、string、boolean简单类型；
- **私有：**仅在组件内访问； - 私有：仅在组件内访问；
- **支持多个实例：**一个组件中可以定义多个标有**@Prop**的属性； - 支持多个实例：一个组件中可以定义多个标有@Prop的属性；
- **创建自定义组件时将值传递给@Prop变量进行初始化：**在创建组件的新实例时，必须初始化所有@Prop变量，不支持在组件内部进行初始化。 - 创建自定义组件时将值传递给@Prop变量进行初始化：在创建组件的新实例时，必须初始化所有@Prop变量，不支持在组件内部进行初始化。
## 示例 ## 示例
...@@ -63,7 +63,7 @@ struct CountDownComponent { ...@@ -63,7 +63,7 @@ struct CountDownComponent {
} }
``` ```
在上述示例中，当按“+1”或“-1”按钮时，父组件状态发生变化，重新执行**build**方法，此时将创建一个新的**CountDownComponent**组件。父组件的**countDownStartValue**状态属性被用于初始化子组件的**@Prop**变量，当按下子组件的“Try again”按钮时，其**@Prop**变量**count**将被更改，**CountDownComponent**重新渲染。但是**count**值的更改不会影响父组件的**countDownStartValue**值。 在上述示例中，当按“+1”或“-1”按钮时，父组件状态发生变化，重新执行build方法，此时将创建一个新的CountDownComponent组件。父组件的countDownStartValue状态属性被用于初始化子组件的@Prop变量，当按下子组件的“Try again”按钮时，其@Prop变量count将被更改，CountDownComponent重新渲染。但是count值的更改不会影响父组件的countDownStartValue值。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 创建新组件实例时，必须初始化其所有**@Prop**变量。 > 创建新组件实例时，必须初始化其所有@Prop变量。
zh-cn/application-dev/ui/ts-component-states-state.md
浏览文件 @ ede87950
# @State # @State
**@State**装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的**build**方法进行UI刷新。 @State装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的build方法进行UI刷新。
**@State**状态数据具有以下特征： @State状态数据具有以下特征：
- **支持多种类型：**允许**class**、**number**、**boolean**、**string**强类型的按值和按引用类型。允许这些强类型构成的数组，即**Array&lt;class&gt;**、**Array&lt;string&gt;**、**Array&lt;boolean&gt;**、**Array&lt;number&gt;。**不允许**object**和**any。** - 支持多种类型：允许class、number、boolean、string强类型的按值和按引用类型。允许这些强类型构成的数组，即Array&lt;class&gt;、Array&lt;string&gt;、Array&lt;boolean&gt;、Array&lt;number&gt;。不允许object和any。
- **支持多实例：**组件不同实例的内部状态数据独立。 - 支持多实例：组件不同实例的内部状态数据独立。
- **内部私有：**标记为**@State**的属性是私有变量，只能在组件内访问。 - 内部私有：标记为@State的属性是私有变量，只能在组件内访问。
- **需要本地初始化：**必须为所有**@State**变量分配初始值，将变量保持未初始化可能导致框架行为未定义。 - 需要本地初始化：必须为所有@State变量分配初始值，将变量保持未初始化可能导致框架行为未定义。
- **创建自定义组件时支持通过状态变量名设置初始值：**在创建组件实例时，可以通过变量名显式指定**@State**状态属性的初始值**。** - 创建自定义组件时支持通过状态变量名设置初始值：在创建组件实例时，可以通过变量名显式指定@State状态属性的初始值。
## 简单类型的状态属性示例 ## 简单类型的状态属性示例
...@@ -91,11 +91,11 @@ struct MyComponent { ...@@ -91,11 +91,11 @@ struct MyComponent {
在上述示例中： 在上述示例中：
- 用户定义的组件**MyComponent**定义了**@State**状态变量**count**和**title**。如果**count**或**title**的值发生变化，则执行**MyComponent**的**build**方法来重新渲染组件； - 用户定义的组件MyComponent定义了@State状态变量count和title。如果count或title的值发生变化，则执行MyComponent的build方法来重新渲染组件；
- **EntryComponent**中有多个**MyComponent**组件实例，第一个**MyComponent**内部状态的更改不会影响第二个**MyComponent**； - EntryComponent中有多个MyComponent组件实例，第一个MyComponent内部状态的更改不会影响第二个MyComponent；
- 创建**MyComponent**实例时通过变量名给组件内的变量进行初始化，如： - 创建MyComponent实例时通过变量名给组件内的变量进行初始化，如：
``` ```
MyComponent({title: {value: 'Hello, World 2'}, count: 7}) MyComponent({title: {value: 'Hello, World 2'}, count: 7})
``` ```
zh-cn/application-dev/ui/ts-configuration-with-mandatory-parameters.md
浏览文件 @ ede87950
# 必选参数构造配置 # 必选参数构造配置
如果组件的接口定义中包含必选构造参数，则在组件后面的**“()”**中必须配置参数，参数可以使用常量进行赋值。 如果组件的接口定义中包含必选构造参数，则在组件后面的“()”中必须配置参数，参数可以使用常量进行赋值。
例如： 例如：
- **Image**组件的必选参数**src**： - Image组件的必选参数src：
``` ```
Image('http://xyz/a.jpg') Image('http://xyz/a.jpg')
``` ```
- **Text**组件的必选参数**content**： - Text组件的必选参数content：
``` ```
Text('123') Text('123')
``` ```
变量或表达式也可以用于参数赋值，其中表达式返回的结果类型必须满足参数类型要求。例如，传递变量或表达式来构造**Image**和**Text**组件的参数： 变量或表达式也可以用于参数赋值，其中表达式返回的结果类型必须满足参数类型要求。例如，传递变量或表达式来构造Image和Text组件的参数：
``` ```
......
zh-cn/application-dev/ui/ts-custom-component-initialization.md
浏览文件 @ ede87950
...@@ -33,9 +33,9 @@ ...@@ -33,9 +33,9 @@
从上表中可以看出： 从上表中可以看出：
- **@State**变量需要本地初始化，初始化的值可以被构造参数覆盖； - @State变量需要本地初始化，初始化的值可以被构造参数覆盖；
- **@Prop**和**@Link**变量必须且仅通过构造函数参数进行初始化。 - @Prop和@Link变量必须且仅通过构造函数参数进行初始化。
通过构造函数方法初始化成员变量，需要遵循如下规则： 通过构造函数方法初始化成员变量，需要遵循如下规则：
...@@ -54,13 +54,13 @@ ...@@ -54,13 +54,13 @@
从上表中可以看出： 从上表中可以看出：
- 父组件的常规变量可以用于初始化子组件的**@State**变量，但不能用于初始化**@Link**或**@Prop**变量。 - 父组件的常规变量可以用于初始化子组件的@State变量，但不能用于初始化@Link或@Prop变量。
- 父组件的**@State**变量可以初始化子组件的**@Prop**、**@Link（通过$）**或常规变量，但不能初始化子组件的**@State**变量。 - 父组件的@State变量可以初始化子组件的@Prop、@Link（通过$）或常规变量，但不能初始化子组件的@State变量。
- 父组件的**@Link**变量可以初始化子组件的@Link或常规变量。但是初始化子组件的**@State**成员是语法错误，此外不建议初始化**@prop。** - 父组件的@Link变量可以初始化子组件的@Link或常规变量。但是初始化子组件的@State成员是语法错误，此外不建议初始化@prop。
- 父组件的**@Prop**变量可以初始化子组件的常规变量或**@Prop**变量，但不能初始化子组件的**@State**或**@Link**变量。 - 父组件的@Prop变量可以初始化子组件的常规变量或@Prop变量，但不能初始化子组件的@State或@Link变量。
- @StorageLink和@StorageProp不允许由父组件中传递到子组件。 - @StorageLink和@StorageProp不允许由父组件中传递到子组件。
......
zh-cn/application-dev/ui/ts-custom-component-lifecycle-callbacks.md
浏览文件 @ ede87950
...@@ -7,8 +7,8 @@ ...@@ -7,8 +7,8 @@
| 函数名 | 描述 | | 函数名 | 描述 |
| -------- | -------- | | -------- | -------- |
| aboutToAppear | 函数在创建自定义组件的新实例后，在执行其**build**函数之前执行。允许在**aboutToAppear**函数中改变状态变量，更改将在后续执行build函数中生效。 | | aboutToAppear | 函数在创建自定义组件的新实例后，在执行其build函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build函数中生效。 |
| aboutToDisappear | 函数在自定义组件析构消耗之前执行。不允许在**aboutToDisappear**函数中改变状态变量，特别是**@Link**变量的修改可能会导致应用程序行为不稳定。 | | aboutToDisappear | 函数在自定义组件析构消耗之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。 |
| onPageShow | 页面显示时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。 | | onPageShow | 页面显示时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。 |
| onPageHide | 页面消失时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。 | | onPageHide | 页面消失时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。 |
| onBackPress | 当用户点击返回按钮时触发，仅\@Entry修饰的自定义组件生效。<br/>-&nbsp;返回true表示页面自己处理返回逻辑,&nbsp;不进行页面路由。<br/>-&nbsp;返回false表示使用默认的返回逻辑。<br/>-&nbsp;不返回值会作为false处理。 | | onBackPress | 当用户点击返回按钮时触发，仅\@Entry修饰的自定义组件生效。<br/>-&nbsp;返回true表示页面自己处理返回逻辑,&nbsp;不进行页面路由。<br/>-&nbsp;返回false表示使用默认的返回逻辑。<br/>-&nbsp;不返回值会作为false处理。 |
...@@ -49,6 +49,6 @@ struct CountDownTimerComponent { ...@@ -49,6 +49,6 @@ struct CountDownTimerComponent {
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 允许在生命周期函数中使用**Promise**和异步回调函数，比如网络资源获取，定时器设置等； > - 允许在生命周期函数中使用Promise和异步回调函数，比如网络资源获取，定时器设置等；
> >
> - 不允许在生命周期函数中使用**async await**。 > - 不允许在生命周期函数中使用async await。
zh-cn/application-dev/ui/ts-event-configuration.md
浏览文件 @ ede87950
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
``` ```
- 使用匿名函数表达式配置组件的事件方法，要求使用**bind**，以确保函数体中的this引用包含的组件： - 使用匿名函数表达式配置组件的事件方法，要求使用bind，以确保函数体中的this引用包含的组件：
``` ```
// Counter is a private data variable defined in the component. // Counter is a private data variable defined in the component.
Button('add counter') Button('add counter')
......
zh-cn/application-dev/ui/ts-function-build.md
浏览文件 @ ede87950
# build函数 # build函数
**build**函数满足**Builder**构造器接口定义，用于定义组件的声明式UI描述。必须遵循上述**Builder**接口约束，在**build**方法中以声明式方式进行组合自定义组件或系统内置组件，在组件创建和更新场景中都会调用**build**方法。 build函数满足Builder构造器接口定义，用于定义组件的声明式UI描述。必须遵循上述Builder接口约束，在build方法中以声明式方式进行组合自定义组件或系统内置组件，在组件创建和更新场景中都会调用build方法。
``` ```
......
zh-cn/application-dev/ui/ts-general-ui-concepts.md
浏览文件 @ ede87950
...@@ -36,14 +36,14 @@ struct Hello { ...@@ -36,14 +36,14 @@ struct Hello {
上述示例代码描述了简单页面的结构，并介绍了以下基本概念： 上述示例代码描述了简单页面的结构，并介绍了以下基本概念：
- **装饰器：**方舟开发框架定义了一些具有特殊含义的装饰器，用于装饰类、结构、方法和变量。例如，上例中的**@Entry**、**@Component**和**@State**都是装饰器。 - 装饰器：方舟开发框架定义了一些具有特殊含义的装饰器，用于装饰类、结构、方法和变量。例如，上例中的@Entry、@Component和@State都是装饰器。
- **自定义组件：**可重用的UI单元，可以与其他组件组合，如**@Component**装饰的**struct Hello**。 - 自定义组件：可重用的UI单元，可以与其他组件组合，如@Component装饰的struct Hello。
- **UI描述：**声明性描述UI结构，例如**build()**方法中的代码块。 - UI描述：声明性描述UI结构，例如build()方法中的代码块。
- **内置组件：**框架中默认内置的基本组件和布局组件，开发者可以直接调用，如**Column**、**Text**、**Divider**、**Button**等。 - 内置组件：框架中默认内置的基本组件和布局组件，开发者可以直接调用，如Column、Text、Divider、Button等。
- **属性方法：**用于配置组件属性，如**fontSize()**、**width()**、**height()**、**color()**等。 - 属性方法：用于配置组件属性，如fontSize()、width()、height()、color()等。
- **事件方法：**在事件方法的回调中添加组件响应逻辑。例如，为Button组件添加onClick方法，在onClick方法的回调中添加点击响应逻辑。 - 事件方法：在事件方法的回调中添加组件响应逻辑。例如，为Button组件添加onClick方法，在onClick方法的回调中添加点击响应逻辑。
zh-cn/application-dev/ui/ts-other-states-consume-provide.md
浏览文件 @ ede87950
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。Consume在感知到Provide数据的更新后，会触发当前view的重新渲染。 Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。Consume在感知到Provide数据的更新后，会触发当前view的重新渲染。
**表1** @Provide 表1 @Provide
| 名称 | 说明 | | 名称 | 说明 |
| -------- | -------- | | -------- | -------- |
...@@ -11,7 +11,7 @@ Provide作为数据的提供方，可以更新其子孙节点的数据，并触 ...@@ -11,7 +11,7 @@ Provide作为数据的提供方，可以更新其子孙节点的数据，并触
| 初始值 | 必须制定初始值。 | | 初始值 | 必须制定初始值。 |
| 页面重渲染场景 | 触发页面渲染的修改：<br/>-&nbsp;基础类型（boolean，string，number）变量的改变；<br/>-&nbsp;@Observed&nbsp;class类型变量及其属性的修改；<br/>-&nbsp;添加，删除，更新数组中的元素。 | | 页面重渲染场景 | 触发页面渲染的修改：<br/>-&nbsp;基础类型（boolean，string，number）变量的改变；<br/>-&nbsp;@Observed&nbsp;class类型变量及其属性的修改；<br/>-&nbsp;添加，删除，更新数组中的元素。 |
**表2** @Consume 表2 @Consume
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | -------- | -------- |
......
zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md
浏览文件 @ ede87950
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
本章将引入两个新的装饰符@Observed和@ObjectLink： 本章将引入两个新的装饰符@Observed和@ObjectLink：
- **@Observed**应用于类，表示该类中的数据变更被UI页面管理，例如：@Observed class ClassA {}。 - @Observed应用于类，表示该类中的数据变更被UI页面管理，例如：@Observed class ClassA {}。
- **@ObjectLink**应用于被@Observed所装饰类的对象，例如：@ObjectLink a: ClassA。 - @ObjectLink应用于被@Observed所装饰类的对象，例如：@ObjectLink a: ClassA。
## 引入动机 ## 引入动机
......
zh-cn/application-dev/ui/ts-parameterless-configuration.md
浏览文件 @ ede87950
# 无参数构造配置 # 无参数构造配置
组件的接口定义不包含必选构造参数，组件后面的**“()”**中不需要配置任何内容。例如，**Divider**组件不包含构造参数： 组件的接口定义不包含必选构造参数，组件后面的“()”中不需要配置任何内容。例如，Divider组件不包含构造参数：
``` ```
......
zh-cn/application-dev/ui/ts-rending-control-syntax-foreach.md
浏览文件 @ ede87950
# 循环渲染 # 循环渲染
开发框架提供**循环渲染（**ForEach组件）来迭代数组，并为每个数组项创建相应的组件。**ForEach**定义如下： 开发框架提供循环渲染（ForEach组件）来迭代数组，并为每个数组项创建相应的组件。ForEach定义如下：
``` ```
...@@ -18,19 +18,19 @@ ForEach( ...@@ -18,19 +18,19 @@ ForEach(
ForEach(arr: any[],itemGenerator: (item: any, index?: number) =&gt; void, keyGenerator?: (item: any, index?: number) =&gt; string):void ForEach(arr: any[],itemGenerator: (item: any, index?: number) =&gt; void, keyGenerator?: (item: any, index?: number) =&gt; string):void
**表1** 参数说明 表1 参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| arr | any[] | 是 | - | 必须是数组，允许空数组，空数组场景下不会创建子组件。同时允许设置返回值为数组类型的函数，例如arr.slice(1,&nbsp;3)，设置的函数不得改变包括数组本身在内的任何状态变量，如**Array.splice**、**Array.sort**或**Array.reverse**这些改变原数组的函数。 | | arr | any[] | 是 | - | 必须是数组，允许空数组，空数组场景下不会创建子组件。同时允许设置返回值为数组类型的函数，例如arr.slice(1,&nbsp;3)，设置的函数不得改变包括数组本身在内的任何状态变量，如Array.splice、Array.sort或Array.reverse这些改变原数组的函数。 |
| itemGenerator | (item:&nbsp;any,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;void | 是 | - | 生成子组件的lambda函数，为给定数组项生成一个或多个子组件，单个组件和子组件列表必须括在大括号“**{....}**”中。 | | itemGenerator | (item:&nbsp;any,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;void | 是 | - | 生成子组件的lambda函数，为给定数组项生成一个或多个子组件，单个组件和子组件列表必须括在大括号“{....}”中。 |
| keyGenerator | (item:&nbsp;any,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;string | 否 | - | 匿名参数，用于给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则ForEach中的所有节点都将重建。 | | keyGenerator | (item:&nbsp;any,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;string | 否 | - | 匿名参数，用于给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则ForEach中的所有节点都将重建。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 必须在容器组件内使用； > - 必须在容器组件内使用；
> >
> - 生成的子组件允许在**ForEach**的父容器组件中，允许子组件生成器函数中包含**if/else**条件渲染，同时也允许**ForEach**包含在**if/else**条件渲染语句中； > - 生成的子组件允许在ForEach的父容器组件中，允许子组件生成器函数中包含if/else条件渲染，同时也允许ForEach包含在if/else条件渲染语句中；
> >
> - 子项生成器函数的调用顺序不一定和数组中的数据项相同，在开发过程中不要假设子项生成器和键值生成器函数是否执行以及执行顺序。如下示例可能无法正常工作： > - 子项生成器函数的调用顺序不一定和数组中的数据项相同，在开发过程中不要假设子项生成器和键值生成器函数是否执行以及执行顺序。如下示例可能无法正常工作：
> ``` > ```
......
zh-cn/application-dev/ui/ts-rending-control-syntax-if-else.md
浏览文件 @ ede87950
# 条件渲染 # 条件渲染
使用**if/else**进行条件渲染。 使用if/else进行条件渲染。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
......
zh-cn/application-dev/ui/ts-rending-control-syntax-lazyforeach.md
浏览文件 @ ede87950
# 数据懒加载 # 数据懒加载
开发框架提供**数据懒加载**（LazyForEach组件）从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。**LazyForEach**定义如下： 开发框架提供数据懒加载（LazyForEach组件）从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。LazyForEach定义如下：
``` ```
...@@ -34,16 +34,16 @@ interface DataChangeListener { ...@@ -34,16 +34,16 @@ interface DataChangeListener {
LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) =&gt; void, keyGenerator?: (item: any) =&gt; string):void LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) =&gt; void, keyGenerator?: (item: any) =&gt; string):void
**表1** 参数说明 表1 参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| dataSource | IDataSource | 是 | - | 实现IDataSource接口的对象，需要开发者实现相关接口。 | | dataSource | IDataSource | 是 | - | 实现IDataSource接口的对象，需要开发者实现相关接口。 |
| itemGenerator | (item:&nbsp;any)&nbsp;=&gt;&nbsp;void | 是 | - | 生成子组件的lambda函数，为给定数组项生成一个或多个子组件，单个组件和子组件列表必须括在大括号“**{....}**”中。 | | itemGenerator | (item:&nbsp;any)&nbsp;=&gt;&nbsp;void | 是 | - | 生成子组件的lambda函数，为给定数组项生成一个或多个子组件，单个组件和子组件列表必须括在大括号“{....}”中。 |
| keyGenerator | (item:&nbsp;any)&nbsp;=&gt;&nbsp;string | 否 | - | 匿名函数，用于键值生成，为给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则LazyForEach中的所有节点都将重建。 | | keyGenerator | (item:&nbsp;any)&nbsp;=&gt;&nbsp;string | 否 | - | 匿名函数，用于键值生成，为给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则LazyForEach中的所有节点都将重建。 |
**表2** IDataSource类型说明 表2 IDataSource类型说明
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | -------- | -------- |
...@@ -53,7 +53,7 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) =&gt; void, keyG ...@@ -53,7 +53,7 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) =&gt; void, keyG
| unregisterDataChangeListener(listener:DataChangeListener):&nbsp;void | 注销改变数据的控制器。 | | unregisterDataChangeListener(listener:DataChangeListener):&nbsp;void | 注销改变数据的控制器。 |
**表3** DataChangeListener类型说明 表3 DataChangeListener类型说明
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | -------- | -------- |
...@@ -71,11 +71,11 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) =&gt; void, keyG ...@@ -71,11 +71,11 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) =&gt; void, keyG
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 数据懒加载必须在容器组件内使用，且仅有List、Grid以及Swiper组件支持数据的懒加载（即只加载可视部分以及其前后少量数据用于缓冲），其他组件仍然是一次加载所有的数据； > - 数据懒加载必须在容器组件内使用，且仅有List、Grid以及Swiper组件支持数据的懒加载（即只加载可视部分以及其前后少量数据用于缓冲），其他组件仍然是一次加载所有的数据；
> >
> - **LazyForEach**在每次迭代中，必须且只允许创建一个子组件； > - LazyForEach在每次迭代中，必须且只允许创建一个子组件；
> >
> - 生成的子组件必须允许在**LazyForEach**的父容器组件中； > - 生成的子组件必须允许在LazyForEach的父容器组件中；
> >
> - 允许**LazyForEach**包含在**if/else**条件渲染语句中，不允许**LazyForEach**中出现**if/else**条件渲染语句； > - 允许LazyForEach包含在if/else条件渲染语句中，不允许LazyForEach中出现if/else条件渲染语句；
> >
> - 为了高性能渲染，通过DataChangeListener对象的onDataChange方法来更新UI时，仅itemGenerator中的UI描述的组件内使用了状态变量时，才会触发组件刷新； > - 为了高性能渲染，通过DataChangeListener对象的onDataChange方法来更新UI时，仅itemGenerator中的UI描述的组件内使用了状态变量时，才会触发组件刷新；
> >
......
zh-cn/application-dev/ui/ts-syntactic-sugar.md
浏览文件 @ ede87950
...@@ -41,20 +41,20 @@ struct MyComponent { ...@@ -41,20 +41,20 @@ struct MyComponent {
| 装饰器 | 装饰内容 | 说明 | | 装饰器 | 装饰内容 | 说明 |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| @Component | struct | 结构体在装饰后具有基于组件的能力，需要实现**build**方法来更新UI。 | | @Component | struct | 结构体在装饰后具有基于组件的能力，需要实现build方法来更新UI。 |
| @Entry | struct | 组件被装饰后作为页面的入口，页面加载时将被渲染显示。 | | @Entry | struct | 组件被装饰后作为页面的入口，页面加载时将被渲染显示。 |
| @Preview | struct | 用@Preview装饰的自定义组件可以在DevEco&nbsp;Studio的预览器上进行预览，加载页面时，将创建并呈现@Preview装饰的自定义组件。 | | @Preview | struct | 用@Preview装饰的自定义组件可以在DevEco&nbsp;Studio的预览器上进行预览，加载页面时，将创建并呈现@Preview装饰的自定义组件。 |
| @Builder | 方法 | 在@Builder装饰的方法用通过声明式UI描述，可以在一个自定义组件内快速生成多个布局内容。 | | @Builder | 方法 | 在@Builder装饰的方法用通过声明式UI描述，可以在一个自定义组件内快速生成多个布局内容。 |
| @Extend | 方法 | @Extend装饰器将新的属性函数添加到内置组件上，通过@Extend装饰器可以快速定义并复用组件的自定义样式。 | | @Extend | 方法 | @Extend装饰器将新的属性函数添加到内置组件上，通过@Extend装饰器可以快速定义并复用组件的自定义样式。 |
| @CustomDialog | struct | @CustomDialog装饰器用于装饰自定义弹窗。 | | @CustomDialog | struct | @CustomDialog装饰器用于装饰自定义弹窗。 |
| @State | 基本数据类型，类，数组 | 修饰的状态数据被修改时会触发组件的**build**方法进行UI界面更新。 | | @State | 基本数据类型，类，数组 | 修饰的状态数据被修改时会触发组件的build方法进行UI界面更新。 |
| @Prop | 基本数据类型 | 修改后的状态数据用于在父组件和子组件之间建立单向数据依赖关系。修改父组件关联数据时，更新当前组件的UI。 | | @Prop | 基本数据类型 | 修改后的状态数据用于在父组件和子组件之间建立单向数据依赖关系。修改父组件关联数据时，更新当前组件的UI。 |
| @Link | 基本数据类型，类，数组 | 父子组件之间的双向数据绑定，父组件的内部状态数据作为数据源，任何一方所做的修改都会反映给另一方。 | | @Link | 基本数据类型，类，数组 | 父子组件之间的双向数据绑定，父组件的内部状态数据作为数据源，任何一方所做的修改都会反映给另一方。 |
| @Observed | 类 | @Observed应用于类，表示该类中的数据变更被UI页面管理。 | | @Observed | 类 | @Observed应用于类，表示该类中的数据变更被UI页面管理。 |
| @ObjectLink | 被@Observed所装饰类的对象 | 装饰的状态数据被修改时，在父组件或者其他兄弟组件内与它关联的状态数据所在的组件都会更新UI。 | | @ObjectLink | 被@Observed所装饰类的对象 | 装饰的状态数据被修改时，在父组件或者其他兄弟组件内与它关联的状态数据所在的组件都会更新UI。 |
| @Consume | 基本数据类型，类，数组 | @Consume装饰的变量在感知到@Provide装饰的变量更新后，会触发当前自定义组件的重新渲染。 | | @Consume | 基本数据类型，类，数组 | @Consume装饰的变量在感知到@Provide装饰的变量更新后，会触发当前自定义组件的重新渲染。 |
| @Provide | 基本数据类型，类，数组 | @Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。 | | @Provide | 基本数据类型，类，数组 | @Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。 |
| @Watch | 被@State,&nbsp;@Prop,&nbsp;@Link,&nbsp;@ObjectLink,&nbsp;@Provide,&nbsp;@Consume,&nbsp;@StorageProp，&nbsp;@StorageLink中任意一个装饰的变量 | @Watch用于监听状态变量的变化，应用可以注册回调方法。 | | @Watch | 被@State,&nbsp;@Prop,&nbsp;@Link,&nbsp;@ObjectLink,&nbsp;<br>@Provide,&nbsp;@Consume,&nbsp;@StorageProp，&nbsp;@StorageLink中任意一个装饰的变量 | @Watch用于监听状态变量的变化，应用可以注册回调方法。 |
## 链式调用 ## 链式调用
...@@ -73,7 +73,7 @@ Column() { ...@@ -73,7 +73,7 @@ Column() {
## struct对象 ## struct对象
组件可以基于**struct**实现，组件不能有继承关系，**struct**可以比**class**更加快速的创建和销毁。 组件可以基于struct实现，组件不能有继承关系，struct可以比class更加快速的创建和销毁。
``` ```
@Component @Component
...@@ -88,7 +88,7 @@ struct MyComponent { ...@@ -88,7 +88,7 @@ struct MyComponent {
## 在实例化过程中省略"new" ## 在实例化过程中省略"new"
对于**struct**的实例化，可以省略**new**。 对于struct的实例化，可以省略new。
``` ```
// 定义 // 定义
...@@ -120,7 +120,7 @@ TS语言的使用在生成器函数中存在一定的限制： ...@@ -120,7 +120,7 @@ TS语言的使用在生成器函数中存在一定的限制：
- 生成器函数内部不能有局部变量。 - 生成器函数内部不能有局部变量。
上述限制都不适用于事件处理函数（例如**onClick**）的匿名函数实现。 上述限制都不适用于事件处理函数（例如onClick）的匿名函数实现。
非法示例： 非法示例：
......
zh-cn/application-dev/ui/ts-syntax-intro.md
浏览文件 @ ede87950
...@@ -9,6 +9,6 @@ ...@@ -9,6 +9,6 @@
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 所有示例都以TypeScript (TS)语言为例，请遵循相应语言的语法要求。 > - 所有示例都以TypeScript (TS)语言为例，请遵循相应语言的语法要求。
> >
> - 示例中的**Image**、**Button**、**Text**、**Divider**、**Row**和**Column**等组件是UI框架中预置的组件控件，仅用于解释UI描述规范。 > - 示例中的Image、Button、Text、Divider、Row和Column等组件是UI框架中预置的组件控件，仅用于解释UI描述规范。
> >
> - 通用属性方法和事件方法通常支持所有组件，而组件内的属性方法和事件方法仅对当前组件有效。 > - 通用属性方法和事件方法通常支持所有组件，而组件内的属性方法和事件方法仅对当前组件有效。
zh-cn/application-dev/ui/ts-ui-state-mgmt-concepts.md
浏览文件 @ ede87950
...@@ -8,22 +8,22 @@ ...@@ -8,22 +8,22 @@
## 状态变量装饰器 ## 状态变量装饰器
- **@State：**组件拥有的状态属性，当**@State**装饰的变量更改时，组件会重新渲染更新UI。 - @State：组件拥有的状态属性，当@State装饰的变量更改时，组件会重新渲染更新UI。
- **@Link：**组件依赖于其父组件拥有的某些状态属性，当任何一个组件中的数据更新时，另一个组件的状态都会更新，父子组件重新渲染。 - @Link：组件依赖于其父组件拥有的某些状态属性，当任何一个组件中的数据更新时，另一个组件的状态都会更新，父子组件重新渲染。
- **@Prop：**原理类似**@Link**，但是子组件所做的更改不会同步到父组件上，属于单向传递。 - @Prop：原理类似@Link，但是子组件所做的更改不会同步到父组件上，属于单向传递。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 状态变量名称不能使用id，如@Prop id:number 。 > 状态变量名称不能使用id，如@Prop id:number 。
## 应用程序状态数据 ## 应用程序状态数据
**AppStorage**是整个UI应用程序状态的中心“数据库”，UI框架会针对应用程序创建单例**AppStorage**对象，并提供相应的装饰器和接口供应用程序使用。 AppStorage是整个UI应用程序状态的中心“数据库”，UI框架会针对应用程序创建单例AppStorage对象，并提供相应的装饰器和接口供应用程序使用。
- **@StorageLink**：**@StorageLink(name)的原理类似于@Consume(name)，**不同的是，该给定名称的链接对象是从**AppStorage**中获得的，在**UI组件**和**AppStorage**之间建立双向绑定同步数据。 - @StorageLink：@StorageLink(name)的原理类似于@Consume(name)，不同的是，该给定名称的链接对象是从AppStorage中获得的，在UI组件和AppStorage之间建立双向绑定同步数据。
- **@StorageProp：@StorageProp(name)将UI组件属性与AppStorage进行单向同步，** **AppStorage**中值的更改会更新组件中的属性，但UI组件无法更改**AppStorage**中的属性值。 - @StorageProp：@StorageProp(name)将UI组件属性与AppStorage进行单向同步，AppStorage中值的更改会更新组件中的属性，但UI组件无法更改AppStorage中的属性值。
- **AppStorage**还提供用于业务逻辑实现的API，用于添加、读取、修改和删除应用程序的状态属性，此API所做的更改会导致修改的状态数据同步到UI组件上进行UI更新。 - AppStorage还提供用于业务逻辑实现的API，用于添加、读取、修改和删除应用程序的状态属性，此API所做的更改会导致修改的状态数据同步到UI组件上进行UI更新。
zh-cn/application-dev/ui/ui-js-animate-attribute-style.md
浏览文件 @ ede87950
...@@ -87,6 +87,6 @@ text{ ...@@ -87,6 +87,6 @@ text{
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 1. animation取值不区分先后，duration （动画执行时间）/ delay （动画延迟执行时间）按照出现的先后顺序解析。 > - animation取值不区分先后，duration （动画执行时间）/ delay （动画延迟执行时间）按照出现的先后顺序解析。
> >
> 2. 必须设置animation-duration样式，否则时长为0则不会有动画效果。当设置animation-fill-mode属性为forwards时，组件直接展示最后一帧的样式。 > - 必须设置animation-duration样式，否则时长为0则不会有动画效果。当设置animation-fill-mode属性为forwards时，组件直接展示最后一帧的样式。
zh-cn/application-dev/ui/ui-js-animate-transform.md
浏览文件 @ ede87950
...@@ -565,8 +565,8 @@ transform可以设置多个值并且多个值可同时设置，下面案例中 ...@@ -565,8 +565,8 @@ transform可以设置多个值并且多个值可同时设置，下面案例中
![zh-cn_image_0000001220554911](figures/zh-cn_image_0000001220554911.gif) ![zh-cn_image_0000001220554911](figures/zh-cn_image_0000001220554911.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 1. 当设置多个transform时，后续的transform值会把前面的覆盖掉。若想同时使用多个动画样式可用复合写法，例：transform: scale(1) rotate(0) translate(0,0)。 > - 当设置多个transform时，后续的transform值会把前面的覆盖掉。若想同时使用多个动画样式可用复合写法，例：transform: scale(1) rotate(0) translate(0,0)。
> >
> 2. transform进行复合写法时，变化样式内多个样式值顺序的不同会呈现不一样的动画效果。 > - transform进行复合写法时，变化样式内多个样式值顺序的不同会呈现不一样的动画效果。
> >
> 3. transform属性设置的样式值要一一对应，若前后不对应，则该动画不生效。若设置多个样式值则只会呈现出已对应值的动画效果。 > - transform属性设置的样式值要一一对应，若前后不对应，则该动画不生效。若设置多个样式值则只会呈现出已对应值的动画效果。
zh-cn/application-dev/ui/ui-js-building-ui-animation.md
浏览文件 @ ede87950
...@@ -56,6 +56,7 @@ ...@@ -56,6 +56,7 @@
**图1** 静态动画效果图 **图1** 静态动画效果图
![zh-cn_image_0000001071134933](figures/zh-cn_image_0000001071134933.png) ![zh-cn_image_0000001071134933](figures/zh-cn_image_0000001071134933.png)
...@@ -157,4 +158,5 @@ export default { ...@@ -157,4 +158,5 @@ export default {
``` ```
**图2** 连续动画效果图 **图2** 连续动画效果图
![zh-cn_image_0000001063148757](figures/zh-cn_image_0000001063148757.gif) ![zh-cn_image_0000001063148757](figures/zh-cn_image_0000001063148757.gif)
zh-cn/application-dev/ui/ui-js-building-ui-layout-intro.md
浏览文件 @ ede87950
...@@ -25,7 +25,9 @@ ...@@ -25,7 +25,9 @@
将页面中的元素分解之后再对每个基本元素按顺序实现，可以减少多层嵌套造成的视觉混乱和逻辑混乱，提高代码的可读性，方便对页面做后续的调整。以下图为例进行分解： 将页面中的元素分解之后再对每个基本元素按顺序实现，可以减少多层嵌套造成的视觉混乱和逻辑混乱，提高代码的可读性，方便对页面做后续的调整。以下图为例进行分解：
**图1** 页面布局分解 **图1** 页面布局分解
![zh-cn_image_0000001070558189](figures/zh-cn_image_0000001070558189.png) ![zh-cn_image_0000001070558189](figures/zh-cn_image_0000001070558189.png)
**图2** 留言区布局分解 **图2** 留言区布局分解
......
zh-cn/application-dev/ui/ui-js-building-ui-routes.md
浏览文件 @ ede87950
...@@ -82,5 +82,4 @@ export default { ...@@ -82,5 +82,4 @@ export default {
运行效果如下图所示： 运行效果如下图所示：
**图1** 页面路由效果
![zh-cn_image_0000001070707559](figures/zh-cn_image_0000001070707559.png) ![zh-cn_image_0000001070707559](figures/zh-cn_image_0000001070707559.png)
zh-cn/application-dev/ui/ui-js-components-button.md
浏览文件 @ ede87950
...@@ -169,7 +169,7 @@ export default { ...@@ -169,7 +169,7 @@ export default {
![zh-cn_image_0000001208393581](figures/zh-cn_image_0000001208393581.gif) ![zh-cn_image_0000001208393581](figures/zh-cn_image_0000001208393581.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - setProgress方法只支持button的类型为download。 > setProgress方法只支持button的类型为download。
## 场景示例 ## 场景示例
......
zh-cn/application-dev/ui/ui-js-components-input.md
浏览文件 @ ede87950
...@@ -222,7 +222,7 @@ import prompt from '@system.prompt' ...@@ -222,7 +222,7 @@ import prompt from '@system.prompt'
![zh-cn_image_0000001189248178](figures/zh-cn_image_0000001189248178.gif) ![zh-cn_image_0000001189248178](figures/zh-cn_image_0000001189248178.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 该方法在Input类型为text、email、date、time、number和password时生效。 > 该方法在Input类型为text、email、date、time、number和password时生效。
## 场景示例 ## 场景示例
......
zh-cn/application-dev/ui/ui-js-components-text.md
浏览文件 @ ede87950
...@@ -34,198 +34,198 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex ...@@ -34,198 +34,198 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
- 添加文本样式 - 添加文本样式
设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。 设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;flex-direction: column;justify-content: center; align-items: center;"> <div class="container" style="background-color:#F1F3F5;flex-direction: column;justify-content: center; align-items: center;">
<text style="color: blueviolet; font-size: 40px; allow-scale:true"> <text style="color: blueviolet; font-size: 40px; allow-scale:true">
This is a passage This is a passage
</text> </text>
<text style="color: blueviolet; font-size: 40px; margin-top: 20px; allow-scale:true;word-spacing: 20px;" > <text style="color: blueviolet; font-size: 40px; margin-top: 20px; allow-scale:true;word-spacing: 20px;" >
This is a passage This is a passage
</text> </text>
</div> </div>
``` ```
``` ```
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #F1F3F5; background-color: #F1F3F5;
} }
``` ```
![zh-cn_image_0000001220778205](figures/zh-cn_image_0000001220778205.png) ![zh-cn_image_0000001220778205](figures/zh-cn_image_0000001220778205.png)
- 添加划线 - 添加划线
设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色，text-decoration枚举值请参考Text自有样式。 设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色，text-decoration枚举值请参考Text自有样式。
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;"> <div class="container" style="background-color:#F1F3F5;">
<text style="text-decoration:underline"> <text style="text-decoration:underline">
This is a passage This is a passage
</text> </text>
<text style="text-decoration:line-through;text-decoration-color: red"> <text style="text-decoration:line-through;text-decoration-color: red">
This is a passage This is a passage
</text> </text>
</div> </div>
``` ```
``` ```
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
text{ text{
font-size: 50px; font-size: 50px;
} }
``` ```
![zh-cn_image_0000001220856725](figures/zh-cn_image_0000001220856725.png) ![zh-cn_image_0000001220856725](figures/zh-cn_image_0000001220856725.png)
- 隐藏文本内容 - 隐藏文本内容
当文本内容过多而显示不全时，添加text-overflow属性将隐藏内容以省略号的形式展现。 当文本内容过多而显示不全时，添加text-overflow属性将隐藏内容以省略号的形式展现。
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text class="text"> <text class="text">
This is a passage This is a passage
</text> </text>
</div> </div>
``` ```
``` ```
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background-color: #F1F3F5; background-color: #F1F3F5;
justify-content: center; justify-content: center;
} }
.text{ .text{
width: 200px; width: 200px;
max-lines: 1; max-lines: 1;
text-overflow:ellipsis; text-overflow:ellipsis;
} }
``` ```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - text-overflow样式需要与max-lines样式配套使用，设置了最大行数的情况下生效。 > - text-overflow样式需要与max-lines样式配套使用，设置了最大行数的情况下生效。
> >
> - max-lines属性设置文本最多可以展示的行数。 > - max-lines属性设置文本最多可以展示的行数。
![zh-cn_image_0000001163656706](figures/zh-cn_image_0000001163656706.png) ![zh-cn_image_0000001163656706](figures/zh-cn_image_0000001163656706.png)
- 设置文本折行 - 设置文本折行
设置word-break属性对文本内容做断行处理，word-break枚举值请参考Text自有样式。 设置word-break属性对文本内容做断行处理，word-break枚举值请参考Text自有样式。
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content"> <div class="content">
<text class="text1"> <text class="text1">
Welcome to the world Welcome to the world
</text> </text>
<text class="text2"> <text class="text2">
Welcome to the world Welcome to the world
</text> </text>
</div> </div>
</div> </div>
``` ```
``` ```
/* xxx.css */ /* xxx.css */
.container { .container {
background-color: #F1F3F5; background-color: #F1F3F5;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.content{ .content{
width: 50%; width: 50%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.text1{ .text1{
height: 200px; height: 200px;
border:1px solid #1a1919; border:1px solid #1a1919;
margin-bottom: 50px; margin-bottom: 50px;
text-align: center; text-align: center;
word-break: break-word; word-break: break-word;
font-size: 40px; font-size: 40px;
} }
.text2{ .text2{
height: 200px; height: 200px;
border:1px solid #0931e8; border:1px solid #0931e8;
text-align: center; text-align: center;
word-break: break-all; word-break: break-all;
font-size: 40px; font-size: 40px;
} }
``` ```
![zh-cn_image_0000001209033195](figures/zh-cn_image_0000001209033195.png) ![zh-cn_image_0000001209033195](figures/zh-cn_image_0000001209033195.png)
- Text组件支持[Span](../reference/arkui-js/js-components-basic-span.md)子组件 - Text组件支持[Span](../reference/arkui-js/js-components-basic-span.md)子组件
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container" style="justify-content: center; align-items: center;flex-direction: column;background-color: #F1F3F5;"> <div class="container" style="justify-content: center; align-items: center;flex-direction: column;background-color: #F1F3F5;">
<text style="font-size: 45px;"> <text style="font-size: 45px;">
This is a passage This is a passage
</text> </text>
<text style="font-size: 45px;"> <text style="font-size: 45px;">
<span style="color: aqua;">This </span><span style="color: #F1F3F5;"> 1 </span> <span style="color: blue;"> is a </span> <span style="color: #F1F3F5;"> 1 </span> <span style="color: red;"> passage </span> <span style="color: aqua;">This </span><span style="color: #F1F3F5;"> 1 </span> <span style="color: blue;"> is a </span> <span style="color: #F1F3F5;"> 1 </span> <span style="color: red;"> passage </span>
</text> </text>
</div> </div>
``` ```
![zh-cn_image_0000001163372568](figures/zh-cn_image_0000001163372568.png) ![zh-cn_image_0000001163372568](figures/zh-cn_image_0000001163372568.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 当使用Span子组件组成文本段落时，如果Span属性样式异常（例如：font-weight设置为1000），将导致文本段落显示异常。 > - 当使用Span子组件组成文本段落时，如果Span属性样式异常（例如：font-weight设置为1000），将导致文本段落显示异常。
> >
> - 在使用Span子组件时，注意Text组件内不能存在文本内容，如果存在文本内容也只会显示子组件Span里的内容。 > - 在使用Span子组件时，注意Text组件内不能存在文本内容，如果存在文本内容也只会显示子组件Span里的内容。
## 场景示例 ## 场景示例
......
zh-cn/application-dev/ui/ui-js-overview.md
浏览文件 @ ede87950
# 概述 # 概述
基于JS扩展的类Web开发范式的方舟开发框架是UI开发框架，提供基础类、容器类、画布类等UI组件和标准CSS动画能力，支持类Web范式编程。 基于JS扩展的类Web开发范式的方舟开发框架，采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建，使用CSS文件进行样式描述，使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，UI界面自动触发更新。此种开发方式，更接近Web前端开发者的使用习惯，快速将已有的Web应用改造成方舟开发框架应用。主要适用于界面较为简单的中小型应用开发。
## 基础能力
采用类HTML和CSS Web编程语言作为页面布局和页面样式的开发语言，页面业务逻辑则支持ECMAScript规范的JavaScript语言。方舟开发框架提供的类Web编程范式，可以让开发者避免编写UI状态切换的代码，视图配置信息更加直观。
## 整体架构 ## 整体架构
......
zh-cn/application-dev/ui/ui-ts-creating-simple-page.md
浏览文件 @ ede87950
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
![zh-cn_image_0000001214128687](figures/zh-cn_image_0000001214128687.png) ![zh-cn_image_0000001214128687](figures/zh-cn_image_0000001214128687.png)
2. 食物图片展示。 2. 食物图片展示。
创建Image组件，指定Image组件的url，Image组件和Text组件都是必选构造参数组件。为了让Text组件在Image组件上方显示，所以要先声明Image组件。图片资源放在resources下的rawfile文件夹内，引用rawfile下资源时使用“$rawfile('filename')”的形式**，**filename为rawfile目录下的文件相对路径。当前$rawfile仅支持Image控件引用图片资源。 创建Image组件，指定Image组件的url，Image组件和Text组件都是必选构造参数组件。为了让Text组件在Image组件上方显示，所以要先声明Image组件。图片资源放在resources下的rawfile文件夹内，引用rawfile下资源时使用“$rawfile('filename')”的形式，filename为rawfile目录下的文件相对路径。当前$rawfile仅支持Image控件引用图片资源。
``` ```
@Entry @Entry
@Component @Component
...@@ -538,4 +538,5 @@ ...@@ -538,4 +538,5 @@
针对创建简单视图，有以下示例工程可供参考： 针对创建简单视图，有以下示例工程可供参考：
- [eTSBuildCommonView](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSBuildCommonView) - [eTSBuildCommonView](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSBuildCommonView)
本示例为构建了简单页面展示食物番茄的图片和营养信息，主要为了展示简单页面的Stack布局和Flex布局。 本示例为构建了简单页面展示食物番茄的图片和营养信息，主要为了展示简单页面的Stack布局和Flex布局。
zh-cn/application-dev/ui/ui-ts-overview.md
浏览文件 @ ede87950
...@@ -9,18 +9,22 @@ ...@@ -9,18 +9,22 @@
- **开箱即用的组件** - **开箱即用的组件**
框架提供丰富的系统预置组件，可以通过链式调用的方式设置系统组件的渲染效果。开发者可以组合系统组件为自定义组件，通过这种方式将页面组件化为一个个独立的UI单元，实现页面不同单元的独立创建、开发和复用，使页面具有更强的工程性。 框架提供丰富的系统预置组件，可以通过链式调用的方式设置系统组件的渲染效果。开发者可以组合系统组件为自定义组件，通过这种方式将页面组件化为一个个独立的UI单元，实现页面不同单元的独立创建、开发和复用，使页面具有更强的工程性。
- **丰富的动效接口** - **丰富的动效接口**
提供svg标准的绘制图形能力，同时开放了丰富的动效接口，开发者可以通过封装的物理模型或者调用动画能力接口来实现自定义动画轨迹。 提供svg标准的绘制图形能力，同时开放了丰富的动效接口，开发者可以通过封装的物理模型或者调用动画能力接口来实现自定义动画轨迹。
- **状态与数据管理** - **状态与数据管理**
状态数据管理作为基于TS扩展的声明式开发范式的特色，通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态，两者协作可以使开发者完整地构建整个应用的数据更新和UI渲染。 状态数据管理作为基于TS扩展的声明式开发范式的特色，通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态，两者协作可以使开发者完整地构建整个应用的数据更新和UI渲染。
- **系统能力接口** - **系统能力接口**
使用基于TS扩展的声明式开发范式的方舟开发框架，还封装了丰富的系统能力接口，开发者可以通过简单的接口调用，实现从UI设计到系统能力调用的极简开发。 使用基于TS扩展的声明式开发范式的方舟开发框架，还封装了丰富的系统能力接口，开发者可以通过简单的接口调用，实现从UI设计到系统能力调用的极简开发。
...@@ -31,16 +35,21 @@ ...@@ -31,16 +35,21 @@
![zh-cn_image_0000001169532276](figures/zh-cn_image_0000001169532276.png) ![zh-cn_image_0000001169532276](figures/zh-cn_image_0000001169532276.png)
- **声明式UI前端** - **声明式UI前端**
提供了UI开发范式的基础语言规范，并提供内置的UI组件、布局和动画，提供了多种状态管理机制，为应用开发者提供一系列接口支持。 提供了UI开发范式的基础语言规范，并提供内置的UI组件、布局和动画，提供了多种状态管理机制，为应用开发者提供一系列接口支持。
- **语言运行时** - **语言运行时**
选用方舟语言运行时，提供了针对UI范式语法的解析能力，提供了跨语言调用支持，提供了TS语言高性能运行环境。 选用方舟语言运行时，提供了针对UI范式语法的解析能力，提供了跨语言调用支持，提供了TS语言高性能运行环境。
- **声明式UI后端引擎** - **声明式UI后端引擎**
后端引擎提供了兼容不同开发范式的UI渲染管线，提供多种基础组件、布局计算、动效、交互事件，提供了状态管理和绘制能力。 后端引擎提供了兼容不同开发范式的UI渲染管线，提供多种基础组件、布局计算、动效、交互事件，提供了状态管理和绘制能力。
- **渲染引擎** - **渲染引擎**
提供了高效的绘制能力，将渲染管线收集的渲染指令，绘制到屏幕能力。 提供了高效的绘制能力，将渲染管线收集的渲染指令，绘制到屏幕能力。
- **平台适配层** - **平台适配层**
提供了对系统平台的抽象接口，具备接入不同系统的能力，如系统渲染管线、生命周期调度等。 提供了对系统平台的抽象接口，具备接入不同系统的能力，如系统渲染管线、生命周期调度等。
zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md
浏览文件 @ ede87950
...@@ -268,4 +268,5 @@ ...@@ -268,4 +268,5 @@
针对页面布局与连接，有以下示例工程可供参考： 针对页面布局与连接，有以下示例工程可供参考：
- [eTSDefiningPageLayoutAndConnection](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSDefiningPageLayoutAndConnection) - [eTSDefiningPageLayoutAndConnection](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSDefiningPageLayoutAndConnection)
本示例构建了食物分类列表页面和食物详情页，向开发者展示了List布局、Grid布局以及页面路由的基本用法。 本示例构建了食物分类列表页面和食物详情页，向开发者展示了List布局、Grid布局以及页面路由的基本用法。
zh-cn/application-dev/website.md
浏览文件 @ ede87950
...@@ -609,13 +609,13 @@ ...@@ -609,13 +609,13 @@
- [事件注入](js-apis-inputeventclient.md) - [事件注入](js-apis-inputeventclient.md)
- 基本功能 - 基本功能
- [应用上下文](reference/apis/js-apis-system-app.md) - [应用上下文](reference/apis/js-apis-system-app.md)
- [日志打印](reference/apis/js-apis-basic-features-logs.md) - [日志打印](reference/apis/js-apis-logs.md)
- [页面路由](reference/apis/js-apis-router.md) - [页面路由](reference/apis/js-apis-router.md)
- [弹窗](reference/apis/js-apis-prompt.md) - [弹窗](reference/apis/js-apis-prompt.md)
- [应用配置](reference/apis/js-apis-system-configuration.md) - [应用配置](reference/apis/js-apis-system-configuration.md)
- [定时器](reference/apis/js-apis-basic-features-timer.md) - [定时器](reference/apis/js-apis-timer.md)
- [设置系统时间](reference/apis/js-apis-system-time.md) - [设置系统时间](reference/apis/js-apis-system-time.md)
- [动画](reference/apis/js-apis-basic-features-animator.md) - [动画](reference/apis/js-apis-animator.md)
- [WebGL](reference/apis/js-apis-webgl.md) - [WebGL](reference/apis/js-apis-webgl.md)
- [WebGL2](reference/apis/js-apis-webgl2.md) - [WebGL2](reference/apis/js-apis-webgl2.md)
- [屏幕截图](reference/apis/js-apis-screenshot.md) - [屏幕截图](reference/apis/js-apis-screenshot.md)
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或