HarmonyOS 鸿蒙Next中有没有类似于iOS的InputAccessoryView的组件
HarmonyOS 鸿蒙Next中有没有类似于iOS的InputAccessoryView的组件 现在需要实现一个类似于iOS的InputAccessoryView的,那位大佬知道。
看问题描述的不是很详细,看下以下答复是否能满足你的需求:
在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平台相似的输入辅助功能。