HarmonyOS NEXT - 列表滚动收起输入键盘 原创

​
一、引言
鸿蒙中没有与安卓类似的滚动列表，收起键盘的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 })
1.
2.
3.

}
}
根据以上特性，我们使用@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;
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

}
}
三、源码分享

@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;
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

}
}

​