HarmonyOS鸿蒙Next中开发自定义键盘,有没有长按按键子项的起泡效果的api?

HarmonyOS鸿蒙Next中开发自定义键盘,有没有长按按键子项的起泡效果的api? 按键子项的起泡效果用什么组件实现好?类型于图片中的效果

cke_690.jpeg


更多关于HarmonyOS鸿蒙Next中开发自定义键盘,有没有长按按键子项的起泡效果的api?的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

自定义键盘长按按钮增加气泡效果,可以参考以下demo和逻辑实现。

【背景知识】 自定义键盘实现官网代码实践。 LongPressGesture长按手势默认最短长按时间为500毫秒,可配置duration参数控制最短长按时长。 Popup控制为组件绑定Popup气泡,并设置气泡内容、交互逻辑和显示状态。

【解决方案】 参考官网自定义键盘实现的demo,修改demo中NumberKeyboard文件如下:

  1. 创建变量控制气泡显隐逻辑:
@State handlePopup: boolean = false
@State customPopup: boolean = false
@State indexNum:number = 0;
  1. 增加LongPressGesture长按控制手势,在onAction事件中增加逻辑,让气泡仅显示在指定按键上方;

  2. 增加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 可以看看,不一定满足要求,

谢谢了 不过也不行 popup 好像不能超出键盘Panel,没能让气泡出界实现不了这个功能,

在HarmonyOS Next中,自定义键盘长按按键的起泡效果可通过@ohos.ui.extensionComponent中的KeyEventGesture相关API实现。具体使用Gesture组件的onGesture方法监听长按事件,结合KeyAttribute设置按键属性触发气泡动画。系统提供BubbleStyle用于配置气泡样式和显示逻辑,无需依赖Java或C语言。

在HarmonyOS Next中,可以通过@ohos.gesture模块的Gesture组件实现长按按键的起泡效果。建议使用LongPressGesture监听长按事件,结合@ohos.animationKeyframeAnimationAnimator组件实现弹性缩放动画。

示例代码:

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();
};

关键点:

  1. 使用LongPressGesturerepeat事件持续触发动画
  2. 通过spring曲线实现弹性效果
  3. 结合scale变换实现视觉膨胀效果
  4. 调用reverse()实现自动回弹

可根据实际需求调整动画参数,如stiffness(刚度)、damping(阻尼)等参数来优化起泡效果。

回到顶部