学习笔记（十三）：ArkUi-按钮 (Button)

概述：

按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮。Button做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。

使用示例：

一、创建Button

1、创建不包含子组件的按钮

Button('新增')
        .type(ButtonType.Capsule)
        .onClick(()=>{
          console.log('新增操作')
        })

2、创建包含子组件的按钮

Button(){
        Text('新增')
          .fontSize(20)
          .fontColor(Color.Red)
      }
      .padding(20)
      .type(ButtonType.Capsule)
      .onClick(()=>{
        console.log('新增操作')
      })

 

二、按钮类型

1、胶囊按钮（默认类型）（ButtonType.Capsule）

此类型按钮的圆角自动设置为高度的一半，不支持通过borderRadius属性重新设置圆角

2、圆形按钮（ButtonType.Circle）

此类型按钮为圆形，不支持通过borderRadius属性重新设置圆角。

3、普通按钮（ButtonType.Normal）

此类型的按钮默认圆角为0，支持通过borderRadius属性重新设置圆角。

 

三、自定义样式

1、设置边框弧度 borderRaius

Button('普通按钮')
        .type(ButtonType.Normal)
        .width(100)
        .borderRadius(20)
        .onClick(()=>{
          console.log('点击了普通按钮')
        })

2、设置文本样式 type

方式一、
Button('普通按钮')
        .type(ButtonType.Normal)
        .width(100)
        .borderRadius(20)
        .onClick(()=>{
          console.log('点击了普通按钮')
        })
方式二、
Button('普通按钮',{type:ButtonType.Normal})
        .width(100)
        .borderRadius(20)
        .onClick(()=>{
          console.log('点击了普通按钮')
        })

 

3、设置背景颜色 backgroundColor

Button('普通按钮')
        .type(ButtonType.Normal)
        .width(100)
        .borderRadius(20)
        .backgroundColor(0x00ff00)
        .onClick(()=>{
          console.log('点击了普通按钮')
        })

 

 

四、添加事件

.onClick(()=>{
          console.log('点击了普通按钮')
        })

Button('普通按钮')
        .type(ButtonType.Normal)
        .width(100)
        .borderRadius(20)
        .backgroundColor(0x00ff00)
        .onClick(()=>{
          console.log('点击了普通按钮')
        })