鸿蒙开发基础-组件基础

ArkTs

1.简介

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。

2.与TS/JS区别

1>相关约束

前端开发过程中所有的js/ts语法大部分支持的，但是为了增加语言的规范性，避免产生一些不必要的运行开销。在ts/js上做了一些约束

1.不支持Symbol()API
2.不支持索引访问字段
3.不支持delete运算符
4.仅允许在表达式中使用typeof运算符
5.不支持in运算符
6.限制使用标准库
7.
8.

2>拓展

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

拓展能力

○ 定义声明式UI、自定义组件、动态扩展UI元素；
○ 提供ArkUI系统组件，提供组件事件、方法、属性；
○ 共同构成 UI 开发主体
1 . 基本语法
○ 定义声明式UI、自定义组件、动态扩展UI元素；
○ 提供ArkUI系统组件，提供组件事件、方法、属性；
○ 共同构成 UI 开发主体
2. 状态管理
○ 组件状态、组件数据共享、应用数据共享、设备共享；
3. 渲染控制
○ 条件渲染、循环渲染、数据懒加载

3>总结

● AktTS提供原有前端范畴内的一切TypeScript和JavaScript的类型及方法支持
● 不是所有都支持- 比如解构不支持（Next版本）
● ArkTS采用声明式UI的方法来绘制页面，设置属性，绑定事件

二.组件基础

1.组件结构

ArkTS通过装饰器 @Component 和 @Entry 装饰 struct 关键字声明的数据结构，构成一个自定义组件。
自定义组件中提供了一个 build 函数，开发者需在该函数内以链式调用的方式进行基本的 UI 描述，UI 描述的方法请参考 UI 描述规范

2.struct自定义组件

struct用来描述UI，包含UI的所有信息，注意不能有继承关系或重名
语法：

@Component
struct Index{
}
@CustomDialog
struct Index2{
}

struct必须被@Component或者@CustDialog翻译

3.Component修饰符

Component装饰器只能修饰struct关键字，被修饰后struct具有组件描述渲染能力

4.build函数

用于定义组件描述，一个struct必须实现build函数

@Component
struct MT{
build(){
}
}

build函数是组件Component提供以及实现的一个函数，build函数可以没有内容，但是如果有，必须放一个也只能放一个容器组件

常见的容器组件：Flex-Column-Row-List-Grid-Panel

Link组件和Prop组件

当在eTS中使用装饰器时，可以使用@Prop和@Link来修饰组件的属性和方法。下面是对它们的详细介绍：

1. @Prop装饰器：
   @Prop装饰器用于将一个类的属性设置为组件的属性，使其可以从外部传入并在组件中使用。这样可以实现组件和父组件之间的数据传递。

示例代码：

import { Component, Prop } from 'eos-topview';

@Component
class MyComponent {
  @Prop
  private message: string = '';

  // ...
}

在上面的代码中，通过使用@Prop装饰器，将message属性设置为组件的属性。这意味着MyComponent组件可以接收一个名为message的属性，并在组件中使用。

父组件中使用该组件，并传递message属性的值：

<MyComponent message="Hello, World!" />

在父组件中，通过传递message属性的值"Hello, World!"给MyComponent组件，MyComponent组件就可以使用这个属性值了。

2. @Link装饰器：
   @Link装饰器用于将一个类的属性与某个函数进行关联。这样，在组件内部可以触发这个关联的函数，从而执行某些操作。

示例代码：

import { Component, Link } from 'eos-topview';

@Component
class MyComponent {
  @Link
  private goToHomePage: Function;

  handleClick() {
    // 执行一些逻辑...
    this.goToHomePage();
  }

  // ...
}

在上面的代码中，通过使用@Link装饰器，将goToHomePage属性与某个函数进行关联。这样，在组件的事件处理函数中，可以通过调用this.goToHomePage()来执行关联的函数。

父组件中使用该组件，并传递goToHomePage函数：

<MyComponent goToHomePage={() => console.log('Go to home page!')} />

在父组件中，通过传递一个名为goToHomePage的函数给MyComponent组件，MyComponent组件就可以触发这个函数来执行相应的操作了。

通过使用@Prop和@Link装饰器，可以实现组件的属性传递和与外部函数的关联，从而提高组件的灵活性和可复用性。

希望这样的详细介绍能够帮助你理解@Prop和@Link装饰器的作用和用法。如有进一步的问题，请随时提问。

entry修饰符

在ets文件中，entry只能修饰一个struct自定义组件，也只能有一个entry，entry是UI页面的入口

entry修饰的组件，最终会被注册在main/resources/base/profile/main_pages.json

自动注册

在新建组件时，采用新建Page的方式

手动注册

新建ets文件时，自己在main_pages.json中手动添加路径

5.总结

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

三.系统组件

1.常用系统组件

Text文本组件(Span子组件)

里面只能放Span

Column{
Text("hello world")
Text(){
Span("hellow")
.fansize(12)    
Span("world")
}
.fansize(20)
}

Column列组件，纵向排布(任意子组件)

Row行组件（任意子组件）

Row({space:15}){//space是设置间距的
Column()
.width(100)
.height(200)
.backgroundColor(Color.Pink)
Column()
.width(100)
.height(200)
.backgroundColor(Color.Red)
Column()
.width(100)
.height(200)
.backgroundColor(Color.Blue)
}
.width('%100')
.justifyContent(FlexAlign.Start)//三个组件分布方式，这个是靠左对齐
.justifyContent(FlexAlign.Center)//这个是居中，第二个会覆盖第一个
// .justifyContent(FlexAlign.End)
// .justifyContent(FlexAlign.SpaceBetween)
 // .justifyContent(FlexAlign.SpaceAround)
// .justifyContent(FlexAlign.SpaceEvenly)
}.margin({
top:20
})//与上一个组件的间距

Flex以弹性布局的子组件的容器组件。（性能不如Row和Column）（任意子组件）

Button按钮组件（单子组件）

TextInput输入框组件（无子组件）

Image(无子组件)

Scroll滚动条组件

如果界面超过屏幕长度，不会自动出现滚动条，
需要放在Scroll(){}里面

width(100)
              .height(200)
              .backgroundColor(Color.Red)
            Column()
              .width(100)
              .height(200)
              .backgroundColor(Color.Blue)
          }
          .width('100%')
          // .justifyContent(FlexAlign.Start)
          .justifyContent(FlexAlign.Center)
          // .justifyContent(FlexAlign.End)
          // .justifyContent(FlexAlign.SpaceBetween)
          // .justifyContent(FlexAlign.SpaceAround)
          // .justifyContent(FlexAlign.SpaceEvenly)

          Column({ space: 20 }) {
            Column()
              .width(200)
              .height(100)
              .backgroundColor(Color.Pink)
            Column()
              .width(200)
              .height(100)
              .backgroundColor(Color.Red)
            Column()
              .width(200)
              .height(100)
              .backgroundColor(Color.Blue)
          }.margin({
            top: 20
          })

          Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
            Column()
              .width(100)
              .height(200)
              .backgroundColor(Color.Pink)
            Column()
              .width(100)
              .height(200)
              .backgroundColor(Color.Red)
            Column()
              .width(100)
              .height(200)
              .backgroundColor(Color.Blue)
          }
          .margin({
            top: 200
          })

        }
        .width('100%')
      }
    }

  }
}

List(限制ListItem子组件）

Scroll(限制单个子组件）

2.组件的使用

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

四.组件事件

@Entry
@Component
struct Event{
build(){
Row(){
Column({space:15}){
TextInput({placeholder:"请输入用户明"})
.backgroundColor('#f4f5f6')
.width('100%')
.onChange((value)=>{
AlertDialog.show({
message:value
})
})
}

}
}

五.零碎知识

1.vp像素

vp是华为的比例大小的单位，通过与物理像素匹配，来与不同屏幕大小适配，达到相同舒适的视觉

2.设置语素宽高比

.aspectRatio(number)