鸿蒙(HarmonyOS)应用开发——装饰器

简介

ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript(简称TS)的基础上,扩展了声明式UI、状态管理等相应的能力,让开发者可以以更简洁、更自然的方式开发高性能应用。TS是JavaScript(简称JS)的超集,ArkTS则是TS的超集。ArkTS会结合应用开发和运行的需求持续演进,包括但不限于引入分布式开发范式、并行和并发能力增强、类型系统增强等方面的语言特性;下面是官网对ArkUI框架的一个整体介绍
鸿蒙(HarmonyOS)应用开发——装饰器_第1张图片

ArkTS 声明式的基本组成

创建hello world 项目的时候,我们可以看到ide 创建了默认的index 页面,其中的代码为

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

根据这个我们来介绍一下ArkTS里面涉及的语法

装饰器

是装饰类、结构、方法和变量,赋予其特殊的含义

@Component

@Component 表示自定义组件,是可以复用的ui 单元,可以组合其他组件。
系统提供了丰富的内置组件:Text、Button、Image、TextInput、Row等

@Component
struct TitleComponent{
   build(){

   }
}

通过@Component 装饰器 和struct 关键字组合起来告知系统这是一个组件
build 方法,在其中进行ui 描述

@Entry

装饰的自定义组件用作页面的默认入口组件,加载页面时,将首先创建并呈现@Entry装饰的自定义组件;需要注意的点:

  • 一个页面有且仅有能有一个@Entry;
  • 只有被@Entry修饰的组件或者子组件才会在页面上显示

@Entry
@Component
struct HomePage{
   build(){
      Column(){

      }
   }

   isRenderText(){

   }
}

通常情况下,子组件和父组件在不同的文件中,则可以使用导出方式,以供外部使用。使用关键字 export
在子组件中的代码为:

@Component
export  struct TitleComponent{
  build(){

  }
}

import {TitleComponent} from '../components/TitleComponent'

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        TitleComponent()
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

@State

被他装饰的变量值发生改变时,会触发该变量所对应的自定义组件的UI界面进行刷新。


import {TitleComponent} from '../components/TitleComponent'

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        TitleComponent()
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }.height('100%')
    .onClick(()=>{
      
    })
  }
}

不同组件之间数据变化控制ui更新,通常使用@State 和 @Link配合实现

@Component
export struct TitleComponent{
  @Link isRefreshData: boolean;
  message: string = 'Hello World111'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }.width('100%')
      .onClick(()=>{
        this.isRefreshData=!this.isRefreshData
      })
    }
  }
}

isRefreshData未出实话,需要父组件在创建组件时来赋值,在父组件中通过 $ 操作符创建 引用


import {TitleComponent} from '../components/TitleComponent'

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State isSwitchData: boolean = true;
  build() {
    Row() {
      Column() {
        TitleComponent({isRefreshData:$isSwitchData})
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }.height('100%')
    .onClick(()=>{

    })
  }
}

鸿蒙(HarmonyOS)应用开发——装饰器_第2张图片

你可能感兴趣的:(鸿蒙(HarmonyOs),ArkTs,harmonyos,华为)