鸿蒙组件

2023-12-28 本文已影响0人家乡的蝈蝈

一、组件基础

1.1 什么是ArkTS

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。
误区：前端同学，原有的DOM/WebAPI在这里皆不存在，如：document.querySelector/window.location
ArtTS绝不是TS：

TS在前端中虽然有类型约束，但是他会编译成js去运行
ArtTS编译后直接映射字节码-编译过程带类型

ArkTS采用声明式UI的方法来绘制页面，设置属性，绑定事件

1.2 组件结构

UI组件结构

1.2.1 struct-自定义组件

自定义组件必须使用struct关键字来声明（注意不能有继承关系-组件名不能系统组件名重名）
语法： struct 组件名 {}
注：struct关键字声明的UI描述-必须被@Component或者@CustomDialog修饰

1.2.2 Component修饰符

Component装饰器只能修饰struct关键字声明的结构，被修饰后的struct具备组件的描述(渲染)能力

1.2.3 build函数

用于定义组件的UI描述，一个struct结构必须实现build函数
build函数可以没有内容，如果有的话，必须有且只有一个容器组件(可以放置子组件的组件)（只有被entry装饰里面有限制）
常见容器组件-：Flex、Column、Row、List、Grid、Panel、Button

1.2.4 entry修饰符

entry将自定义组件定义为UI页面的入口，最多可以使用entry装饰一个自定义组件(在一个ets文件中)
entry修饰的组件，最终会被注册，具体文件位置：main/resources/base/profile/main_pages.json

a、自动注册-新建组件时，采用新建Page的方式
b、手动注册-新建一个ets文件，自己在main_pages.json中手动添加路径

注意：如果你手动删除了某一个带entry的组件，你需要手动去main_page中去删除该路径，否则编译会报错

1.2.5总结

一个UI描述必须使用struct来声明，不能继承
struct必须被Component或者CustomDialog修饰
struct必须实现build方法，build方法可以没有元素，但是有的话有且只有一个可容纳子组件的容器组件(entry修饰的组件)
entry修饰符表示该组件是页面级组件，一个文件中只允许修饰一个struct组件
采用分拆组件的形式可以有效解解耦我们的业务

1.3 系统组件（ArkUI）

常用组件：
Text 文本组件-（只能放Span子组件）

Text() {
  Span('$$')
    .fontSize(12)
  Span('2.5')
    .fontSize(18)
}

Column 列组件，纵向排列，Flex布局主轴是Y （任意子组件）
Row 行组件，横向向排列，Flex布局主轴是X （任意子组件）
Flex 以弹性方式布局子组件的容器组件。(存在二次布局，官方推荐有性能要求，使用Column和Row代替) （任意子组件）
Button 按钮组件（单子组件）
TextInput 输入框组件（无子组件）
Image （无子组件）
Button (单个子组件)
List (限制ListItem子组件)
Scroll (限制单个子组件)

使用组件
使用组件采用 组件名()的语法
有构造参数采用 组件名(参数)的语法
组件里放置子组件采用组件名() { 子组件的语法 }的链式语法
组件设置属性采用组件名().width().height()的语法
组件又有属性又有子组件采用组件名(){ ... 子组件 }.width().height()的语法

在arkUI中，我们的内容如果超过了屏幕显示，则不会显示滚动条，需要使用Scroll来包裹
需要注意的是： 该组件滚动的前提是主轴方向大小小于内容大小。子组件不要设置高度，否则不能滚动

1.4 组件事件

监听原生组件的事件和设置属性的方式是一样的都是链式调用，值得注意的是，我们注册事件都要使用箭头函数的写法，Next版本会有对于匿名函数function的限制
function test() {} const test = () => {}
请注意：在注册事件中的逻辑务必使用箭头函数 () => {}，极不推荐 function() {}

a、因为function中this指向为undefind
b、Next下一代不再支持funtion匿名函数声明
c、箭头函数中的this指向当前struct实例，可以方便的调用方法和获取属性

public和private关键字
如果不写或者写public 表示该属性可被外界即父组件赋值,如果写private表示该属性只会被该组件的this获取
当我们事件处理逻辑比较复杂，写在UI描述中无法抽提的时候，我们可以在struct结构体中定义;当我们需要在组件中记录一些状态时，变量应该显示的在struct中声明;

struct EventCase {
  @State account:string = ""
  @State password:string = ""
  getBtnState():boolean {
    return this.account !== "" && this.password !== ""
  }
}

说明：promptAction和AlertDailog都可以弹出提示 promptAction需要引入包，AlertDialog不需要引入就可以直接使用

1.5 组件状态

@State装饰的变量，或称为状态变量，一旦变量拥有了状态属性，就和自定义组件的渲染绑定起来。当状态改变时，UI会发生对应的渲染改变。
加上该@State修饰符后，当数据发生改变，造成了build的重新执行，来保证我们状态的变化。
State修饰的类型：

Object、class、string、number、boolean、enum类型，以及这些类型的数组
类型必须被指定
不支持any，不支持简单类型和复杂类型的联合类型，不允许使用undefined和null

css知识点：
layoutWeight(1)，表示占父容器剩余宽度的百分比
class是ArkTS主推的定义对象类型的形式，interface/type也可以用，但是有限制

class User {
  name: string
  age: number
  address: {
    province: string
    city: string
    area: string
  }
}

State修饰符声明的数据，只能监听到第一层的数据变化，如果发现第二层变化-不会触发UI更新

@State
user: 类型 = {
  a: {
    b: '1323'
  }
}
this.user.a = { ...this.user.a, b: '456'  }

css知识点：
layoutWeight(1)，表示占父容器剩余宽度的百分比
TS知识点：整数和字符串互转
toString()：整数转字符串; parseInt(value):强转整数
结构赋值只支持单层赋值并引起UI更新，第二层不支持，所以使用延展属性...

this.user.address = { ...this.user.address, province: value }
{...}：表示前端的浅拷贝，先将前端的属性赋值给一个对象，再改变其中一个值
this.user.address.province = value
this.user = {...this.user}

总结：
修饰符：

@Entry(页面级组件)
@Component
struct Index {
  @State    // 响应式数据 数据变化 => UI更新
  build() {
    // 可以没有内容
    // 被entry修饰的组件 如果只放一个组件- 这个组件应该是一个容器组件- 不能同时放两个
  }
}