目录
ArkTS语言
ArkTS继承了TS的所有特性
Index.ets 界面开发------界面UI
ArkTS以声明方式组合和扩展组件来描述应用程序的UI,同时还提供了基本的属性,事件配置方法。
如图为DevEco界面:
常见概念
-
装饰器:用于装饰类、结构、方法以及变量,并赋予其特殊的含义,如上述示例汇总@Entry,@Component 和@State 表示组件中的状态变量,状态变量变化会触发UI刷新。
-
UI描述:以声明式的方式来描述UI的结构,*build(){}
-
自定义组件:可复用的UI单元,可组合其他组件
-
系统组件:ArkUI框架中默认内置的基础和容器组件,可直接被开发者调用。
-
属性方法:组件可以通过链式调用配置多项属性
-
事件方法:组件可以通过链式调用设置多个事件的响应逻辑
装饰器
@Entry 装饰器,标明当前组件的入口,装饰自定义的组件,表示该自定义组件为入口组件
在一个UI页面中,最多可以用@Entry 装饰一个自定义组件
@Component 装饰器,表明后面代码为自定义组件
@符号开头一般代表的都是装饰器
装饰器只能装饰一个语句/代码块,例如:
@State xiaoming: Person = new Person('xiaoming',13)
@State xiaohong: Person = new Person('xiaohong',14,new Person("lilei",14))
State装饰器
-
View(UI):UI渲染,指将build方法内的UI描述和@Builder装饰的方法内的UI描述映射到界面。
-
State:状态,指驱动UI更新的数据,用户通过触发组件的事件方法,改变状态数据。状态数据的改变,引起UI的重新渲染。
-
状态变量:被状态装饰器装饰的变量,状态变量值的改变会引起UI的渲染更新。
代码案例
//自定义类型
class Person{
public name :string;
public age :number
constructor(xName:string,xAge:number) {
this.name = xName
this.age = xAge
}
}
//自定义子组件
@Component
struct MyChild{
@State
person:Person = new Person('饼干',20)
private increase: number = 1
build() {
Column(){
Text(`${this.person.name}`)
.height(80)
Divider()
Button('修改名字')
.onClick(()=>{
this.person.name = this.person.name === '饼干'?'面包':'饼干'
})
.height(80)
.width(250)
.margin(5)
Button(`修改年龄:${this.person.age}`)
.onClick(()=>{
this.person.age += this.increase
})
.height(80)
.width(250)
.margin(5)
}
}
}
@Entry
@Component
struct MyParent{
build() {
Column(){
//构建两个子组件
MyChild({person:new Person('法棍',18)})
MyChild({increase:2})
}
}
}
界面如下,点击按钮可以更改名字和年龄
注:因为两个组件是并行组件,所以一个更改时,另一个没有变化
Prop装饰器
@Prop装饰的变量可以和父组件建立单向的同步关系。@Prop装饰的变量是可变的,但是变化不会同步回其父组件。从API Version 9开始,该装饰器支持在ArkTS卡片中使用
-
@Prop 变量允许在本地修改,但修改后的变化不会同步回父组件 和父组件建立单向的同步关系
-
当父组件中的数据源更改时,与之相关的@Prop装饰的变量都会自动更新。如果子组件已经在本地修改了@Prop装饰的相关变量值,而在父组件中对应的@State装饰的变量被修改后,子组件本地修改的@Prop装饰的相关变量值将被覆盖。
-
重要:@Prop装饰器不能在@Entry装饰的自定义组件中使用
父组件@State到子组件@Prop简单数据类型同步
@State装饰器所装饰的状态变量是@Prop装饰器所装饰的状态变量的一个数据源,数据源改变会影响@Prop,反之则不会影响
代码示例
@Component
struct MyChild{
@Prop
age: number = 20
private increase: number= 1
build(){
Column(){
if (this.age >= 18){
Text(`子组件中的age已经成年了:${this.age}`)
.height(80)
}
else{
Text(`子组件未成年: ${this.age}`)
.height(80)
}
Button('-修改子组件age')
.onClick(()=>{
this.age -= this.increase
})
.height(80)
.width(250)
.margin(5)
}
}
}
@Entry
@Component
struct MyParent {
@State
init_age: number = 18
build() {
Column(){
Text(`父组件中的初始age:${this.init_age}`)
.height(80)
Button('+修改父组件中的init_age')
.onClick(()=>{
this.init_age += 1
})
.height(80)
.width(250)
.margin(5)
Divider()
MyChild({age: this.init_age,increase:2})
}
}
}
运行界面如下
此时修改子组件,父组件不会改变。修改父组件子组件年龄也会发生变化
Link装饰器
子组件中被@Link装饰器装饰的变量与其父组件中对应的数据源建立双向数据绑定。从API Version 9 开始,该装饰器支持在ArkTS卡片中使用。
需要注意,@Link装饰的变量与其父组件中的数据源共享相同的值。@Link 装饰器不能在@Entry装饰的自定义组件中使用
代码展示
// 自定义按钮的信息类型
class ButtonStates{
value: string
width: number = 0
constructor(value : string, width: number) {
this.value = value
this.width = width
}
}
@Component
struct MyChildGreenButton{
// 拥有绿色按钮的组件,Link装饰器实现双向同步
@Link
buttonState:ButtonStates //使用Link来装饰自定义类型
build() {
Button(`${this.buttonState.value}`)
.width(this.buttonState.width)
.height(150)
.backgroundColor('#7FFFAA')
.onClick(()=>{
//点击按钮,实现宽度的变化
if(this.buttonState.width < 700)
{
this.buttonState.width += 100
}
else{
// 按钮的宽度回到初始值
this.buttonState = new ButtonStates('绿色按钮',100)
}
})
}
}
@Component
struct MyChildRedButton{
// 拥有红色按钮的组件,Link装饰器实现双向同步
@Link
value : string;
@Link
wide : number; //使用Link来装饰简单类型
build() {
Button(`${this.value}`)
.width(this.wide)
.height(150)
.backgroundColor('#FFB6C1')
.onClick(()=>{
//点击按钮,实现宽度的变化
this.wide +=50
})
}
}
@Entry
@Component
struct MyParent {
@State
parentGreenButton: ButtonStates = new ButtonStates('一号子组件', 300)
@State
parentRedValue: string = '二号子组件'
@State
parentRedWidth: number = 200 // 绿色按钮的宽度
build() {
Column() {
// 父组件中调整按钮的宽度
Button(`父组件中修改绿色按钮的宽度:${this.parentGreenButton.width}`)
.onClick(() => {
this.parentGreenButton.width = this.parentGreenButton.width < 700 ? this.parentGreenButton.width + 100 : 100
})
Button(`父组件中修改红色按钮的宽度:${this.parentRedWidth}`)
.onClick(() => {
this.parentRedWidth = this.parentRedWidth < 700 ? this.parentRedWidth + 100 : 100
})
Divider()
MyChildGreenButton({buttonState: $parentGreenButton})
MyChildRedButton({value:$parentRedValue,wide: $parentRedWidth})
}
}
}
运行界面如下:
点击任意按钮都会改变大小,且数值是同步的(双向)
创建组件
根据组件构造方法的不同,创建组件包含有参数和无参数两种方式
与TS不同,创建组件不需要NEW运算符
@State message: string = 'Hello World' //定义一个变量
//加装饰器就表示它是一个状态变量,变量值发生变化时会触发变量所对应组件UI界面自动刷新
build(){
//表示在代码块中以声明式来描述UI结构
Row()
{
Column()
{
Text(this.message) //文本框组件
.fontSize(50) //字体大小,50像素
.fontWeight(FontWeight.Bold) //字体类型
//属性调整
}
.width('100%') //这一列的框占百分百
} //行列,内置组件
.height('100%') //这一行占百分百[全部填充]
}
RelativeContainer 包含Row和Column
Divider分隔器组件 //界面显示就是一根分割线
常用组件属性一览
尺寸
名称 | 说明 | 取值举例 |
---|---|---|
width | 宽度,默认状态时使用元素自身内容需要的宽度,值为Length类型 | .width(100/'100%'/100px) |
height | 高度,默认状态时使用元素自身内容需要的高度,值为Length类型 | .height(100/'100%'/100px) |
size | 大小,可以同时设置宽和高,值为JSON对象,内部包含宽度和高度,宽和高类型为Length类型 | .size({width: '100%', height: '100%'}) |
padding | 内边距,可以同时设置4个方向内边距,也可设置指定方向的内边距,设置4个方向是,采用JSON对象参数,内部包含4个方向的值都是Length类型,当设置一个值时表示同时设置4个方向内边距一致 | .padding({.top: ... ,bottom:.... ,left:.... ,right: ....}) |
margin | 外边距,方式同上 | 同上 |
constrainSize | 设置约束尺寸,对组件布局进行尺寸范围限制,包括宽度和高度的最小值和最大值 | .constrainSize({minWidth:.... , minHeight:... , maxWidth:.. , maxHeight:...}) |
layoutWeight | 组件在布局中大小权重,在容器尺寸确定时,元素与兄弟节点主轴布局尺寸按照权重进行分配,默认自适应占满剩余空间。该属性仅在Row/Column/Flex 有效 | 值为number类型数值 |
位置
名称 | 说明 | 取值举例 |
---|---|---|
align | 组件内容的对齐方式,只有当设置的宽、高超过元素内容大小时才有效,值为Alignment类型 | .align(Alignment.Top/TopStart/End/Center/Bottom/Start) |
direction | 设置元素水平方向的布局,可选值为Direction枚举类型 | .direction(Direction.Auto/Ltr/Rtl) |
position | 位置,表示组件在父容器中的位置,默认以组件的左上角为基准 | .position({x: .. ,y: ....}) |
markAnchor | 组件位置定位时的锚点,以元素顶部起点作为基准点进行偏移 | .markAnchor({x : ... , y : ...}) |
offset | 相对布局完成位置设置坐标偏移量,设置该属性,不影响父容器布局,仅在绘制时进行位置调整 | .offset({x : ... , y : ... })默认值为(0,0) |
背景
名称 | 说明 | 取值举例 |
---|---|---|
backgroundColor | 背景颜色,值为Color类型 | .backgroundColor() |
backgroundImage | 背景图片,可以设置一张图片的地址,可以是网络图片资源或本地图片资源 | .backgroundImage('/common/bg.jpg',ImageRepeat.X)表示使用bg.jpg作为背景,沿x轴方向重复平铺 |
backgroundImageSize | 背景图片大小,值为JSON格式数据或ImageSize类型 | .backgroundImageSize({width: ... , height: ...}) |
backgroundImagePosition | 背景图在组件中的显示位置,值为JSON格式数据或Alignment类型 | .backgroundImagePosition({width: ... , height : ...}) |
字体设置
文本组件 Text
字体大小设置:.fontSize( ) 括号内可填string(单位为px,fp)|number|resource类型,number默认为像素(px)单位
字体粗细设置:.fontWeight() 括号内可填string|FontWeight|number类型,number取值范围[100,900],取值间隔为100
字体颜色设置:.fontColor() 括号内
-
Color.XX 只有常用颜色 大写字母开头
-
RGB格式: 'rgb(0,128,0)'
-
十六进制编码: '#008000' '0x008000'
字体样式设置:.fontStyle 括号内FontStyle.Normal/...