HarmonyOS ArkTS基础语法

前提：安装开发工具

      教程：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/tools_overview-0000001053582387

基本代码中的各种组件

// 前三行代码为 装饰器：装饰类、结构、方法和变量，富裕其特殊含义
@Component                            // 自定义组件
struct ListItemComponent {            // 自定义的结构体
  @State isChange: boolean = false;  //@State也是自定义组件 当isChange的值发生改变时，就会触发对应的自定义组件@Component的UI界面的刷新

  build() {                          // UI描述：声明式的方式描述UI结构
    Row() {                          // 内置组件：系统提供的基础组件和容器组件等，可以直接调用
      Text(this.name)                // Row 表示一个水平布局组件 Text 表示一个文本组件
        .width(ItemStyle.LAYOUT_WEIGHT_CENTER)
        .fontSize(FontSize.MIDDLE)   // 属性方法：设置组件的属性

      Text(this.vote)
        .width(ItemStyle.LAYOUT_WEIGHT_CENTER)
        .fontSize(FontSize.SMALL)
    }
    .height(ItemStyle.BAR_HEIGHT)
    .width(WEIGHT)
    .onClick(() => {                 // 事件方法：设置组件对事件的响应逻辑
      this.isChange = !this.isChange;
    })
  }
}

效果图

组件类别

基础组件

• Text
• Button
• Image
• TextInput

容器组件

• Column
• Row
• Stack
• List
• ......

自定义组件

• 将多个基础组件或容器组件结合，抽象成为一个自定义组件，方便在其他页面中进行更加灵活的调用

创建一个自定义组件

定义名为TitleComponent的自定义组件

@Component                    // @Component装饰的struct表示该结构体具有组件化能力，能够成为一个独立的组件
struct TitleComponent {
  ...
  build() {                   // 自定义组件必须定义build方法，在其中进行UI描述
    ...
  }
}

定义名为RankPage的自定义组件，在其中使用TitleComponent组件（ ！！ 一个页面有且仅有一个@Entry装饰的组件）

@Entry                        // @Entry装饰的自定义组件用作页面的默认入口组件，在页面加载时，将首先创建并呈现@Entry装饰的自定义组件
@Component
struct RankPage { // 父组件
  ...
  build() {
    Column() {
      TitleComponent() // 子组件
    }
  }
}

组件的模块化与导入

首先要将组件使用export关键字导出

@Component                    // @Component装饰的struct表示该结构体具有组件化能力，能够成为一个独立的组件
export struct TitleComponent {     // 首先要将组件使用export关键字导出
  ...
  build() {                   // 自定义组件必须定义build方法，在其中进行UI描述
    ...
  }
}

使用import组件导入TitleComponent组件

improt { TitleComponent } from '../view/TitleComponent'
@Entry                        // @Entry装饰的自定义组件用作页面的默认入口组件，在页面加载时，将首先创建并呈现@Entry装饰的自定义组件
@Component
struct RankPage { // 父组件
  ...
  build() {
    Column() {
      TitleComponent() // 子组件
    }
  }
}

自定义组件生命周期回调

@Component装饰的自定义组件

• aboutToAppear() :   组件创建之后，build方法执行之前触发
• aboutToDisappear() :  组件实例被销毁之前触发，用于释放一些不再使用的资源

  @Component
  struct RankPage {
    @state dataSource1: RankData[] = [];
    @state dataSource2: RankData[] = [];
    ...
    aboutToAppear() {                      // 组件创建之后，执行build方法之前触发
      console.log( ${TAG} aboutToAppear );
      this.dataSource1 = rankModel.loadRankDataSource1();
      this.dataSource2 = rankModel.loadRankDataSource2();
    }
  
    aboutToDisappear() {                  // 组件实例被销毁之前触发的  用于释放一些不再使用到的资源
      console.log( ${TAG} aboutToDisappear );
    }
  }

@Entry装饰的自定义组件

• 在@Component组件基础上多了三个生命周期回调
• onPageShow()：页面展示时（build执行之后）触发
• onPageHide()：页面消失时触发
• onBackPress()：按下返回键时触发

@Entry
@Component
struct RankPage {
  ...
  onPageShow() {
    console.log( ${TAG} onPageShow );
  }

  onPageHide() {
    console.log( ${TAG} onPageHide );
  }

  onBackPress() {
    return false;
  }

}

渲染控制语法

条件渲染：使用if/else

Column() {
   if (this.count > 0) {
       Text('count is positive')
   }
}

       

循环渲染：使用ForEach迭代数组，并为每个数组项创建相应的组件

ForEach(
  arr: any[], // 用于迭代的数组
  itemGenerator: (item: any, index?: number) => void, // 生成子组件的lambda函数
  keyGenerator?: (item: any, index?: number) => string // 用于给定数组项生成唯一且稳定的键值
)

组件状态管理

@State装饰的变量是组件内部的状态数据，当状态数据被修改时，会自动进行UI刷新

@Component
struct ListItemComponent {
  @State isChange: boolean = false;    //@State装饰的变量是组件内部的状态数据，当状态数据被修改时，会自动进行UI刷新

  build() {
    Row() {
      Text(this.name)
        .fontColor(this.isChange ? ItemStyle.COLOR_BLUE : ItemStyle.COLOR_BLACK)  // 点击一下即变色

      Text(this.vote)
        .fontColor(this.isChange ? ItemStyle.COLOR_BLUE : ItemStyle.COLOR_BLACK)
    }
    .height(ItemStyle.BAR_HEIGHT)
    .width(WEIGHT)
    .onClick(() => {                 // 事件方法：设置组件对事件的响应逻辑
      this.isChange = !this.isChange;
    })
  }
}

所示代码实现了选中变色的功能

@Link装饰的变量可以和父组件的@State变量建立双向数据绑定。任何一方所做的修改都会反映给另一方。

双向绑定操作