鸿蒙应用开发从入门到实战（十二）：ArkUI组件Button&Toggle

大家好，我是潘Sir，持续分享IT技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注！

ArkUI提供了丰富的系统组件，用于制作鸿蒙原生应用APP的UI，本文主要讲解按钮组件Button和Toggle的使用。

一、按钮Button

1.1 概述

Button为按钮组件，通常用于响应用户的点击操作。

1.2 参数

Button组件有两种使用方式，分别是不包含子组件 和包含子组件 ，两种方式下，Button 组件所需的参数有所不同，下面分别介绍

1.2.1 不包含子组件

不包含子组件时，Button组件所需的参数如下

复制代码

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

label

label为按钮上显示的文字内容。

options.type

options.type为按钮形状，该属性的类型ButtonType，可选的枚举值有

名称	描述	效果
`ButtonType.Capsule`	胶囊形状

`ButtonType.Circle`	圆形
)
`ButtonType.Normal`	普通形状

options.stateEffect

options.stateEffect表示是否开启点击效果，点击效果如下

1.2.2 包含子组件

子组件会作为按钮上显示的内容，可以是图片、文字等。这种方式下，Button组件就不在需要label参数了，具体如下

复制代码

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

示例代码：

拷贝icon_new_folder.png到resources/base/media目录下

在component目录下新建button目录，新建ButtonParameter.ets文件

typescript 复制代码

@Entry
@Component
// Button按钮参数
struct ButtonParameter {

  build() {
    Column({ space: 50 }) {

      //1、不包含子组件
      Button('按钮', { type: ButtonType.Capsule, stateEffect: false })
        .fontSize(25)
        .width(150)
        .height(60)

      //2、包含子组件
      Button({ type: ButtonType.Capsule, stateEffect: true }) {
        Row({ space: 5 }) {
          Image($r('app.media.icon_new_folder'))
            .width(30)
            .height(30)
          Text('新建')
            .fontColor(Color.White)
            .fontSize(25)
            .fontWeight(500)
        }
      }.height(60)
      .width(150)

    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

1.3 常用属性

1.3.1 背景颜色

按钮的颜色可使用backgroundColor()方法进行设置，例如

复制代码

Button('绿色按钮').backgroundColor(Color.Green)

1.3.2 边框圆角

按钮的边框圆角大小可使用borderRadius()方法进行设置，例如

复制代码

Button('圆角按钮', { type: ButtonType.Normal }).borderRadius(10)

示例代码：

button目录下新建ButtonAttributePage.ets文件

typescript 复制代码

@Entry
@Component
// Button按钮属性
struct ButtonAttributePage {

  build() {
    Row() {
      // 1、背景颜色 backgroundColor
      Column({ space: 50 }) {
        Button('绿色按钮')
          .fontSize(25)
          .width(150)
          .height(60)
          .backgroundColor(Color.Green)

        // 2、边框圆角 borderRadius
        Button('圆角按钮', { type: ButtonType.Normal })
          .fontSize(25)
          .width(150)
          .height(60)
          .borderRadius(20)

      }.width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }
  }
}

1.4 常用事件

对于Button组件而言，最为常用的就是点击事件，可以通过onClick()方法为按钮绑定点击事件，该方法的参数为一个回调函数，当按钮被点击时，就会触发该回调函数，例如

复制代码

Button('点击事件').onClick(() => {
  console.log('我被点击了')
})

示例代码：

在button目录下新建ButtonEventPage.ets文件

typescript 复制代码

@Entry
@Component
// Button按钮事件
struct ButtonEventPage {

  build() {
    Row() {
      // 1、点击事件
      Column({ space: 50 }) {
        Button('点击事件')
          .fontSize(25)
          .width(150)
          .height(60)
          .onClick(() => {
            console.log('我被点击了')
          })


      }.width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }
  }
}

二、切换按钮Toggle

2.1 概述

Toggle为切换按钮组件，一般用于两种状态之间的切换，例如下图中的蓝牙开关。

2.2 参数

Toggle组件的参数定义如下

复制代码

Toggle(options: { type: ToggleType, isOn?: boolean })

type

type属性用于设置Toggle组件的类型，可通过ToggleType枚举类型进行设置，可选的枚举值如下

名称	描述	效果
`ToggleType.Switch`	开关

`ToggleType.Checkbox`	复选框

`ToggleType.Button`	按钮

复制代码

isOn

isOn属性用于设置Toggle组件的状态，例如

示例代码

在component目录下新建toggle目录，新建ToggleParameter.ets 文件

typescript 复制代码

@Entry
@Component
// 切换按钮Toggle参数
struct ToggleParameter {

  build() {
    // type参数设置类型;ToggleType值:开关ToggleType.Switch 复选框ToggleType.Checkbox 按钮ToggleType.Button
    // isON设置组件状态
    Column({ space: 20 }) {
      Row({ space: 20 }) {
        Toggle({ type: ToggleType.Switch, isOn: false })
        Toggle({ type: ToggleType.Switch, isOn: true })
      }

      Row({ space: 20 }) {
        Toggle({ type: ToggleType.Checkbox, isOn: false })
        Toggle({ type: ToggleType.Checkbox, isOn: true })
      }

      Row({ space: 20 }) {
        Toggle({ type: ToggleType.Button, isOn: false }) {
          Text('button')
        }
        Toggle({ type: ToggleType.Button, isOn: true }) {
          Text('button')
        }
      }
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

2.3 常用属性

2.3.1 选中状态背景色

可使用selectedColor()方法设置Toggle组件在选中（或打开）状态下的背景色，例如

2.3.2 Switch滑块颜色

可使用设置switchPointColor()方法设置Switch类型的Toggle组件中的圆形滑块颜色，例如

示例代码：

在toggle目录下新建ToggleAttributePage.ets文件

typescript 复制代码

@Entry
@Component
// 切换按钮Toggle常用属性
struct ToggleAttributePage {

  build() {
    Row() {
      Column({ space: 50 }) {

        //1.选中状态背景色 selectedColor
        Row({ space: 20 }) {
          Toggle({ type: ToggleType.Switch, isOn: true })
            .selectedColor(Color.Green)
          Toggle({ type: ToggleType.Checkbox, isOn: true })
            .selectedColor(Color.Green)
          Toggle({ type: ToggleType.Button, isOn: true }) {
            Text('button')
          }.selectedColor('#66008000')

        }

        //2.Switch圆形滑块颜色 switchPointColor
        Toggle({ type: ToggleType.Switch, isOn: true })
          .selectedColor(Color.Green)
          .switchPointColor(Color.Orange)

      }.width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }
  }
}

2.4 常用事件

Toggle组件常用的事件为change 事件，每当Toggle组件的状态发生变化，就会触发change事件。开发者可通过onChange()方法为Toggle组件绑定change事件，该方法参数为一个回调函数，具体定义如下

复制代码

onChange(callback: (isOn: boolean) => void)

当Toggle组件的状态由关闭切换为打开时，isOn为true，从打开切换为关闭时，isOn为false。

示例代码:

拷贝素材到resources/base/media目录下，img_light.png、img_dark.png

在toggle目录下新建LightPage.ets

typescript 复制代码

@Entry
@Component
struct LightPage {
  @State isOn: boolean = false;

  build() {
    Column({ space: 20 }) {
      if (this.isOn) {
        Image($r('app.media.img_light'))
          .height(300)
          .width(300)
          .borderRadius(20)
      } else {
        Image($r('app.media.img_dark'))
          .height(300)
          .width(300)
          .borderRadius(20)
      }
      Toggle({ type: ToggleType.Switch, isOn: this.isOn })
        .width(60)
        .height(30)
        .onChange((isOn) => {
          this.isOn = isOn;
        })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！