软键盘弹出时，固定导航栏不滚动以及软键盘区域不遮盖组件（输入框）

import window from '@ohos.window'; 
@Entry 
@Component 
struct ScrollExample { 
scroller: Scroller = new Scroller() 
private arr: number[] = [0, 1, 2, 3, 4, 5] 
controller: TextInputController = new TextInputController() 
@State flag: boolean = false; 
@State TextTest: string = '' 
@State TextTest1: string = '' 
@State screenHeight: number = 0; 
​ 
aboutToAppear() { 
  window.getLastWindow(getContext(this)).then(currentWindow =>{ 
    let property = currentWindow.getWindowProperties(); 
    let avoidArea = currentWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_KEYBOARD); 
    // 初始化显示区域高度 
    this.screenHeight = px2vp(property.windowRect.height - avoidArea.bottomRect.height); 
    // 监视软键盘的弹出和收起 
    currentWindow.on('avoidAreaChange', async data => { 
      // 获取窗口内容规避的区域,如系统栏区域、刘海屏区域、手势区域、软键盘区域等 
      if (data.type !== window.AvoidAreaType.TYPE_KEYBOARD) { 
        return; 
      } 
      // 由于aboutToAppear该生命周期在build函数之前就执行了，所以只设置一个Text文本的话会有一个bug，即键盘收起后，文本顶起的区域并不会收回，影响用户体验，因此这里就用了两个文本来实现效果 
      this.TextTest = (this.TextTest == '') ? '1' : '' 
      if (this.TextTest1 == '1') { 
        this.TextTest1 = '' 
      } 
      console.log(this.TextTest, 666) 
      this.screenHeight = px2vp(property.windowRect.height - data.area.bottomRect.height); 
    }) 
  }) 
} 
​ 
build() { 
  // 使用Stack容器来实现Navigation导航栏的固定 
  Stack({ alignContent: Alignment.TopStart }) { 
    Scroll(this.scroller) { 
      Column() { 
        ForEach(this.arr, (item:number) => { 
          Text(item.toString()) 
            .width('90%') 
            .height(150) 
            .backgroundColor(0xFFFFFF) 
            .borderRadius(15) 
            .fontSize(16) 
            .textAlign(TextAlign.Center) 
            .margin({ top: 10 }) 
        }, (item:number) => item.toString()) 
        TextInput({ placeholder: 'search...', controller: this.controller }) 
          // 默认设置当前组件不能获焦 
          .focusable(this.flag) 
          .width('90%') 
          .height(40) 
          .backgroundColor('#FFFFFF') 
          .margin({ top: 8, bottom: 20 }) 
            // 设置点击事件重新获取焦点 
          .onClick(() => { 
            this.flag = true 
            this.TextTest1 = '1' 
          }) 
        // 给键盘空出的高度，内容不为空时会顶起页面的底部内容显示 
        Text(this.TextTest) 
          .lineHeight(300) 
          .fontColor('#DCDCDC') 
          Text(this.TextTest1) 
            .lineHeight(300) 
            .fontColor('#DCDCDC') 
      }.width('100%') 
    } 
    // 上间距根据导航栏高度来设置 
    .margin({top: 110}) 
    .scrollable(ScrollDirection.Vertical) 
    .scrollBar(BarState.On) 
    .scrollBarColor(Color.Gray) 
    .scrollBarWidth(0) 
    .onScroll((xOffset: number, yOffset: number) => { 
      console.info(xOffset + ' ' + yOffset) 
    }) 
    // Stack容器内的第二个子组件，Navigation会覆盖Scroll容器 
    Navigation() { 
    } 
    .title('导航栏标题') 
    .backgroundColor(Color.Yellow) 
    .height(110) 
    .titleMode(NavigationTitleMode.Full) 
    .hideTitleBar(false) 
    .hideToolBar(false) 
    // 这里的按钮是初步思想，由于没有找到监听键盘收起的事件，因此在键盘弹出时可以点击按钮，失去焦点的同时设置文本内容为空，但考虑到用户不会通过别的方式来收起键盘，因此这种方式就摒弃了，思路可供参考。 
    Button('键盘收起') 
      .onClick(() => { 
        this.TextTest1 = '' 
        this.flag = false 
      }) 
      .margin({top:10, left: 20}) 
  }.width('100%').height('100%').backgroundColor(0xDCDCDC) 
  // 设置屏幕的安全区域 
  .expandSafeArea([SafeAreaType.KEYBOARD]) 
} 
} 
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.