HarmonyOS 鸿蒙Next中有没有类似于iOS的InputAccessoryView的组件

HarmonyOS 鸿蒙Next中有没有类似于iOS的InputAccessoryView的组件 现在需要实现一个类似于iOS的InputAccessoryView的,那位大佬知道。

2 回复

看问题描述的不是很详细,看下以下答复是否能满足你的需求:

在iOS系统下,针对TextField提供了inputAccessoryView属性,可以添加辅助功能视图,这样可以在辅助视图上添加自定义的按钮事件,进行系统键盘和自定义键盘的切换处理。harmony中您可参考如下替代方案,通过textinput的获焦与失焦控制组件的显隐,通过监听键盘的高度设置组件的位置,组件的动画效果可根据实际需求设置:

import { display, window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
import { common } from '@kit.AbilityKit';
@Entry
@Component
struct Index {
  controller: TextInputController = new TextInputController();
  @State inputValue: string = '';
  @State show: boolean = false;
  @State hide: boolean = false
  @State y: number = 0
  // 自定义键盘组件
  @Builder
  CustomKeyboardBuilder() {
    Column() {
      Button('x')
        .onClick(() => {
          // 关闭自定义键盘
          this.controller.stopEditing();
          this.show = !this.show;
        }
      Grid() {
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
          GridItem() {
            Button(item + '')
              .width(110)
              .onClick(() => {
                this.inputValue += item;
              })
          }
        })
      }
      .maxCount(3)
      .columnsGap(10)
      .rowsGap(10)
      .padding(5)
    }
    .backgroundColor(Color.Gray)
  }
  build() {
    Column() {
      TextInput({ controller: this.controller, text: this.inputValue })// 绑定自定义键盘
        .customKeyboard(this.show ? this.CustomKeyboardBuilder() : undefined)
        .margin(10)
        .height(48)
        .onFocus(() => {
          let screenHeight: number
          display.getAllDisplays((err: BusinessError, data: Array<display.Display>) => {
            let screenWidth: number = data[0].width
            screenHeight = data[0].height
            console.log('width = ' + px2vp(screenWidth) + 'height = ' + screenHeight)
          });
          let context = getContext(this) as common.UIAbilityContext
          window.getLastWindow(context).then(lastWindow => {
            lastWindow.on('keyboardHeightChange', (size: number) => {
              console.warn(`...keyboardHeightChange: ${size}`);
              this.y = px2vp(screenHeight) - px2vp(size) - 73
            })
          }).catch((err: BusinessError) => {
            console.error(`...error message: ${err.message}`);
          })
          this.hide = true
        })
        .onBlur(() => {
          this.hide = false
        })
      if (this.hide) {
        Row() {
          Button('切换')
            .onClick(() => {
              this.show = !this.show;
            })
        }.backgroundColor(Color.Yellow)
        .width('100%')
        .position({ x: 0, y: this.y })
        .justifyContent(FlexAlign.Center)
      }
    }
  }
}

请验证上述方案,如有疑问我们再沟通~

您还可以使用customdialog实现,demo如下:

@CustomDialog
@Component
export struct dialog {
  dialogcontroller: CustomDialogController
  build() {
    Column(){
      TextInput()
        .type(InputType.Normal)
        .defaultFocus(true)
        .onBlur(()=>{
          this.dialogcontroller.close()
        })
    }.margin({bottom:-16})
    .height(100)
    .backgroundColor(Color.Blue)
  }
}
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  customdialogcontroller: CustomDialogController=new CustomDialogController({
    builder:dialog(),
    alignment:DialogAlignment.Bottom,
    cornerRadius:0,
    customStyle:true
  })
  build() {
    RelativeContainer() {
      Text(this.message)
        .onClick(()=>{
          this.customdialogcontroller.open()
        })
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next中有没有类似于iOS的InputAccessoryView的组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS(鸿蒙Next)中,确实存在类似于iOS的InputAccessoryView的组件。鸿蒙Next提供了一个名为TextInputBar的组件,用于在软键盘上方显示自定义的输入辅助视图。TextInputBar可以包含按钮、文本或其他UI元素,帮助用户在输入时执行特定操作,类似于iOS的InputAccessoryView

开发者可以通过TextInputBar组件实现与InputAccessoryView相似的功能,例如在输入法键盘上方添加“完成”、“下一步”等操作按钮。TextInputBar的使用方式与鸿蒙的UI框架一致,支持灵活的自定义和布局调整。

需要注意的是,TextInputBar的显示与软键盘的弹出和隐藏是同步的,开发者无需手动处理键盘事件。通过TextInputBar,开发者可以轻松实现与iOS平台相似的输入辅助功能。

回到顶部