目录
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/...
312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
