[ArkTS开发]HarmonyOS 鸿蒙Next如何开发一个灵动美观的按钮组件（以返回按钮为例）
[ArkTS开发]HarmonyOS 鸿蒙Next如何开发一个灵动美观的按钮组件（以返回按钮为例）
开发者伙伴们大家好，在ArkTS开发中，我们经常会用到按钮组件，每个样式一般都需要单独设置，这时候把他它们抽象成一个自定义控件无疑是非常方便的选择。
效果展示
一、关键代码
1.定义变量
@State isButtonPress: boolean = false; // 用于判断按钮是否按下
2.实现缩放
.scale({
centerX: “50%”,
centerY: “50%”,
x: this.isButtonPress ? 0.90 : 1,
y: this.isButtonPress ? 0.90 : 1,
})
3.实现动画（非线性）
.animation({
duration: 200,
curve: Curve.Ease
})
4.触摸时引起isButtonPress变化，从而刷新控件播放动画
.onTouch((event: TouchEvent) => {
if (event.type == TouchType.Down) {
this.isButtonPress = true
} else if (event.type == TouchType.Up) {
this.isButtonPress = false
}
})
5.实现入场和退场动画
.transition(
TransitionEffect.opacity(0)
.combine(TransitionEffect.scale({
centerX: “50%”,
centerY: “50%”,
x: 0.5,
y: 0.5
}))
.animation({
duration: 200,
curve: Curve.Ease,
delay: 50
})
)
二、详细实现过程
首先新建模块在项目选项卡中右键，新建——模块
在模块中可以定义按钮的类型（如返回按钮等）
export enum eButtonType {
Back,
}
然后定义按钮控件
import { eButtonType } from ‘…/common/constants’
export struct eButton {
@State eButtonType: eButtonType = eButtonType.Back;
@State isButtonPress: boolean = false;
build() {
// type：按钮类型（胶囊、圆形和普通）、buttonStyle：按钮样式（强调、普通、文字）
Button({ type: ButtonType.Circle, buttonStyle: ButtonStyleMode.NORMAL }) {
Flex({
direction: FlexDirection.Row,
justifyContent: FlexAlign.Center,
alignItems: ItemAlign.Center
}) {
//返回按钮
if(this.eButtonType == eButtonType.Back){
SymbolGlyph($r(‘sys.symbol.chevron_left’))
.fontSize(30)
.offset({
x: -1,
y: 0,
})
}
}
}
.height(44)
.width(44)
.scale({
centerX: “50%”,
centerY: “50%”,
x: this.isButtonPress ? 0.90 : 1,
y: this.isButtonPress ? 0.90 : 1,
})
.animation({
duration: 200,
curve: Curve.Ease
})
.onTouch((event: TouchEvent) => {
if (event.type == TouchType.Down) {
this.isButtonPress = true
} else if (event.type == TouchType.Up) {
this.isButtonPress = false
}
})
.transition(
TransitionEffect.opacity(0)
.combine(TransitionEffect.scale({
centerX: “50%”,
centerY: “50%”,
x: 0.5,
y: 0.5
}))
.animation({
duration: 200,
curve: Curve.Ease,
delay: 50
})
)
}
}
在模块index文件中导出
export { eButton } from ‘./src/main/ets/components/eButton’
export { eButtonType } from ‘./src/main/ets/common/constants’
最后在需要使用的模块或程序的oh-package文件中使用file表达式引用该模块
“dependencies”: {
‘@MindSpire/uicomponents’: ‘file:…/…/common/uicomponents’
}
最后在需要的地方调用该控件即可
import { eButton, eButtonType } from ‘@MindSpire/uicomponents’
struct Index {
build() {
Row() {
Column() {
eButton({
eButtonType: eButtonType.Back
})
.onClick(() => {
console.log(“eButton.Back is clicked.”)
}) // 处理onClick事件
}.width(‘100%’)
}.height(‘100%’)
}
}
在HarmonyOS ArkTS开发中，要创建一个灵动美观的返回按钮组件，你可以使用@Component装饰器定义一个自定义组件，并在其模板中使用Button元素。通过CSS样式控制按钮的外观，如背景色、边框、圆角等。对于返回按钮，你可以设置图标或文本作为内容，并利用@Click事件监听器处理点击事件，实现导航功能。
示例代码片段：
@Component
struct BackButton {
@Click('button')
onClick() {
// 处理返回逻辑
}
build() {
Row() {
Button('返回')
.width(80)
.height(40)
.backgroundColor('#007BFF')
.textColor(Color.White)
.onClick(this.onClick)
}
}
}
如果问题依旧没法解决请加我微信，我的微信是itying888。
