鸿蒙ArkTS学习日记（一）：UI组件使用之button

环境

HarmonyOS SDK5.0.0

引言

在很久以前小编和大家分享过HarmonyOS 2.0环境下的ArkUI当时是使用ArkJs去编写的代码，现在最新的Harmony4.0 已经支持了ArkTs 所以秉承着学到老活到老的态度，进一步学习一下，分享给大家。

组件

详细代码示例请查看下方华为官方文档，本文仅展示个人练习代码，不做示例代码搬运。

ArkTs按钮文档https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-common-components-button-0000001450914110-V2#section153291040112711

代码

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State i: number = 0;
  build() {
    RelativeContainer() {

      Button('点我试试')
        .id('hwButton')
        // 背景颜色
        .backgroundColor('#ffffff')
        // 字体颜色
        .fontColor('#000000')
        .brightness(1)
        // 为按钮添加外阴影
        .shadow({ radius: 30, color: Color.Gray, offsetX: 5, offsetY: 10 })
        // 绑定点击事件
        .onClick(() =>{
          this.message = '点击事件触发第' + ++this.i + '下';
        })
        // 绑定长按事件
        .gesture(
          LongPressGesture({repeat: true})
            .onAction((Event: GestureEvent|undefined) => {
              console.log(String(Event?.repeat));
              if(Event){
                if (Event?.repeat) {
                  this.message = '点击事件触发第' + ++this.i + '下'
                }
              }
            })
        )
      Text(this.message)
        .id('HelloWorld')
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}