在本章中,我们将介绍如何使用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修饰器,这是一个有趣的问题。