HarmonyOS Button组件

Button是按钮组件，通常用于响应用户的点击操作。可添加文本、图片子组件。

创建方式

第一种方式

Button("点击事件", {type:ButtonType.Normal, stateEffect: true})
        .width(100)
        .height(30)

第二种方式

   Button() {
        Text("子按钮")
      }
      .width(100)
      .height(30)

按钮类型

Button有三种可选类型，分别为胶囊类型(Capsule)、圆形类型(Circle)和普通按钮(Normal)，通过type来进行设置。

 // 当类型设置为Circle/Capsule时，不支持borderRadius来重新设置圆角  
 Button({type: ButtonType.Circle/Capsule}) {
        Text("子按钮")
      }
      .width(100)
      .height(100)

自定义样式

• 设置边框圆角

Button("点击事件", {type:ButtonType.Normal})
        .width(100)
        .height(30)
        .borderRadius(10)

• 设置文本样式

Button("点击事件", {type:ButtonType.Normal})
        .width(100)
        .height(30)
        .fontWeight(900)// 加粗的样式

• 添加点击事件

      Button("点击事件", {type:ButtonType.Normal, stateEffect: true})
        .width(100)
        .height(30)
        .onClick(() => {
          hilog.debug(0x0000, 'whzOS',  '%{public}s', '点击事件触发')
        })
        .margin({left: 20})