Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
未验证 提交 2980e65b 编写于 作者: L luoying_ace 提交者： Gitee
浏览文件
操作

update zh-cn/application-dev/ui/ui-ts-developing-intro.md. 

Signed-off-by: Nluoying_ace <luoying19@huawei.com>
上级 659a76c8
隐藏空白更改
内联 并排
Showing with 16 addition and 85 deletion
zh-cn/application-dev/ui/ui-ts-developing-intro.md
浏览文件 @ 2980e65b
......@@ -2,15 +2,14 @@
## 开发说明
声明式UI的工程结构还请参考[OpenHarmony APP工程结构介绍](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-project-overview-0000001218440650#section133380945818)。其中，.ets结尾的ArkTS文件用于描述UI布局、样式、事件交互和页面逻辑，支持导入TypeScript和JavaScript文件。资源目录resources文件夹位于src/main下，此目录下资源文件的详细规范以及子目录结构规范参看[资源分类与访问](../quick-start/resource-categories-and-access.md)。
在开发页面之前，请先[学习ArkTS语言](../quick-start/arkts-get-started.md)了解声明式UI的基本语法。
在开发页面时，可先根据使用场景，在[常见布局](ui-ts-layout-linear.md)中选择合适的布局。再根据页面需要实现的内容，为页面添加系统内置组件，更新组件状态。页面开发过程中请参考[自定义组件的生命周期](ui-ts-custom-component-lifecycle-callbacks.md)了解如何添加需要的生命周期回调方法。
也可在页面中添加[绘图](../reference/arkui-ts/ts-drawing-components-circle.md)和[动画](../reference/arkui-ts/ts-animatorproperty.md)，丰富页面的展现形态。还可以使用[路由](../reference/apis/js-apis-router.md)实现多个页面之间的跳转和数据传递。
另外请参考[性能提升的推荐方法](ui-ts-performance-improvement-recommendation.md)，避免低性能代码对应用的性能造成负面影响。
| 任务 | 简介 | 相关资源 |
| ---------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| 准备开发环境 | 了解声明式UI的工程结构。<br>了解资源分类与访问。 | [OpenHarmony工程介绍](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-project-overview-0000001218440650)<br>[资源分类与访问](../quick-start/resource-categories-and-access.md) |
| 学习ArkTS语言 | ArkTS是HarmonyOS优选的主力应用开发语言，当前，ArkTS在TS基础上主要扩展了声明式UI能力。 | [学习ArkTS语言](../quick-start/arkts-get-started.md) |
| 开发页面 | 根据页面的使用场景，选择合适的布局。<br>根据页面需要实现的内容，添加系统内置组件，并修改组件样式。<br>更新页面内容，丰富页面展现形式。 | [创建页面](#创建页面)<br> [常见布局开发指导](ui-ts-layout-linear.md)<br> [常见组件说明](ui-ts-components-intro.md)<br>[修改组件样式](#修改组件样式)<br>[更新页面内容](#更新页面内容) |
| （可选）页面多样化 | 绘图和动画。 | [绘图组件](../reference/arkui-ts/ts-drawing-components-circle.md)<br>[画布组件](../reference/arkui-ts/ts-components-canvas-canvas.md)<br>[动画](../reference/arkui-ts/ts-animatorproperty.md) |
| （可选）页面之间的跳转 | 使用页面路由实现多个页面之前的跳转。 | [页面路由](../reference/apis/js-apis-router.md) |
| （可选）性能提升 | 避免低性能代码对应用的性能造成负面影响。 | [性能提升的推荐方法](ui-ts-performance-improvement-recommendation.md) |
## 创建页面
......@@ -33,19 +32,10 @@
## 修改组件样式
创建系统内置组件时，若不设置属性方法，则会显示其默认样式。通过更改组件的属性样式或者组件支持的[通用属性](../reference/arkui-ts/ts-universal-attributes-size.md)样式，设置可以改变组件的UI显示。
在页面中添加系统内置组件时，若不设置属性方法，则会显示其默认样式。通过更改组件的属性样式或者组件支持的[通用属性](../reference/arkui-ts/ts-universal-attributes-size.md)样式，改变组件的UI显示。
1. 通过修改Text组件的构造参数，将Text组件的显示内容修改为“Tomato”。
2. 修改Text组件的fontSize属性更改组件的字体大小，将字体大小设置为26，通过fontWeight属性更改字体粗细，将其设置为500。fontWeight属性支持三种设置方式：
a. number类型的取值范围为100到900，取值间隔为100，默认为400，取值越大，字体越粗。
b. FontWeight为内置枚举类型，取值支持FontWeight.Lighter、FontWeight.Normal、FontWeight.Regular、FontWeight.Medium、FontWeight.Bold、FontWeight.Bolder。FontWeight.Normal即为400数值的字体粗细。
c. string类型仅支持number类型取值的字符串形式，例如"400"，以及"bold"、"bolder"、"lighter"、"regular"、"medium"，分别对应FontWeight中相应的枚举值。设置其他字符串则为无效，保持默认字体粗细显示。
属性方法要紧随组件，通过“.”操作符连接，也可以通过链式调用的方式配置组件的多个属性。
2. 修改Text组件的fontSize属性更改组件的字体大小，将字体大小设置为26，通过fontWeight属性更改字体粗细，将其设置为500。
```ts
// xxx.ets
......@@ -66,62 +56,13 @@
![zh-cn_image_0000001168888224](figures/zh-cn_image_0000001168888224.png)
## 组件成员变量初始化
自定义组件的成员变量可以通过[本地初始化](../quick-start/arkts-restrictions-and-extensions.md#自定义组件成员变量初始化的方式与约束)和[在构造组件时通过构造参数初始化](../quick-start/arkts-restrictions-and-extensions.md#自定义组件成员变量初始化的方式与约束)两种方式实现，具体允许哪种方式取决于该变量所使用的装饰器：
**示例：**
```ts
// xxx.ets
class ClassA {
public str: string
constructor(str: string) {
this.str = str
}
}
@Entry
@Component
struct Parent {
// Parent的变量parentState进行本地初始化
@State parentState: ClassA = new ClassA('hello')
build() {
Column() {
Row() {
CompA({ aState: new ClassA('Tomato'), aLink: $parentState })
}
// aState在CompA中已进行初始化，因此可以缺省
Row() {
CompA({ aLink: $parentState })
}
}.width('100%')
}
}
@Component
struct CompA {
// CompA中的变量aState进行本地初始化，aLink在Parent中使用时通过构造参数初始化
@State aState: any = new ClassA('CompA')
@Link aLink: ClassA
build() {
Row() {
Text(JSON.stringify(this.aState)).fontSize(20).margin(30)
Text(JSON.stringify(this.aLink)).fontSize(20).margin(30)
}
}
}
```
![component](figures/component.PNG)
## 更新页面内容
## 组件的状态更新
在创建基本的页面之后，可根据组件的状态来更新页面内容。以下示例展示了简单的更新页面方法。
组件的状态可以通过动态修改组件成员变量的值来更新，下面以示例来进行说明。
> **说明：**
>
> 更新组件的状态之前，请先初始化组件的成员变量。自定义组件的成员变量可以通过[本地初始化](../quick-start/arkts-restrictions-and-extensions.md#自定义组件成员变量初始化的方式与约束)和[在构造组件时通过构造参数初始化](../quick-start/arkts-restrictions-and-extensions.md#自定义组件成员变量初始化的方式与约束)两种方式实现，具体允许哪种方式取决于该变量所使用的装饰器。
**示例：**
......@@ -197,11 +138,6 @@ struct TimerComponent {
2. 判断if条件，创建true条件下的元素；
1. 创建Image组件，并设置其图片源地址；
2. 使用给定的构造函数创建TimerComponent；
1. 创建TimerComponent对象；
2. 本地初始化成员变量初始值；
3. 使用TimerComponent构造函数提供的参数更新成员变量的值；
4. 执行TimerComponent的aboutToAppear函数；
5. 执行TimerComponent的build函数，创建相应的UI描述结构；
3. 创建Button内置组件，设置相应的内容。
**状态更新：**
......@@ -218,10 +154,5 @@ struct TimerComponent {
1. Text组件会被重用，但使用新的文本内容进行重新初始化；
2. 判断if条件，使用false条件下的元素；
1. 原来true条件的组件不再使用，将这些组件销毁；
1. 销毁Image组件实例；
2. 销毁TimerComponent组件实例，aboutToDisappear函数被调用；
2. 创建false条件下的组件；
1. 创建Image组件，并设置其图片源地址；
2. 使用给定的构造函数重新创建TimerComponent；
3. 初始化TimerComponent，并调用aboutToAppear函数和build函数。
3. 重用Button组件，使用新的图片源地址。
3. 重用Button组件，使用新的图片源地址。
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或