滚动组件是否支持滚动时隐藏键盘
===============

#### 问题现象

List组件里面嵌套TextInput组件，如何实现滚动时隐藏键盘的效果？

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d3/v3/aInfjqumSAuf3j9W3eqNFw/zh-cn_image_0000002628593592.png?HW-CC-KV=V1&HW-CC-Date=20260709T133938Z&HW-CC-Expire=86400&HW-CC-Sign=A47169B61B9A8679AD9C5A44EB1C3A148612A6ED0258F171C5AF43F6D733564B "点击放大")

#### 背景知识

*   [focusable](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-focus#focusable)：设置当前组件是否可以获焦。
*   [onScrollStart](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-list#onscrollstart9)：列表滑动开始时触发。手指拖动列表或列表的滚动条触发的滑动开始时，会触发该事件。使用Scroller滑动控制器触发的带动画的滑动，动画开始时会触发该事件。
*   [onScrollStop](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-list#onscrollstop)：列表滑动停止时触发。手指拖动列表或列表的滚动条触发的滑动，手离开屏幕并且滑动停止时会触发该事件。使用Scroller滑动控制器触发的带动画的滑动，动画停止会触发该事件。

#### 解决方案

通过设置focusable的属性值来控制键盘的显示和隐藏，当List组件开始滚动时，设置focusable的属性值为false隐藏键盘。当List组件停止滚动时，设置focusable的属性值为true点击时显示键盘。

@Entry
@Component
struct ListExampleDemo {
  private arr: number\[\] \= \[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15\];
  controller: TextInputController \= new TextInputController();
  @State isFocusable: boolean \= true;

  build() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item: number) \=\> {
          ListItem() {

            TextInput({ text: item \+ '', controller: this.controller })
              .fontSize(16)
              .backgroundColor(0xFFFFFF)
              .focusable(this.isFocusable)
              .onClick(() \=\> {
                this.isFocusable \= true;
              });
          };
        }, (item: string) \=\> item);
      }
      .listDirection(Axis.Vertical) _// 排列方向_
      .scrollBar(BarState.Off)
      .friction(0.6)
      .edgeEffect(EdgeEffect.Spring) _//_ _边缘效果设置为Spring_
      .onScrollStart(() \=\> {
      _  // List组件开始滚动时，将focusable设置为false_
        this.isFocusable \= false;
      })
      .onScrollStop(() \=\> {
      _  // List组件停止滚动时，将focusable设置为true_
        this.isFocusable \= true;
      })
      .width('90%');
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f1f3f5')
    .padding({ top: 5 });
  }
}