# 4.2:按钮组件

Button 组件也是基础组件之一,和其它基础组件不同的是 Button 组件允许添加一个子组件来实现不同的展示样式。

# 4.2.1:Button定义介绍

interface ButtonInterface {
  (): ButtonAttribute;
  (options: ButtonOptions): ButtonAttribute;
  (label: ResourceStr, options?: ButtonOptions): ButtonAttribute;
}
1
2
3
4
5
  • label:设置按钮文字,简单样例如下所示:

    Button('test')
    
    Button('test')
      .backgroundColor(Color.Pink)
    
    1
    2
    3
    4

    样例运行结果如下图所示:

    4_2_1
  • type:设置 Button 按钮的显示样式, ButtonType 定义了以下3种样式:

    • Capsule(默认值):胶囊类型,圆角值为 Button 高度的一半并且不允许修改,简单样例如下所示:

      Button('test')
        .height(40)
        .width(90)
        .backgroundColor('#aabbcc')
      
      Button('test', {type: ButtonType.Capsule)
        .height(40)
        .width(90)
        .borderRadius(20)          // 设置圆角,但是没有效果
        .borderWidth(3)            // 设置边框宽度
        .borderColor(Color.Red)    // 设置边框颜色
        .backgroundColor('#bbaacc')// 设置背景色
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12

      样例运行结果如下图所示:

      4_2_2
    • Normal:矩形按钮,无圆角,可以通过 borderRadius 设置圆角大小,简单样例如下所示:

      Button('Login')                            // 默认胶囊类型
        .height(40)
        .width(90)
        .backgroundColor('#aabbcc')
      
      Button('Login', {type: ButtonType.Normal}) // 没有圆角
        .height(40)
        .width(90)
        .backgroundColor('#aabbcc')
      
      Button('Login', {type: ButtonType.Normal}) // 设置圆角
        .height(40)
        .width(90)
        .backgroundColor('#aabbcc')
        .borderRadius(8)
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15

      样例运行结果如下图所示:

      4_2_3
    • Circle:圆形按钮,设置该样式时,需要设置 Button 的宽高,否则不显示,简单样例如下所示:

      Button('Login')
        .height(40)
        .width(90)
        .backgroundColor('#aabbcc')
      
      Button('Harmony', {type: ButtonType.Circle}) // Button没有设置宽高,则不显示
        .backgroundColor('#aabbcc')
      
      Button('OpenHarmony', {type: ButtonType.Circle})
        .height(40)
        .width(90)
        .backgroundColor('#aabbcc')
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12

      样例运行结果如下图所示:

      4_2_4
  • stateEffect:设置是否开启点击效果,默认开启,简单样例如下所示:

    Button('effect: on')
      .fontSize(20)
    
    Button('effect: off', {stateEffect: false})
      .fontSize(20)
    
    1
    2
    3
    4
    5

    样例运行结果如下图所示:

    4_2_8

# 4.2.2:Button自定义样式

  • 包含 Text 组件

    Button({type: ButtonType.Normal}) {
      Text('Login')
        .fontSize(20)
        .fontColor(Color.Red)
        .padding({left: 20, right: 20})
    }
    .borderRadius(8)
    .backgroundColor("#aabbcc")
    
    Button({type: ButtonType.Circle}) {
      Text('Login')
        .fontSize(20)
        .fontColor(Color.Red)
    }
    .width(80)
    .height(80)
    .backgroundColor("#aabbcc")
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

    样例运行结果如下图所示:

    4_2_5

    样例给 Button 添加了一个 Text 子组件,通过设置 Text 的文本样式达到修改 Button 文字的效果。

  • 包含Image组件

    Button({type: ButtonType.Circle}) {
      Image($r("app.media.more"))
        .width(30)
        .height(30)
    }
    .width(70)
    .height(70)
    
    Button({type: ButtonType.Circle}) {
      Image($r("app.media.delete"))
        .width(40)
        .height(40)
    }
    .width(70)
    .height(70)
    .backgroundColor('#ff0000')
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    样例运行结果如下图所示:

    4_2_6

    样例中使用了 Image 组件,该组件是后续章节要讲解的基础组件,读者们先了解一下。

  • 包含复杂组件

    Button({type: ButtonType.Normal}) {
      Row() {
        Image($r("app.media.loading"))
          .width(30)
          .height(30)
          .margin({left: 12})
        Text('loading')
          .fontSize(20)
          .fontColor('#ffffff')
          .margin({left: 5, right: 12})
      }
    }
    .borderRadius(8)
    .backgroundColor(0x317aff)
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    样例运行结果如下图所示:

    4_2_7

    样例中使用 Row 作为子组件, Row 组件属于线性容器组件,它可以添加多个子组件,后续章节我们会详细介绍,读者们先知道这样用就可以了。

(adsbygoogle = window.adsbygoogle || []).push({});
请作者喝杯咖啡

津公网安备 12011402001367号

津ICP备2020008934号-2