在本章中，我们将介绍如何使用ArkUI实现按钮点击的交互，包含Button基础组件的使用，以及自定义实现点击事件。

基础按钮

在ArkUI中，可以使用Button按钮控件，来实现一个按钮样式和交互，如下代码所示：

Button('立即使用')

上述代码中，Button按钮控件中，使用string类型的参数来显示按钮的文字内容。Button按钮控件的默认样式为Capsule胶囊按钮样式，我们也可以设置Button按钮控件的type类型参数，来实现样式的更改，如下代码所示：

Button(
      '立即使用',
      {type: ButtonType.Normal}
)

上述代码中，我们在Button按钮控件的必包中，设置type类型参数的值为Normal，便获得了一个常规的矩形按钮样式。我们进一步美化样式，比如设置一个圆角，使其变成一个圆角按钮，这是一种比较常见的场景。如下代码所示：

Button(
  '立即使用',
  {type: ButtonType.Normal}
)
  .borderRadius(8)

另外，ArkUI为了凸显按钮点击效果，还提供了stateEffect压感显示参数，当开启后，可以实现颜色叠加效果，算是一个设计上的小细节。如下代码所示：

Button(
  '立即使用',
  { type: ButtonType.Normal,
    stateEffect: true
  }
)

自定义按钮

上面的例子所呈现的更多是默认的“文字按钮”的效果，如果我们需要实现一个复杂的按钮，又该如何实现呢？比如带有一个icon的按钮。

如果是标准的icon，在ArkUI的string类型的参数中，支持识别Emoji表情，这就比较有意思。如下代码所示：

Button('🥳 立即使用')

但如果我们需要自定义icon和文字的组合按钮样式，那么就需要设置Button按钮控件的必包，在其闭包中实现按钮样式。如下代码所示：

Button({type: ButtonType.Normal,stateEffect: true}){
  // 自定义按钮
  Row({space:5}){
    Image($r('app.media.foreground')).objectFit(ImageFit.Fill).width(32)
    Text('立即使用').fontColor(Color.White)
  }
  .padding(10)
}
.borderRadius(8)

上述代码中，我们去掉了Button按钮参数中的string类型的文字参数，并且给Button按钮增加了闭包{}，在其闭包中，我们使用Row横向布局容器实现了一个Image、Text图片文字的组合按钮样式。便实现了一个icon+文字的自定义按钮。

当然，为了样式美观，我们增加了padding修饰器，“撑开”边距，并设置了borderRadius边框圆角。

这里注意的是，borderRadius边框圆角修饰器需要作用在Button按钮控件上，而不是作用在Row的组合按钮样式上，才能实现按钮的圆角效果。

按照这样的实现逻辑，理论上我们可以将任何内容放置在Button按钮控件的闭包中，使其变成一个按钮。比如在移动端最常见的“关闭按钮”，如下代码所示：

Button({type: ButtonType.Circle,stateEffect: true}){
      Image($r('app.media.ic_close'))
        .fillColor('#FFFFFF')
        .width(23).height(23)
    .margin(10)
  }
  .backgroundColor('#EAEAEA')

按钮点击事件

样式确定后，当点击按钮时，常常伴随着实现/触发某项功能的交互动作，这时我们还需要使用到onClick点击事件修饰器，来承接按钮的点击交互。如下代码所示：

Button({type: ButtonType.Circle,stateEffect: true}){
    // 自定义按钮
}
.backgroundColor('#EAEAEA')
.onClick(() => {
  // 点击后的交互
})

上述代码中，我们使用了onClick点击事件修饰器，在其参数中我们省略了event?: ClickEvent点击事件参数，当存在点击事情根据不同情况进行判断的场景时，我们会增加event判断，在此先行省略。

那么在点击事件的闭包中，就可以执行点击按钮后的交互动作。

其他思考

在API Version 10中，突然发现了一个有趣的修饰器— —clickEffect点击回弹效果修饰器，可以用来模拟按钮的点击回弹效果。于是乎就在思考一个问题：是不是不用Button，直接为视图添加clickEffect也可以实现按钮效果。

那么尝试一下，如下代码所示：

Column() {
    Image($r('app.media.ic_close'))
      .fillColor('#FFFFFF')
      .width(23).height(23)
      .margin(10)
  }
  .backgroundColor('#EAEAEA')
  .borderRadius(90)
  .clickEffect({level:ClickEffectLevel.LIGHT})
  .onClick(() => {
    // 点击后的交互
  })

上述代码中，我们去掉了Button按钮控件，替换为Column垂直布局容器（PS：Image图片视图需要外层增加容器）。下一步我们增加了.clickEffect点击回弹修饰器，并设置ClickEffectLevel.LIGHT，也就是点击时回弹的缩放比例为0.90。

如此，好像也实现了按钮被点击的交互效果。

so，在实际开发过程中，是使用Button控件，还是使用clickEffect修饰器，这是一个有趣的问题。

ArkUI极简教程08：Button视图的使用

基础按钮

自定义按钮

按钮点击事件

其他思考