HarmonyOS鸿蒙Next中开发自定义键盘,有没有长按按键子项的起泡效果的api?
HarmonyOS鸿蒙Next中开发自定义键盘,有没有长按按键子项的起泡效果的api? 按键子项的起泡效果用什么组件实现好?类型于图片中的效果
更多关于HarmonyOS鸿蒙Next中开发自定义键盘,有没有长按按键子项的起泡效果的api?的实战教程也可以访问 https://www.itying.com/category-93-b0.html
自定义键盘长按按钮增加气泡效果,可以参考以下demo和逻辑实现。
【背景知识】 自定义键盘实现官网代码实践。 LongPressGesture长按手势默认最短长按时间为500毫秒,可配置duration参数控制最短长按时长。 Popup控制为组件绑定Popup气泡,并设置气泡内容、交互逻辑和显示状态。
【解决方案】 参考官网自定义键盘实现的demo,修改demo中NumberKeyboard文件如下:
- 创建变量控制气泡显隐逻辑:
@State handlePopup: boolean = false
@State customPopup: boolean = false
@State indexNum:number = 0;
-
增加LongPressGesture长按控制手势,在onAction事件中增加逻辑,让气泡仅显示在指定按键上方;
-
增加bindPopup气泡控制,设置
placement: Placement.TopRight,
让气泡显示在按钮上方,通过this.popupBuilder(item)
给自定义气泡组件传参然后自定义气泡内容;
import { Menu, numberKeyboardData } from '../viewmodel/MenuModel';
import { KeyboardController } from '../model/KeyboardController';
import { Constants } from '../constants/Constants';
@Component
export struct NumberKeyboard {
@Consume inputText: string;
@Consume keyboardController: KeyboardController;
layoutOptions: GridLayoutOptions = {
regularSize: [1, 1],
irregularIndexes: [14, 16],
onGetIrregularSizeByIndex: (index: number) => {
if (index === 14) {
return [2, 1];
}
return [1, 2];
}
};
@State handlePopup: boolean = false
@State customPopup: boolean = false
@State indexNum:number = 0;
build() {
Grid(undefined, this.layoutOptions) {
ForEach(numberKeyboardData, (item: Menu,index:number) => {
GridItem() {
Button(item.text, { type: ButtonType.Normal })
.fontColor(Color.Black)
.backgroundColor(item.backgroundColor)
.borderRadius(Constants.KEYBOARD_BUTTON_RADIUS)
.fontSize(Constants.KEYBOARD_BUTTON_FONTSIZE_18)
.padding(0)
.width(item.width)
.height(item.height)
.onClick(() => {
this.inputText = this.keyboardController.onInput(item.text);
})
.gesture(
// 绑定可以重复触发的LongPressGesture
LongPressGesture({ repeat: true })
.onAction((event: GestureEvent|undefined) => {
for(let i=0;i< numberKeyboardData.length;i++){
if( item.text== numberKeyboardData[i].text){
this.indexNum = i;
break;
}
}
this.customPopup = true;
})
.onActionEnd(()=>{
this.customPopup = !this.customPopup
})
)
.bindPopup(this.customPopup && numberKeyboardData.indexOf(item) === this.indexNum, {
// CustomPopupOptions类型气泡的内容
builder: this.popupBuilder(item),
placement: Placement.TopRight,
targetSpace: '15vp',
enableArrow: false,
onStateChange: (e) => {
if (!e.isVisible) {
this.customPopup = false
}
}
})
}
}, (item: Menu) => JSON.stringify(item))
}
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.rowsGap($r('app.float.number_keyboard_grid_gap'))
.columnsGap($r('app.float.number_keyboard_grid_gap'))
}
@Builder
popupBuilder(item:Menu) {
Row() {
Text(item.text)
}
.height(50)
.width(50)
.padding(5)
.justifyContent(FlexAlign.Center)
}
}
更多关于HarmonyOS鸿蒙Next中开发自定义键盘,有没有长按按键子项的起泡效果的api?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
有个衔接没这么好的,好像就叫 Bubble?
BubbleParams是地图组件的,不太行,
记错了,是 popup/bindPopup 可以看看,不一定满足要求,
在HarmonyOS Next中,自定义键盘长按按键的起泡效果可通过@ohos.ui.extensionComponent
中的KeyEvent
和Gesture
相关API实现。具体使用Gesture
组件的onGesture
方法监听长按事件,结合KeyAttribute
设置按键属性触发气泡动画。系统提供BubbleStyle
用于配置气泡样式和显示逻辑,无需依赖Java或C语言。
在HarmonyOS Next中,可以通过@ohos.gesture
模块的Gesture
组件实现长按按键的起泡效果。建议使用LongPressGesture
监听长按事件,结合@ohos.animation
的KeyframeAnimation
或Animator
组件实现弹性缩放动画。
示例代码:
import { LongPressGesture } from '@ohos.gesture';
import { Animator, AnimatorOptions } from '@ohos.animation';
// 在按键组件上添加长按手势
LongPressGesture({ repeat: true })
.onAction((event: GestureEvent) => {
if (event.repeat) {
// 触发起泡动画
startBubbleAnimation();
}
})
// 实现弹性缩放动画
const startBubbleAnimation = () => {
const options: AnimatorOptions = {
duration: 300,
curve: {
type: 'spring',
// 调整参数实现起泡效果
stiffness: 100,
damping: 10
}
};
Animator(this.context, options)
.update({ scale: { x: 1.2, y: 1.2 } })
.reverse() // 自动回弹
.play();
};
关键点:
- 使用
LongPressGesture
的repeat
事件持续触发动画 - 通过spring曲线实现弹性效果
- 结合scale变换实现视觉膨胀效果
- 调用
reverse()
实现自动回弹
可根据实际需求调整动画参数,如stiffness(刚度)、damping(阻尼)等参数来优化起泡效果。