4.2：按钮组件

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

4.2.1：Button定义介绍

interface ButtonInterface {
  (): ButtonAttribute;
  (options: ButtonOptions): ButtonAttribute;
  (label: ResourceStr, options?: ButtonOptions): ButtonAttribute;
}

• label：设置按钮文字，简单样例如下所示：

  Button('test')
  
  Button('test')
    .backgroundColor(Color.Pink)
  

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

  

• type：设置 Button 按钮的显示样式， ButtonType 定义了以下3种样式：

  • Capsule（默认值）：胶囊类型，圆角值为 Button 高度的一半并且不允许修改，此时通过设置 borderRadius() 的方式设置圆角则无效。简单样例如下所示：

    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')// 设置背景色
    

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

    

  • Normal：矩形按钮，无圆角，可以通过 borderRadius() 设置圆角大小，不支持通过 border() 的方式设置圆角，简单样例如下所示：

    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)
    

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

    

  • 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')
    

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

    

• stateEffect：设置是否开启点击效果，默认开启，简单样例如下所示：

  Button('effect: on')
    .fontSize(20)
  
  Button('effect: off', {stateEffect: false})
    .fontSize(20)
  

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

  

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")
  

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

  

  样例给 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')
  

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

  

  样例中使用了 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)
  

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

  

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

(adsbygoogle = window.adsbygoogle || []).push({});