第一个ArkTS程序

参考代码:

@Entry //主入口组件(一个程序只能有一个)
@Component //自定义组件声明
struct Index { //页面主体组件
  @State message: string = 'Hello World' //状态变量(数据变化自动刷新界面)

  build() { //必须存在的UI构建方法
    Row() { //横向布局容器
      Column() { //纵向布局容器
        Text(this.message) //文本组件
          .fontSize(50)       //字号50
          .fontWeight(FontWeight.Bold) //字体加粗

        Button('点我') //按钮组件
          .fontColor(Color.White)  //文字颜色白
          .fontSize(40)            //字号40
          .width(150)              //宽度150
          .height(70)              //高度70
          .backgroundColor(Color.Gray) //背景色灰
          .type(ButtonType.Capsule)    //胶囊形状
          .onClick(() => {             //点击事件
            this.message = 'Hello ArkTS' //点击后更新文本
          })
      }
      .width('100%') //列容器宽度铺满
    }
    .height('100%') //行容器高度铺满
  }
}

Row与Column:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/arkts-layout-development-linear-V13

posted @ 2025-02-19 00:42  xkfx  阅读(24)  评论(0)    收藏  举报