ArkUI- Button 详解

ArkUI- Button 详解

• 官方资料：
  https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-common-components-button-V5

@Entry
@Component
struct ButtonDemo {
  build() {
    Column({space: 20}) {
      Button('Button normal')
        // 字体大小
        .fontSize(16)
        // 字体颜色
        .fontColor(Color.White)
        // 背景颜色
        .backgroundColor(Color.Red)
        // 按钮宽
        .width(200)
        // 按钮高度
        .height(40)
        // 一般样式
        .type(ButtonType.Normal)
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [
            [Color.Blue,0.0],
            [Color.Black,0.5],
            [Color.Orange,1.0]
          ]
        })
         // 点击事件
        .onClick((event: ClickEvent) =>{
          // 点击位置相对于被点击元素左边缘的X坐标。单位：vp
          event.x;
          // 点击位置相对于被点击元素原始区域左上角的Y坐标。单位：vp
          event.y;
          // 触发事件的元素对象显示区域: EventTarget
          event.target;
          // 点击位置相对于应用窗口左上角的X坐标。单位：vp
          event.windowX;
          // 点击位置相对于应用窗口左上角的Y坐标。单位：vp
          event.windowX;
          // 点击位置相对于应用屏幕左上角的X坐标。单位：vp
          event.displayX;
          // 点击位置相对于应用屏幕左上角的Y坐标。 单位：vp
          event.displayY;
          // 阻止默认事件。
          // 说明： 该接口仅支持部分组件使用，当前支持组件：RichEditor。
          event.preventDefault;

          // 目标元素的区域信息。
          event.target.area;
          event.target.area.width;
          event.target.area.height;
          event.target.area.position;
          event.target.area.globalPosition
          // 打印点击按钮事件
          console.log('click button')
      })
      // 圆形样式
      Button('circle')
        // 字体大小
        .fontSize(16)
        // 字体颜色
        .fontColor(Color.White)
        // 背景颜色
        .backgroundColor(Color.Red)
        // 按钮宽
        .width(150)
        // 按钮高度
        .height(100)
        // 圆形样式
        .type(ButtonType.Circle)

      // 默认胶囊型按钮样式
      Button('Capsule')
        // 字体大小
        .fontSize(16)
        // 字体颜色
        .fontColor(Color.White)
        // 背景颜色
        .backgroundColor(Color.Red)
        // 按钮宽
        .width(200)
        // 按钮高度
        .height(100)
        // 胶囊型
        .type(ButtonType.Capsule)

      // 自定义圆角按钮
      Button('custom borderRadius')
        // 字体大小
        .fontSize(16)
        // 字体颜色
        .fontColor(Color.White)
        // 背景颜色
        .backgroundColor(Color.Red)
        // 按钮高度
        .height(100)
        .type(ButtonType.Normal)
        .borderRadius(30)

      // 自定义按钮的 Modifier
      Button()
        .contentModifier(new MyButtonModifier())
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }
}
/// 自定义按钮的 Modifier
class MyButtonModifier implements ContentModifier<ButtonConfiguration> {
  applyContent(): WrappedBuilder<[ButtonConfiguration]> {
    return wrapBuilder(myButton)
  }
}

/// 这里构建具体的按钮 view
@Builder function myButton(config: ButtonConfiguration) {
  Column({space: 15}) {
    Text('我是自定义 Modifier')
    Text('这里可以拿到config设置显示逻辑')
  }
  .padding(10)
  .borderRadius(16)
  .borderColor(Color.Red)
  .borderWidth(1)
}