目录
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
ArkTS是有ArkTSUI框架提供,用于以声明式开发界面的语言。其构建页面的过程,其实就是组合的过程主要体现在两个方面:
- 描述UI的呈现效果,而不关心过程
- 状态驱动视图更新
类似苹果的SwiftUI通过组合视图View 、安卓的JetPackCompose通过组合@Composable函数通过 组合自定义 组件完成页面的创建。
一、自定义组件的组成?
ArkTS通过struct声明组件名,并通过@Component和@Entry装饰器构成一个自定义组件。
使用@Entry和@Component的自定义组件作为页面的入口,会在页面加载时首先渲染。
@Entry
@Component
struct ToDoList {...}
在自定义组件内部需要使用build方法来进行UI 描述
@Entry
@Component
struct ToDoList
...
build() {
...
}
}
build方法内部可以容纳内置组件和 其他自定义组件,如Column、Row、Text等
@Entry
@Component
struct ToDoList {
...
build() {
Column(...) {
Text(...)
...
ForEach(...{
TodoItem(...)
},...)
}
...
}
}
二、基本组件的属性和布局
ArkTS 提供了额属性方法用于描述界面的样式
- 链式调用在配置多个属性时,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中还提供了内置枚举类型,如Color,FontWeight等,例如设置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)
总结
今天就写这么写,其他组件用法改日在写