3.5 Button组件原创精华

不做加班狗

发布于 2022-6-10 20:51

浏览

4收藏

3.5.1 接口

按钮组件支持两个可选参数，其中：

label：用于设置按钮文本。

options：主要设置按钮的外观风格。也由两个可选参数组成。默认效果type为胶囊型按钮风格，开启切换效果。除非特意要实现矩形按钮或圆形按钮的效果，否则，建议不设置options参数，这样代码也简洁，整个App的按钮风格也保持一致。

/**
 * 3.5 Button组件
 * 可以包含子组件。
 *
 * 接口:
 *  Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })
 *     label:string 按钮文本内容。
 *     options:Object 含type和stateEffect这两个可选参数。
 *        type:ButtonType 默认值Capsule，描述按钮风格。
 *          ButtonType.Normal 普通按钮（默认不带圆角）。
 *          ButtonType.Capsule 胶囊型按钮（圆角默认为高度的一半）
 *          ButtonType.Normal 普通按钮（默认不带圆角）。
 *        stateEffect:boolean 默认值true，按钮按下时是否开启切换效果，当状态置为false时，点击效果关闭。
 *
 * 说明:
 *  按钮圆角通过通用属性borderRadius设置（不支持通过border接口设置圆角）
 *  按钮文本通过通用文本样式进行设置。
 */

胶囊型按钮

首先看下胶囊型按钮的示例，我们加入三个按钮，一个是标准按钮，一个是显示加载状态的按钮，一个是禁用状态的按钮。其中，为了实现动画效果，在ButtonSample.ets页面顶部代码开始处加入如下代码：

  @State private angle: number = 0

  aboutToAppear() { // 实现loading动画效果
    var that = this;
    that.angle = 0;
    setInterval(function () {
      that.angle += 5
    }, 15)
  }

代码插入位置如下图所示：

3.5 Button组件-鸿蒙开发者社区

这里不深入介绍动画的实现代码，后面《第7章让用户界面生动而流畅》会介绍各类动画的实现方法。

然后加入三个按钮的相关代码：

      H8({text:'胶囊型按钮'})
      Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
        Button('OK').width(90)
        Button() { // Button组件可以包含子组件
          Column(){
            Row() {
              Image($rawfile('ic_loading.png'))
                .width(18).height(18).margin({right: $r("app.float.space_S")})
                .rotate({ x: 0, y: 0, z: 1, angle: this.angle })
              Text('loading').fontSize(16).fontColor($r("app.color.fgFocusLevel1"))
            }
          }.width(120)
        }
        Button('Disable')
          .width(90).enabled(false).opacity(0.4)  // 不响应点击等操作，且透明度为40%
      }

效果如下：

3.5 Button组件-鸿蒙开发者社区

从上面的效果可以看出，Button组件已经针对浅色模式和深色模式下的按钮背景颜色和文字颜色做了多态的处理，所以，不需要我们设置Button组件的背景色属性，也不需要设置文字颜色。但是，在上述加载按钮的示例代码中，加载图标和loading文字是通过子组件添加进入的，此时，对于文字的颜色要指定为：

.fontColor($r("app.color.fgFocusLevel1"))

另外，对于接口中的label的文字，其实我的建议是使用String.josn资源设置语言包，以适应多语言显示的需要。但是，目前此处使用资源会破坏按钮的外观，应该是个bug。实验代码如下：

//Button('OK').width(90)
Button($r("app.string.action")).width(90)

效果如下：

3.5 Button组件-鸿蒙开发者社区

圆角矩形按钮

复制胶囊型按钮的代码，将每个按钮的接口中设置：

{ type: ButtonType.Normal }

并加一个属性：

.borderRadius($r("app.float.radius_S")) // 设置圆角

示例代码如下：

      H8({text:'圆角矩形按钮'})
      Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
        Button('Ok', { type: ButtonType.Normal }).width(90).borderRadius($r("app.float.radius_S")) // 设置圆角
        Button({ type: ButtonType.Normal }) {
          Column(){
            Row() {
              Image($rawfile('ic_loading.png'))
                .width(18).height(18).margin({right: $r("app.float.space_S")})
                .rotate({ x: 0, y: 0, z: 1, angle: this.angle })
              Text('loading').fontSize(16).fontColor($r("app.color.fgFocusLevel1"))
            }
          }
        }.width(120).borderRadius($r("app.float.radius_S"))

        Button('Disable', { type: ButtonType.Normal})
          .width(90).enabled(false).opacity(0.4).borderRadius($r("app.float.radius_S"))
      }

实现效果如下：

3.5 Button组件-鸿蒙开发者社区

圆形按钮

直接上代码：

      H8({text:'圆形按钮'})
      Row({ space:8 }){
        Button({ type: ButtonType.Circle }) {
          Image($rawfile('ic_music.png')).width(30).height(30)
        }.width(55).height(55).backgroundColor($r("app.color.success"))
        Button({ type: ButtonType.Circle }) {
          Image($rawfile('ic_trash.png')).width(30).height(30)
        }.width(55).height(55).backgroundColor($r("app.color.danger"))
      }

最终效果如下：

3.5 Button组件-鸿蒙开发者社区

注意：由于按钮本身有默认背景颜色（宇宙蓝），也可以设置需要的背景颜色。所以按钮上的图标和文字颜色不会受深色模式和浅色模式切换的影响，按钮上的图标或文字一般设置为白色。我的建议是，白色图标放入rawfile资源目录，不要放入media资源目录。

3.5.2 事件

使用按钮组件，通常是为了利用onClick()事件响应用户的点击行为。这里给一个简单的例子，实现点击按钮后变化背景颜色，代码如下：

先定义一个按钮颜色的变量：

@State private btnColor : Resource = $r("app.color.info")

加入演示代码：

      H8({text:'按钮事件演示'})
      Button('OK')
        .width(90)
        .backgroundColor(this.btnColor)
        .onClick(() => {
          this.btnColor = $r("app.color.warning")
        })

效果如下：

3.5 Button组件-鸿蒙开发者社区