HarmonyOS鸿蒙Next中有一个页面的滚动内容区容器高度延伸到底部小白条安全区如何解决

可参考 https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-develop-apply-immersive-effects#窗口全屏布局方案 ，通过setWindowLayoutFullScreen()实现全局沉浸式再通过接口getWindowAvoidArea()和on(‘avoidAreaChange’)获取并动态监听避让区域的变更信息，页面布局根据避让区域信息进行动态调整。Scroll 是滚动容器，内容区会被裁剪 / 滚动，自身 padding 只影响内部内容，不会改变 Scroll 组件本身在屏幕的占位所以并不会生效，可在scroll父组件加padding就可以起到避让导航条的效果可参考EntryAbility：

onWindowStageCreate(windowStage: window.WindowStage): void {
    console.info('onWindowStageCreate');

    let windowClass: window.Window | undefined = undefined;

    windowStage.getMainWindow((err: BusinessError, data) => {
      const errCode: number = err.code;
      if (errCode) {
        console.error(`Failed to obtain the main window. Cause code: ${err.code}, message: ${err.message}`);
        return;
      }
      windowClass = data;
      let isLayoutFullScreen = true;
      try {
        let promise = windowClass.setWindowLayoutFullScreen(isLayoutFullScreen);
        promise.then(() => {
          console.info('Succeeded in setting the window layout to full-screen mode.');
        }).catch((err: BusinessError) => {
          console.error(`Failed to set the window layout to full-screen mode. Cause code: ${err.code}, message: ${err.message}`);
        });
        // EntryAbility.ets
        // 2. 获取布局避让遮挡的区域
        let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR; // 此处以导航条避让为例
        let avoidArea = windowClass.getWindowAvoidArea(type);
        let bottomRectHeight = avoidArea.bottomRect.height; // 获取到导航区域的高度
        AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);
        type = window.AvoidAreaType.TYPE_SYSTEM; // 以状态栏避让为例
        avoidArea = windowClass.getWindowAvoidArea(type);
        let topRectHeight = avoidArea.topRect.height; // 获取状态栏区域高度
        AppStorage.setOrCreate('topRectHeight', topRectHeight);// EntryAbility.ets
        // 3. 注册监听函数，动态获取避让区域数据
        windowClass.on('avoidAreaChange', (data) => {
          if (data.type === window.AvoidAreaType.TYPE_SYSTEM) {
            let topRectHeight = data.area.topRect.height;
            AppStorage.setOrCreate('topRectHeight', topRectHeight);
          } else if (data.type == window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
            let bottomRectHeight = data.area.bottomRect.height;
            AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);
          }
        });
      } catch (exception) {
        console.error(`Failed to set the window layout to full-screen mode. Cause code: ${exception.code}, message: ${exception.message}`);
      }
    });
    // Main window is created, set main page for this ability
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
        return;
      }
      hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
    });

index：

// xxx.ets

@Entry
@Component
struct ScrollExample {
  @StorageProp('bottomRectHeight')
  bottomRectHeight: number = 0;
  @StorageProp('topRectHeight')
  topRectHeight: number = 0;
  scroller: Scroller = new Scroller()
  private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9]
  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Scroll(this.scroller) {
        Column() {
          ForEach(this.arr, (item: number) => {
            Stack() {
              Text('Display Content ' + item.toString()).fontSize(30)
            }
            .width('80%').padding(20).borderRadius(15).backgroundColor(Color.White).margin({ top:30, bottom:30 })
          }, (item: string) => item)
        }.width('100%').backgroundColor('rgb(213,213,213)')
      }.backgroundColor('rgb(213,213,213)')
    }.width('100%').height('100%')
    .padding({bottom:this.getUIContext().px2vp(this.bottomRectHeight)})
  }
}