ArkUI- Button 详解

ArkUI- Button 详解

• 官方资料： developer.huawei.com/consumer/cn…

    @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)
    }