HarmonyOS 开发基础（五）Button

宸子涵2024-01-09 22:10
HarmonyOS 开发基础（五）Button

typescript 复制代码
@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        // Button：ArkUI 的基础组件 按钮组件
        // label 参数：文字型按钮
        Button('我是按钮')
          // width：属性方法，设置组件的宽度
          .width(300)
          // height：属性方法，设置组件的高度
          .height(50)
          // fontSize：属性方法，设置字体大小
          .fontSize(20)
          // type：属性方法，设置按钮类型
          .type(ButtonType.Normal)
          // onClick：组件事件，当点击按钮时触发
          .onClick(() => {
            console.log('我点击了按钮')
          })


        // Row：ArkUI 的基础组件 行组件
        // 将 Button 按钮放到 Row 行中，对 Row 进行位置调动
        Row(){
          // 自定义按钮，在 Button 内嵌其他组件
          Button(){
            // 内嵌 Image 组件
            Image($r('app.media.icon'))
              // width：属性方法，设置组件的宽度
              .width(100)
                // height：属性方法，设置组件的高度
              .height(100)
          }
        }
        // width：属性方法，设置组件的宽度
        .width('100%')
        // justifyContent：属性方法，设置对齐状态
        .justifyContent(FlexAlign.Center)
        // margin：属性方法，设置外边距
        .margin({top: 50})
      }
    }
  }
}