一、引言
鸿蒙中没有与安卓类似的滚动列表，收起键盘的API接口。
我们目前的业务场景中，有很多柔性用户需求需要如此处理。
将项目中的滚动列表效果，代码分享如下，希望能帮助到大家。
二、开发思路
开发思路是先搞清楚，在鸿蒙中键盘的显示和收起是如何触发？在HarmonyOS中，键盘都是跟随输入控件的焦点获焦激活。失去焦点就会收起键盘。
@Entry
@Component
struct KeyboardHideOnScroll {
@State isKeyboardOpen: boolean = false;
build() {
Column({ space: 20 }) {
TextInput({
placeholder: '输入内容',
})
.onFocus(()=>{
this.isKeyboardOpen = true;
})
.onBlur(()=>{
this.isKeyboardOpen = false;
})
// 改变焦点，间接控制键盘的显示隐藏
.focusable(this.isKeyboardOpen)
.width('90%')
.padding({ left: 10, right: 10 })
}
.width('100%')
.padding({ top: 20 })
}
}
根据以上特性，我们使用@State修饰的状态变量isKeyboardOpen，进行开关处理。
将输入控件，textinput设置focusable，绑定isKeyboardOpen。
根据ArkUI框架的特性，实现isKeyboardOpen开关变化，textinput的焦点就会变化的效果。
之后处理滚动的监听，根据scroller滚动回调，计算是否是滚动中，如果是，则收起键盘。
@Entry
@Component
struct KeyboardHideOnScroll {
private lastScrollY: number = 0;
scroller: Scroller = new Scroller()
build() {
Scroll(this.scroller) {
}
.width('100%')
.onDidScroll((scrollX: number, scrollY: number) => {
const scrollDelta = scrollY - this.lastScrollY;
// 滑动时，隐藏键盘
if (this.isKeyboardOpen && scrollDelta > 0) {
this.isKeyboardOpen = false;
}
this.lastScrollY = scrollY;
})
}
}
三、源码分享
@Entry
@Component
struct KeyboardHideOnScroll {
@State isKeyboardOpen: boolean = false;
private lastScrollY: number = 0;
scroller: Scroller = new Scroller()
build() {
Scroll(this.scroller) {
Column({ space: 20 }) {
TextInput({
placeholder: '输入内容',
})
.onFocus(()=>{
this.isKeyboardOpen = true;
})
.onBlur(()=>{
this.isKeyboardOpen = false;
})
// 改变焦点，间接控制键盘的显示隐藏
.focusable(this.isKeyboardOpen)
.width('90%')
.padding({ left: 10, right: 10 })
ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], (index: number) => {
Text(`测试数据： ${index}`)
.width('90%')
.padding({ left: 10, right: 10 })
}, (index: number) => index.toString())
}
.width('100%')
.padding({ top: px2vp(30) })
}
.width('100%')
.onDidScroll((scrollX: number, scrollY: number) => {
const scrollDelta = scrollY - this.lastScrollY;
// 滑动时，隐藏键盘
if (this.isKeyboardOpen && scrollDelta > 0) {
this.isKeyboardOpen = false;
}
this.lastScrollY = scrollY;
})
}
}
