建站平台 在线提交功能,公众号平台app,学前端好还是后端好,北京网站设计提供商HarmonyOS#xff08;二#xff09; 初识ArkTS开发语言#xff08;下#xff09;之TypeScript入门
声明式UI基本概念
应用界面是由一个个页面组成#xff0c;ArkTS是由ArkUI框架提供#xff0c;用于以声明式开发范式开发界面的语言。
声明式UI构建页面的过程#xff…HarmonyOS二 初识ArkTS开发语言下之TypeScript入门
声明式UI基本概念
应用界面是由一个个页面组成ArkTS是由ArkUI框架提供用于以声明式开发范式开发界面的语言。
声明式UI构建页面的过程其实是组合组件的过程声明式UI的思想主要体现在两个方面
描述UI的呈现结果而不关心过程状态驱动视图更新
类似苹果的SwiftUI中通过组合视图View安卓Jetpack Compose中通过组合Composable函数ArkUI作为HarmonyOS应用开发的UI开发框架其使用ArkTS语言构建自定义组件通过组合自定义组件完成页面的构建。
自定义组件的组成
ArkTS通过struct声明组件名并通过Component和Entry装饰器来构成一个自定义组件。
使用Entry和Component装饰的自定义组件作为页面的入口会在页面加载时首先进行渲染。
Entry
Component
struct ToDoList {...}例如ToDoList组件对应如下整个代办页面。
图1 ToDoList待办列表
使用Component装饰的自定义组件如ToDoItem这个自定义组件则对应如下内容作为页面的组成部分。
Component
struct ToDoItem {...}图2 ToDoItem
在自定义组件内需要使用build方法来进行UI描述。
Entry
Componentstruct ToDoList...build() {...}
}build方法内可以容纳内置组件和其他自定义组件如Column和Text都是内置组件由ArkUI框架提供ToDoItem为自定义组件需要开发者使用ArkTS自行声明。
Entry
Component
struct ToDoList {...build() {Column(...) {Text(...)...ForEach(...{TodoItem(...)},...)}...}
}配置属性与布局
自定义组件的组成使用基础组件和容器组件等内置组件进行组合。但有时内置组件的样式并不能满足我们的需求ArkTS提供了属性方法用于描述界面的样式。属性方法支持以下使用方式 常量传递 例如使用fontSize(50)来配置字体大小。 Text(Hello World).fontSize(50)变量传递 在组件内定义了相应的变量后例如组件内部成员变量size就可以使用this.size方式使用该变量。 Text(Hello World).fontSize(this.size)链式调用 在配置多个属性时ArkTS提供了链式调用的方式通过’.方式连续配置。 Text(Hello World).fontSize(this.size).width(100).height(100)表达式传递 属性中还可以传入普通表达式以及三目运算表达式。 Text(Hello World).fontSize(this.size).width(this.count 100).height(this.count % 2 0 ? 100 : 200)内置枚举类型 除此之外ArkTS中还提供了内置枚举类型如ColorFontWeight等例如设置fontColor改变字体颜色为红色并私有fontWeight为加粗。 Text(Hello World).fontSize(this.size).width(this.count 100).height(this.count % 2 0 ? 100 : 200).fontColor(Color.Red).fontWeight(FontWeight.Bold)对于有多种组件需要进行组合时容器组件则是描述了这些组件应该如何排列的结果。
ArkUI中的布局容器有很多种在不同的适用场合选择不同的布局容器实现ArkTS使用容器组件采用花括号语法内部放置UI描述。 这里我们将介绍最基础的两个布局——列布局和行布局。
对于如下每一项的布局两个元素为横向排列选择Row布局
图3 Row布局
Row() {Image($r(app.media.ic_default))...Text(this.content) ...
}
...类似下图所示的布局整体都是从上往下纵向排列适用的布局方式是Column列布局。
图4 Column布局
Column() {Text($r(app.string.page_title))...ForEach(this.totalTasks,(item) {TodoItem({content:item})},...)}改变组件状态
实际开发中由于交互页面的内容可能需要产生变化以每一个ToDoItem为例其在完成时的状态与未完成时的展示效果是不一样的。
图5 不同状态的视图
声明式UI的特点就是UI是随数据更改而自动刷新的我们这里定义了一个类型为boolean的变量isComplete其被State装饰后框架内建立了数据和视图之间的绑定其值的改变影响UI的显示。
State isComplete : boolean false;图6 State装饰器的作用
用圆圈和对勾这样两个图片分别来表示该项是否完成这部分涉及到内容的切换需要使用条件渲染if / else语法来进行组件的显示与消失当判断条件为真时组件为已完成的状态反之则为未完成。
if (this.isComplete) {Image($r(app.media.ic_ok)).objectFit(ImageFit.Contain).width($r(app.float.checkbox_width)).height($r(app.float.checkbox_width)).margin($r(app.float.checkbox_margin))
} else {Image($r(app.media.ic_default)).objectFit(ImageFit.Contain).width($r(app.float.checkbox_width)).height($r(app.float.checkbox_width)).margin($r(app.float.checkbox_margin))
}由于两个Image的实现具有大量重复代码ArkTS提供了Builder装饰器来修饰一个函数快速生成布局内容从而可以避免重复的UI描述内容。这里使用Bulider声明了一个labelIcon的函数参数为url对应要传给Image的图片路径。
Builder labelIcon(url) {Image(url).objectFit(ImageFit.Contain).width($r(app.float.checkbox_width)).height($r(app.float.checkbox_width)).margin($r(app.float.checkbox_margin))
}使用时只需要使用this关键字访问Builder装饰的函数名即可快速创建布局。
if (this.isComplete) {this.labelIcon($r(app.media.ic_ok))
} else {this.labelIcon($r(app.media.ic_default))
}为了让待办项带给用户的体验更符合已完成的效果给内容的字体也增加了相应的样式变化这里使用了三目运算符来根据状态变化修改其透明度和文字样式如opacity是控制透明度decoration是文字是否有划线。通过isComplete的值来控制其变化。
Text(this.content)....opacity(this.isComplete ? CommonConstants.OPACITY_COMPLETED : CommonConstants.OPACITY_DEFAULT).decoration({ type: this.isComplete ? TextDecorationType.LineThrough : TextDecorationType.None })最后为了实现与用户交互的效果在组件上添加了onClick点击事件当用户点击该待办项时数据isComplete的更改就能够触发UI的更新。
Component
struct ToDoItem {State isComplete : boolean false;Builder labelIcon(icon) {...}...build() {Row() {if (this.isComplete) {this.labelIcon($r(app.media.ic_ok))} else {this.labelIcon($r(app.media.ic_default))}... }....onClick(() {this.isComplete !this.isComplete;})}
}循环渲染列表数据
刚刚只是完成了一个ToDoItem组件的开发当我们有多条待办数据需要显示在页面时就需要使用到ForEach循环渲染语法。
例如这里我们有五条待办数据需要展示在页面上。
total_Tasks:Arraystring [早起晨练,准备早餐,阅读名著,学习ArkTS,看剧放松
]ForEach基本使用中只需要了解要渲染的数据以及要生成的UI内容两个部分例如这里要渲染的数组为以上的五条待办事项要渲染的内容是ToDoItem这个自定义组件也可以是其他内置组件。
图7 ForEach基本使用
ToDoItem这个自定义组件中每一个ToDoItem要显示的文本参数content需要外部传入参数传递使用花括号的形式用content接受数组内的内容项item。
最终完成的代码及其效果如下。
Entry
Component
struct ToDoList {...build() {Row() {Column() {Text(...)...ForEach(this.totalTasks,(item) {TodoItem({content:item})},...)}.width(100%)}.height(100%)}}图8 ToDoList页面
