ArkTS基础语法1

数据

数据类型

• 字符串（string）
• 数字（number）
• 状态（boolean）

数据声明

let 变量名: 数据类型 = 值;

数组声明

let 数组名: 数据类型[] = [值1, 值2, 值3];
let titles: string[] = ['标题1', '标题2', '标题3'];

对象声明

对象可以包含多个属性，每个属性由键值对组成，键是属性名，值是属性值。
let 对象名: { 属性名: 数据类型, 属性名: 数据类型 } = { 属性名: 值, 属性名: 值 };
let person: { name: string, age: number } = { name: '张三', age: 18 };

函数

函数声明

函数声明使用function关键字，后面跟函数名、参数列表和函数

function 函数名(参数1: 数据类型, 参数2: 数据类型){
  // 函数体
}

箭头函数

箭头函数是函数的一种简写形式，使用=>符号来定义。

let 函数名 = (参数1: 数据类型, 参数2: 数据类型) => {
  // 函数体
}

ArkUI组件

利用组件来开发UI界面

组件分类

• 容器组件：布局
  组件名（）{}
• 内容组件：内容
  组件名（）

属性

属性是组件的特征，用于描述组件的状态或行为。
属性可以在组件声明时设置，也可以在组件使用时动态设置。
属性的设置方式是在组件名后面使用()来设置，属性名和属性值之间使用:来分隔。

组件名（属性名: 属性值）{
  // 组件内容
}

通用属性

• width：组件的宽度
• height：组件的高度
• backgroundColor：组件的背景颜色
• fontColor：组件的字体颜色
• fontSize：组件的字体大小
• fontWeight：组件的字体粗细

特殊属性

文本属性

• fontSize (字体大小) 数值（单位fp）
• fontColor (字体颜色) 色值
• fontWeight (字体粗细) 100~900
• textAlign (文本对齐方式) TextAlign.left | TextAlign.center | TextAlign.right

内外边距属性

边框属性

为组件添加边框效果

.border({
    width:粗细,
    color:颜色
    radius:圆角
    style:边框线条样式
})

安全区属性

扩充组件安全区，防止内容被系统栏遮挡。

.expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaType.TOP,SafeAreaType.BOTTOM])

属性调用

.属性名(属性值)

图像组件

Image(图像资源路径)

路径选择

• 本地路径，图片存放在\src\main\ets\resources\base\media目录下,调用时$r(app.media.图片名)
• 网络路径，图片存放在网络上的地址，调用时('网址名')

语句

if分支语句

if (条件) {
  // 代码块
} else if (条件) {
  // 代码块
} else {
  // 代码块
}

条件表达式

条件表达式是根据条件的真假来决定执行哪个表达式。
条件？条件成立的表达式：条件不成立的表达式

条件渲染

根据逻辑条件结果，渲染不同的组件。

if (条件) {
  // 组件1
} else if (条件) {
  // 组件2
} else {
  // 组件3
}

循环渲染

根据循环条件，重复执行相同的代码块。

ForEach(数组, (item: 数据类型, index: number) => {
  // 代码块,item是数组中的每一个元素,index是数组中的每一个元素的索引
})

状态管理

状态变量：使用装饰器装饰，状态变量数据的变化(事件触发 )，需要UI界面实时渲染
初始化：@Local 状态变量名: 数据类型 = 值;需要声明@ComponentV2

自定义封装函数

使用@Builder装饰器，将函数封装为组件，实现组件的复用。

@Builder
函数名(参数列表) {
  // 组件内容
}

调用：this.函数名(参数列表)(写在组件里面)