本示例介绍使用TextInput组件和LazyForEach实现组件随软键盘弹出避让场景。该场景多用于需要用户手动输入文字类应用。
使用说明
场景一:通过设置defaultFocus属性为true,使TextInput自动获焦,完成进入案例自动拉起键盘;
场景二:TextInput组件拥有点击获焦能力,输入框使用TextInput组件即可实现点击输入框弹出系统键盘;
场景三:通过使用focusControl.requestFocus API实现textInput获焦拉起键盘;
场景四:通过设置setKeyboardAvoidMode API,将页面的避让模式设置为RESIZE模式,,即可实现键盘拉起时组件上抬避让场景;
场景五 :通过监听键盘高度,可以实时感知键盘拉起收起状态,实现缩放组件尺寸的调整,达到键盘拉起组件缩小效果,配合KeyboardAvoidMode.RESIZE避让模式,实现组件上抬缩小场景。
export class KeyboardDataSource {
private dataArray: string[] = [];
private listeners: DataChangeListener[] = [];
constructor(dataArray: string[]) {
for (let i = 0; i < dataArray.length; i++) {
this.dataArray.push(dataArray[i]);
}
}
public getData(index: number): string {
return this.dataArray[index];
}
notifyDataReload(): void {
this.listeners.forEach(listener => {
listener.onDataReloaded();
})
}
notifyDataAdd(index: number): void {
this.listeners.forEach(listener => {
listener.onDataAdd(index);
})
}
// ...
}
TextInput()
.defaultFocus(true)
.key('keyInput')
Button('输入')
.onClick(() => {
focusControl.requestFocus('keyInput');
})
aboutToAppear(): void {
let context = getContext(this) as common.UIAbilityContext
context.windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);
window.getLastWindow(getContext(this)).then(currentWindow => {
currentWindow.on('keyboardHeightChange', (data: number) => {
this.keyboardHeight = px2vp(data);
})
})
}
aboutToAppear(): void {
window.getLastWindow(getContext(this)).then(currentWindow => {
currentWindow.on('keyboardHeightChange', (data: number) => {
this.keyboardHeight = px2vp(data);
})
})
}
@Builder
scalingContentComponent(item: string) {
Column() {
Image('')
.borderRadius(8)
.objectFit(ImageFit.Contain)
.width(this.keyboardHeight > 0 ? '40' : '80')
.height(this.keyboardHeight > 0 ? '40' : '80')
Text(item)
.fontColor(Color.Black)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
.width(this.keyboardHeight > 0 ? '110' : '175')
.height(this.keyboardHeight > 0 ? '110' : '175')
}
本示例使用了LazyForEach进行数据懒加载,liftUpComponents布局时会根据可视区域按需创建liftUpContentComponent组件,并在liftUpContentComponent滑出可视区域外时销毁以降低内存占用。
keyboardavoid // har类型
|---pages
| |---KeyboardAvoidIndex.ets // 视图层-应用主页面
|---basicDataResource
| |---BasicDataSource.ets // 数据模型层-LazyForEach控制器
不涉及。
不涉及。
1.本示例仅支持标准系统上运行。
2.本示例为Stage模型,支持API12版本SDK,SDK版本号(API Version 12 Release)。
3.本示例需要使用DevEco Studio版本号(DevEco Studio 5.0.0 Release)及以上版本才可编译运行。
如需单独下载本工程,执行如下命令:
git init
git config core.sparsecheckout true
echo code/UI/KeyboardAvoid/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。