ArkUI---常用组件---按钮 (Button)

Button（链接）
API接口及属性链接

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

1.创建按钮

Button通过调用接口来创建，接口调用有以下两种形式：

（1）创建不包含子组件的按钮。

Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })

label: 用来设置按钮文字
{
type: 用于设置Button类型
stateEffect: 属性设置Button是否开启点击效果
}
带？表示可选参数！

Button('ok',{type:ButtonType.Normal,stateEffect:true})

（2）创建包含子组件的按钮。

Button(options?: {type?: ButtonType, stateEffect?: boolean})
只支持包含一个子组件，子组件可以是基础组件或者容器组件。

Button({type:ButtonType.Normal,stateEffect:true}){
        Row(){
          Image($r('app.media.startIcon')).width(20).height(30)
          Text('loading').fontSize(12).margin({left:20})
        }.alignItems(VerticalAlign.Center
        )
      }.borderRadius(8).width(90).height(40)

2.设置按钮类型

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

（1）胶囊按钮（默认类型）

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

（2）圆形按钮：

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

（3） 普通按钮

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

	  Button('胶囊状按钮（默认类型）',{ type:ButtonType.Capsule, stateEffect:true})

      Button('圆形按钮',{ type:ButtonType.Circle, stateEffect:true}).width(90)

      Button('普通按钮',{ type:ButtonType.Normal, stateEffect:true})

3.自定义样式

（1）设置边框弧度。

使用通用属性来自定义按钮样式。
例如通过`borderRadius`属性设置按钮的边框弧度。

（1）设置文本样式。

通过添加文本样式设置按钮文本的展示样式。

（1）设置背景颜色。

添加`backgroundColo`r属性设置按钮的背景颜色。

（1）创建功能型按钮。

为删除操作创建一个按钮。

Button('1、设置弧边宽度',{ type:ButtonType.Normal, stateEffect:true})
       .borderRadius(20)

     Button('2、设置文本样式',{ type:ButtonType.Normal, stateEffect:true})
       .fontSize(20)
       .fontColor(Color.Pink)
       .fontWeight(800)
       .fontStyle(FontStyle.Italic)

     Button('3、设置背景颜色',{ type:ButtonType.Normal, stateEffect:true})
       .backgroundColor(Color.Green)

     //4、、创建功能性按钮  为删除操作
     Button({ type:ButtonType.Circle, stateEffect:true}){
       Image($r('app.media.img')).width(30)
     }.width(60).height(60).backgroundColor(Color.Orange)

3.添加事件

Button组件通常用于触发某些操作，可以绑定onClick事件来响应点击操作后的自定义行为。

Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 
      .onClick(()=>{ 
        console.info('Button onClick') 
      })

完整代码：

//自定义组件
import { Type } from '@kit.ArkUI'

@Entry
@Component
struct Login{
  build() {
    Column({space:16}) {
    
      Button('ok',{type:ButtonType.Normal,stateEffect:true})

      Button({type:ButtonType.Normal,stateEffect:true}){
        Row(){
          Image($r('app.media.startIcon')).width(20).height(30)
          Text('loading').fontSize(12).margin({left:20})
        }.alignItems(VerticalAlign.Center
        )
      }.borderRadius(8).width(90).height(40)

      Button('胶囊状按钮（默认类型）',{ type:ButtonType.Capsule, stateEffect:true})

      Button('圆形按钮',{ type:ButtonType.Circle, stateEffect:true}).width(90)

      Button('普通按钮',{ type:ButtonType.Normal, stateEffect:true})

      Button('1、设置弧边宽度',{ type:ButtonType.Normal, stateEffect:true})
        .borderRadius(20)

      Button('2、设置文本样式',{ type:ButtonType.Normal, stateEffect:true})
        .fontSize(20)
        .fontColor(Color.Pink)
        .fontWeight(800)
        .fontStyle(FontStyle.Italic)

      Button('3、设置背景颜色',{ type:ButtonType.Normal, stateEffect:true})
        .backgroundColor(Color.Green)

      //4、、创建功能性按钮  为删除操作
      Button({ type:ButtonType.Circle, stateEffect:true}){
        Image($r('app.media.img')).width(30)
      }.width(60).height(60).backgroundColor(Color.Orange)

    }
  }
}