Harmonyos开发——ArkTS入门

最新推荐文章于 2024-09-01 10:10:42 发布

凌煦

最新推荐文章于 2024-09-01 10:10:42 发布

阅读量416

点赞数 8

分类专栏： Harmonyos 文章标签：华为 harmonyos typescript

本文链接：https://blog.csdn.net/weixin_46491541/article/details/135092118

版权

Harmonyos 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了ArkTS中的装饰器(@Entry,@Component,@State)、struct的使用以及如何通过build声明UI。重点讲解了基础组件如Text和Button，容器组件如Row和Column，以及事件方法和属性方法的应用。

摘要由CSDN通过智能技术生成

ArkTS入门

（1）装饰器

 凡是前面带@字符的都是装饰器，用来装饰结构体、变量和方法，主要有以下三种：
 @Entry:标记当前组件是入口组件 ，表示程序的入口，可以单独作为页面展示，类似于main（）；
 @Component：标记自定义组件，与struct联用；
 @State：标记该变量是状态变量，值变化时，会触发相关UI刷新。

（2）struct

   struct：用于定义自定义组件，常与@Component联用，作为可复用的UI单元；
   特点：一次定义、多次调用；
   自定义组件内可添加各种组件，如容器组件、基础组件，以及定义各种组件的属性方法、事件方法。

（3）build

    UI描述：内部以声明方式描述UI.

（4）组件

    基础组件：Text（文本框）、Button（按钮）向页面中添加UI项
    容器组件：像Row（行）、Column（列），用于页面布局

（5）方法

    事件方法：设置组件的事件回调，如.onClick(()=>this.time++)---点击后，会执行后面的回调函数{this.time++}
    属性方法：设计UI样式,如.fontSize(20)---设置字体大小、.fontColor('#12D')---设置文字颜色

示例

code：

//@ 装饰器：用来装饰结构体、变量和方法
@Entry//@Entry:标记当前组件是入口组件
@Component//@Component：标记自定义组件，与struct联用
struct Index {//Struct：自定义组件：可复用的UI单元
  @State time: number=0 //@State：标记该变量是状态变量，值变化时，会触发相关UI刷新
  build() {//UI描述：内部以声明方式描述UI
    Row(){
           //容器组件：Row、Column，用于页面布局
           //基础组件：Text、Button
      Column(){
      Button(`点击次数 ${this.time} `)
      .backgroundColor("#36D")
      .onClick(()=>this.time++)//事件方法：设置组件的事件回调
    }
      .width('40%')
      .justifyContent(FlexAlign.Center)
      Column(){
        Text("Hello world"+this.time)
          .fontSize(20)//属性方法：设计UI样式
          .fontColor('#12D')
          .onClick(()=>{
            this.time=0
          })
      }
      .width('60%')
      .justifyContent(FlexAlign.Center)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}