ArkUI Button按钮组件用法详解（附带实例）

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

ArkUI创建按钮

Button 通过调用接口来创建，接口调用有以下两种形式：
1) 创建不包含子组件的按钮：

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

其中，label 用来设置按钮文字，type 用于设置 Button 类型，stateEffect 用于设置 Button 是否开启点击效果。

示例如下所示：

@Entry
@Component
struct ButtonSample {
    build() {
        Column() {
            // 按钮组件，第一个参数设置按钮显示的文本
            // 第二个参数设置按钮的类型为普通按钮，设置点击动效为true
            Button('Ok', { type: ButtonType.Normal, stateEffect: true })
                // 设置按钮的边框圆角半径
                .borderRadius(8)
                // 设置按钮的背景色
                .backgroundColor(0x317aff)
                // 设置按钮的宽度
                .width(90)
                // 设置按钮的高度
                .height(40)
        }.alignItems(HorizontalAlign.Center)
        .height('100%').width('100%')
    }
}

显示效果如下图所示：


2) 创建包含子组件的按钮：

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

只支持包含一个子组件，子组件可以是基础组件或者容器组件。示例代码如下：

@Entry
@Component
struct ButtonSample {
    build() {
        Column() {
            // 设置按钮的效果为普通按钮
            // 设置带有按钮的点按动效
            Button({ type: ButtonType.Normal, stateEffect: true }) {
                // 按钮的子组件
                Row() {
                    // 图片
                    Image($r('app.media.loading'))
                        // 设置图片的宽度为 20vp，高度为 40vp，左外边距为 12vp
                        .width(20).height(20).margin({ left: 10 })
                    // 文本显示组件
                    Text('loading')
                        // 设置文本字号为 12vp，字体颜色为白色，左外边距为 5vp，右外边距为 12vp
                        .fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 10 })
                }
                // 行容器组件的子组件垂直方向排列方式为垂直居中
                .alignItems(VerticalAlign.Center)
            }
            // 设置按钮的边框圆角半径为 8vp，背景色为蓝色，宽度为 90vp，高度为 40vp
            .borderRadius(8).backgroundColor(0x317aff).width(90).height(40)
        }
        // 设置子组件水平方向居中对齐
        .alignItems(HorizontalAlign.Center)
        .height('100%').width('100%') 
    }
}

显示效果如下图所示：

ArkUI设置按钮类型

Button 有 3 种可选类型：胶囊类型（Capsule）、圆形按钮（Circle）和普通按钮（Normal），通过 type 属性进行设置，其中胶囊类型为默认类型。

1) 胶囊按钮的圆角自动设置为高度的一半，不支持通过 borderRadius 属性重新设置圆角。示例代码如下：

@Entry
@Component
struct ButtonSample {
    build() {
        Column() {
            // 设置按钮显示的文本
            // 设置按钮的样式为胶囊样式，禁用点按动效
            Button('Disable', { type: ButtonType.Capsule, stateEffect: false })
                // 设置背景色，设置宽度为90vp，高度40vp
                .backgroundColor(0x317aff).width(90).height(40)
        }
        // 设置子组件水平方向居中对齐
        .alignItems(HorizontalAlign.Center)
        .height('100%').width('100%')
    }
}

显示效果如下图所示：


2) 圆形按钮不支持通过 borderRadius 属性重新设置圆角。示例代码如下：

@Entry
@Component
struct ButtonSample {
    build() {
        Column() {
            // 设置按钮显示的文本
            // 设置按钮的样式为圆形，禁用点按动效
            Button('Circle', { type: ButtonType.Circle, stateEffect: false })
                // 设置按钮的背景色，设置按钮的宽度和高度都是90vp
                .backgroundColor(0x317aff).width(90).height(90)
        }
        // 设置子组件水平方向居中对齐
        .alignItems(HorizontalAlign.Center)
        .height('100%').width('100%')
    }
}

显示效果如下图所示：


3) 普通按钮默认圆角为 0，支持通过 borderRadius 属性重新设置圆角。示例代码如下：

@Entry
@Component
struct ButtonSample {
    build() {
        Column() {
            // 设置按钮显示的文本
            // 设置按钮的样式为普通样式
            // 启用点按动效
            Button('Ok', { type: ButtonType.Normal, stateEffect: true })
                // 设置按钮的边框圆角半径
                .borderRadius(8)
                // 设置按钮的背景色
                .backgroundColor(0x317aff)
                // 设置按钮的宽度为 90vp
                .width(90)
                // 设置按钮的高度为 40vp
                .height(40)
        }
        // 设置子组件水平方向居中对齐
        .alignItems(HorizontalAlign.Center)
        .height('100%').width('100%')
    }
}

显示效果如下图所示：

ArkUI自定义样式

1) 通过 borderRadius 属性设置按钮的边框弧度，示例代码如下：

@Entry
@Component
struct ButtonSample {
    build() {
        Column() {
            // 设置按钮显示的文本
            // 设置按钮的类型为普通样式
            Button('circle border', { type: ButtonType.Normal })
                // 设置按钮的边框圆角半径为20vp
                // 设置按钮的高度为40vp
                .borderRadius(20).height(40)
        }
        // 设置子组件水平方向居中对齐
        .alignItems(HorizontalAlign.Center)
        .height('100%').width('100%')
    }
}

显示效果如下图所示：


2) 通过添加文本样式设置按钮文本的展示样式，示例代码如下：

@Entry
@Component
struct ButtonSample {
    build() {
        Column() {
            // 设置按钮显示的文本
            // 设置按钮的样式为普通样式
            Button('font style', { type: ButtonType.Normal })
                // 设置按钮显示的文本字号为20vp
                // 设置按钮显示的文本颜色为粉色
                // 设置按钮显示的文本粗细
                .fontSize(20).fontColor(Color.Pink).fontWeight(800)
        }
        // 设置子组件水平方向居中对齐
        .alignItems(HorizontalAlign.Center)
        .height('100%').width('100%')
    }
}

显示效果如下图所示：


3) 通过添加 backgroundColor 属性设置按钮的背景颜色，示例代码如下：

@Entry
@Component
struct ButtonSample {
    build() {
        Column() {
            // 设置按钮显示的文本
            Button('background color')
                // 设置按钮的背景色
                .backgroundColor(0xF55A42)
        }
        // 设置子组件水平方向居中对齐
        .alignItems(HorizontalAlign.Center)
        .height('100%').width('100%')
    }
}

显示效果如下图所示：


4) 创建功能型按钮。例如，为删除操作创建一个按钮，示例代码如下：

// 通过 Record 类型数据设置布局参数
let MarLeft: Record<string, number> = { 'left': 20 }

@Entry
@Component
struct ButtonSample {
    build() {
        Column() {
            // 设置按钮的样式为圆形，启用点按动效
            Button({ type: ButtonType.Circle, stateEffect: true }) {
                // 按钮的子组件为图片组件，将它的宽度和高度都设置为30vp
                Image($r('app.media.ic_public_delete_filled')).width(30).height(30)
            }
            // 设置按钮的宽度和高度都是55vp
            .width(55).height(55)
            // 使用 Record 类型的数据设置按钮的外边距，设置按钮的背景色
            .margin(MarLeft).backgroundColor(0xF55A42)
        }
        // 设置子组件水平方向居中对齐
        .alignItems(HorizontalAlign.Center)
        .height('100%').width('100%')
    }
}

显示效果如下图所示：

ArkUI添加事件

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

Button('Ok', { type: ButtonType.Normal, stateEffect: true })
// 添加按钮的点击事件处理函数
.onClick(()=>{
    console.info('Button onClick')
})