鸿蒙开发之ArkUI组件常用组件-Button/Radio/Slider

按钮Button

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

创建按钮

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

• 创建不包含子组件的按钮

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

该接口用于创建不包含子组件的按钮，其中label用来设置按钮文字，type用于设置Button类型，stateEffect属性设置Button是否开启点击效果

 Button('点击一下', { type: ButtonType.Normal, stateEffect: true })
        .borderRadius(10)
        .backgroundColor(0xff3330)
        .width(100)
        .height(40)
    }.width('100%')

• 创建包含子组件的按钮

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

该接口用于创建包含子组件的按钮，只支持包含一个子组件，子组件可以是基础组件或者容器组件。

Button({ type: ButtonType.Normal, stateEffect: true }) {
        Row() {
          Image($r('app.media.icon'))
            .width(35)
            .margin({ left: 0 })
          Text('icon')
            .fontSize(15)
            .fontColor(0xffffff)
            .margin({ left: 0, right: 12 })
        }.alignItems(VerticalAlign.Center)
      }
      .borderRadius(8)
      .backgroundColor(0x317aff)
      .width(80)
      .height(40)

按钮类型

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

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

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

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

单选框Radio

Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。

创建单选框

Radio通过调用接口来创建，接口调用形式如下：

Radio(options: {value: string, group: string})

该接口用于创建一个单选框，其中value是单选框的名称，group是单选框的所属群组名称。checked属性可以设置单选框的状态，状态分别为false和true时，设置为true时表示单选框被选中。Radio仅支持选中和未选中两种样式，不支持自定义颜色和形状。

  Row() {
       Radio({ value: 'Radio1', group: 'radioGroup' })                                                          .checked(false).width(20)
       Radio({ value: 'Radio2', group: 'radioGroup' })
           .checked(true).width(20)
  }

添加事件

除支持通用事件外，Radio通常用于选中后触发某些操作，可以绑定onChange事件来响应选中操作后的自定义行为。

 Row() {
         Radio({ value: 'Radio1', group: 'radioGroup' })
           .onChange((isChecked: boolean) => {
             if(isChecked) {
                 console.log('点击了 Radio1')
             }
           }).checked(false)
         Radio({ value: 'Radio2', group: 'radioGroup' })
           .onChange((isChecked: boolean) => {
             if(isChecked) {
               console.log('点击了 Radio2')
             }
           }).checked(true)
       }

滑动条Slider

滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。

创建滑动条

Slider(options?: {value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean})

参数：

SliderStyle是枚举，有两个值，OutSet（滑块在滑轨上）、InSet（滑块在滑轨内）

参数direction是Axis，有Vertical纵向和Horizontal横向

属性

事件

onChange(callback: (value: number, mode: SliderChangeMode) => void)

Slider滑动时触发事件回调。

value：当前滑动进度值。若返回值有小数，可使用number.toFixed()方法将数据处理为预期的精度。

mode：拖动状态。SliderChangeMode枚举 ： Begin(0-手势/鼠标接触或者按下滑块)、Moving(1-正在拖动滑块过程中)、End(2-鼠标/手势离开滑块)、Click(3-点击滑动条使滑块位置移动)

说明：Begin和End状态当手势点击时都会触发，Moving和Click状态当value值发生变换时触发。

当连贯动作为拖动动作时，不触发Click状态。

value值的变化范围为对应步长steps数组。

        Row() {
          Slider({
            value: this.outSetValueOne,
            min: 0,
            max: 100,
            style: SliderStyle.OutSet
          })
            .showTips(true)
            .onChange((value: number, mode: SliderChangeMode) => {
              this.outSetValueOne = value
              console.info('value:' + value + 'mode:' + mode.toString())
            })
          // toFixed(0)将滑动条返回值处理为整数精度
          Text(this.outSetValueOne.toFixed(0)).fontSize(12)
        }