harmony Next 基础知识点1

容器类---Column和Row

布局容器概念

Column表示沿垂直方向布局的容器

Row表示沿水平方向布局的容器

对齐方式

justifyContent:设置子元素在主轴方向的对齐格式

alignItems:设置子元素在交叉轴方向的对齐格式

主轴和交叉轴的概念

主轴：在Column容器中的子组件是按照从上到下的垂直方向布局的，其主轴的方向是垂直方向；在Row容器中的组件是按照从左到右的水平方向布局的，其主轴的方向是水平方向。

交叉轴：与主轴垂直相交的轴线，如果主轴是垂直方向，则交叉轴就是水平方向；如果主轴是水平方向，则交叉轴是垂直方向。

路由跳转

页面路由：是指在应用程序中实现不同页面之间的跳转和数据传递。

Router有两种页面跳转模式：

①router.pushUrl( )：目标页不会替换当前页，而是压入页面栈中，因此可以用router,back( )返回当前页。

②router.replaceUrl( )：目标页替换当前页，当前页会被销毁并释放资源，无法返回当前页。

此外Router有两种页面实例模式：

①Standard：标准实例模式，每次跳转都会新建一个目标页并压入栈顶。默认就是这种模式

②Single：单实例模式，如果目标页已经在栈中，则离栈顶最近的同UrT页面会被移动到栈顶并重新加载。

注意：页面栈的最大容量上限为32个页面，使用router.clear( )方法可以清空页面栈，释放内存。

通过调用router.getParams()方法获取页面传递过来的自定义参数

装饰器

装饰器：用来装饰类、结构体、方法以及变量，赋予其特殊的含义，如 @Entry 、@Component 、等这个状态变化会引起 UI 变更。

ArkTS装饰器分为三大类：组件定义装饰器、动态构建装饰器、状态管理装饰器。

组件定义装饰器

@Entry装饰的自定义组件用作页面的默认入口组件，加载页面时，将首先创建并呈现

作为一个入口组件，先载入@Entry，再载入其他组件。只有被@Entry和@Preview修饰的组件才能用预览器进行预览展示。 @Entry 和 @Component 是ArkUI中的装饰器，用于定义组件的入口和组件本身。@Entry 表示这个组件是应用的入口组件，@Component 表示这是一个组件，build() //是组件的构建方法，用于定义组件的UI结构。

@Preview装饰的自定义组件可以在DevEco Studio的预览器上进行预览，加载页面时将创建并呈@Preview装饰的自定义组件。与@Entry不同的是，被@Preview装饰预览的是当前自定义组件，而前者预览的则是整个界面。

使用场景：①当存在有多个结构体，查看指定的结构体②查看静态类型自定义组件。

TypeScript 复制代码

//预览组件 test1
@Preview
@Component
struct test1 {
  build() {
    Column(){
      Button("你好")
    }
  }
}
//预览组件 test2
@Preview
@Component
struct test2 {
  build() {
    Column(){
      Button("你好")
    }
  }
}

@Component装饰的struct表示该结构体具有组件化能力，能够成为一个独立的组件，即自定义组件，在build方法里描述UI结构。

其本身拥有四大特性:

①可组合：允许开发人员组合使用内置组件、其他组件、公共属性和方法

②可重用：自定义组件可以被其他组件重用,并作为不同的实例在不同的父组件或容器中使用

③生命周期：生命周期的回调方法可以在组件中配置，用于业务逻辑处理

④数据驱动更新：由状态变量的数据动，实现UI自动更新

@Component创建的子组件可以被调用，一种为本文件内调用：

TypeScript 复制代码

//父组件
@Entry
@Component
struct Index {
  build() {
    Column({space:20}) {
      //调用子组件
      button1()
    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}

//子组件button1
@Component
struct button1{
  build(){
    Column(){
      /* 显示年龄的按钮，点击增加年龄 */
      Button("按钮")
        .type(ButtonType.Normal)
        .borderRadius(10)
    }
  }
}

另一种为跨文件调用，需要通过import导入：

TypeScript 复制代码

//Import.ets
import { Export } from './Export'
@Entry
@Component
struct Export {
  build() {
    Column({space:20}) {
      //调用子组件
      Import()
    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}

//Export
@Component
export struct Export{
  build(){
    Column(){
      /* 显示年龄的按钮，点击增加年龄 */
      Button("按钮")
        .type(ButtonType.Normal)
        .borderRadius(10)
    }
  }
}

动态UI装饰器

@Builder 装饰的方法用于定义组件的声明式UI描述，在一个自定义组件内快速生成多个布局内容当封装完自定义组件，但是只想调用其中的某个组件，不想单起文件，用@Builder

由于buttoner定义在了build()过程外面，struct里面，所以调用要用this.buttoner()

TypeScript 复制代码

@Entry
@Component
struct Index {
  //自定义按钮
  @Builder buttoner(){
    Button("自定义按钮")
      .fontSize(50)
  }

  build() {
    Column({space:20}) {
      //调用子组件
      Button("按钮1")
      this.buttoner()
    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}

@Styles将新的属性函数添加到基本组件上，如Text、Column、Button等。通过@stvles装饰器可以快速定义并复用组件的自定义样式。

TypeScript 复制代码

@Entry
@Component
struct Index {
  build() {
    Column({space:20}) {
      //调用子组件
      Button("你好")
        .card()
      Button("你好")
        .card()
      Button("你好")
        .card()
    }
  }
}
// 自定义组件样式。
@Styles function card(){
  .width("50")
  .height("50")
  .backgroundColor(Color.Red)
}

动态UI装饰器

@State 装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的build方法进行UI刷新。

如下方当点击按钮时，修改message，Text文本组件中绑定this.messageText文本会发生改变。

TypeScript 复制代码

@Entry
@Component
struct Index {
  @state message:string = "Hello World"
  build() {
    Column({space:20}) {
      Text(this.message)
      Button("点击改变")
        .onClick(()=>{
          this.message="你好 世界"
        })
    }
  }
}

@Prop与@State有相同的语义，但初始化方式不同。@Prop装饰的变量必须使用其父组

件提供的@State变量进行初始化，允许组件内部修改@Prop变量，但更改不会通知给父

组件，即@Prop属于单向数据绑定 。

@Prop状态数据具有以下特征：

①支持简单类型:仅支持number、string、boolean简单类型；

②私有:仅在组件内访问；

③支持多个实例:一个组件中可以定义多个标有@Prop的属性；

TypeScript 复制代码

@Entry
@Component
export struct Index {
  @State agef:number=18
  build() {
    Column({space:20}) {
      Text(this.agef.toString()).fontSize(50)
      /* 父亲按钮，点击增加年龄 */
      Button("父亲按钮"+this.agef)
        .onClick(()=>{
          this.agef=this.agef+1
        })
      /* 调用子组件button1，传递（单向）年龄属性 */
      button1({age:this.agef})
    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}

/**
 * 子组件button1
 * @Prop 单向绑定
 */
@Component
struct button1{
  @Prop age:number
  build(){
    Column(){
      /* 显示年龄的按钮，点击增加年龄 */
      Button("单向数据"+this.age)
        .type(ButtonType.Normal)
        .borderRadius(10)
        .onClick(()=>{
          this.age=this.age+1
        })
    }
  }
}

@Link 创建自定义组件时需要将变量的引用传递给@Link变量，在创建组件的新实例时，必须

使用命名参数初始化所有@Link变量。@Link变量可以使用@State变量或@Link变量的引

用进行初始化，@State变量可以通过"$"操作符创建引用。@Link装饰的变量可以和父组件的@State变量建立双向数据绑定。

@Link状态数据具有以下特征：

①支持多种类型:@Link变量的值与@State变量的类型相同，即cass、number、string、boolean或这些类型的数组;

②私有:仅在组件内访问；

③单个数据源:初始化@Link变量的父组件的变量必须是@State变量；

TypeScript 复制代码

@Entry
@Component
export struct Index {
  @State agef:number=18
  build() {
    Column({space:20}) {
      Text(this.agef.toString()).fontSize(50)
      /* 父亲按钮，点击增加年龄 */
      Button("父亲按钮"+this.agef)
        .onClick(()=>{
          this.agef=this.agef+1
        })
      /* 调用子组件button2，链接（双向）年龄属性 */
      button2({age:$agef})
    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}

/**
 * 子组件button2
 * @Link 双向绑定
 */
@Component
struct button2{
  @Link age:number
  build(){
    Column(){
      /* 显示年龄的按钮，点击增加年龄 */
      Button("双向数据"+this.age)
        .type(ButtonType.Normal)
        .borderRadius(10)
        .onClick(()=>{
          this.age=this.age+1
        })
    }
  }
}