# 折叠屏折叠态，应用页面底部未避让导航栏

#### 问题现象

折叠屏折叠态时，应用页面底部按钮与导航栏重叠，导致无法点击该按钮。

#### 背景知识

*   使用setWindowLayoutFullScreen方法可设置窗口为全屏模式，让页面的状态栏和导航栏区域背景可自定义，不为系统的默认底色。
*   getWindowAvoidArea可获取应用内容规避区域，如系统栏区域、刘海屏区域、手势区域、软键盘区域等与宿主窗口内容重叠时，需要宿主窗口内容避让的区域。

#### 问题定位

全局检索setWindowLayoutFullScreen，应用通过setWindowLayoutFullScreen配置了全屏模式，且未设置padding避让导航栏和状态栏。

```
@Entry
@Component
struct WebComponent {

  aboutToAppear(): void {
    let context: common.UIAbilityContext = this.getUIContext().getHostContext() as common.UIAbilityContext;
    window.getLastWindow(context).then((lastWindow) => {
      lastWindow.setWindowLayoutFullScreen(true); // 设置全屏
    });
  }

  build() {
    Column() {
      // 页面内容
    }
    // 未设置padding避让导航栏和状态栏
  }
}
```

#### 分析结论

为了实现沉浸式效果，应用开启了全屏模式，但是未动态避让状态栏和导航栏，导致内容与导航栏重叠，无法点击到页面上的点击按钮。

#### 修改建议

在开启全屏模式后，通过padding避让状态栏和导航栏。

```
import { TipsDialog, window } from '@kit.ArkUI';
import { common } from '@kit.AbilityKit';

@Entry
@Component
struct AvoidArea {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: TipsDialog({
      content: '是否确认无误',
      primaryButton: {
        value: '取消',
        action: () => {
          this.dialogController.close();
        },
      },
      secondaryButton: {
        value: '确定',
        role: ButtonRole.ERROR,
        action: () => {
          this.dialogController.close();
        }
      }
    }),
  });
  @State statusHeight: number = 0;
  @State navigationHeight: number = 0;

  aboutToAppear(): void {
    let context: common.UIAbilityContext = this.getUIContext().getHostContext() as common.UIAbilityContext;
    window.getLastWindow(context).then((lastWindow) => {
      lastWindow.setWindowLayoutFullScreen(true); // 设置全屏
      this.statusHeight = lastWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height; // 获取状态栏高度
      this.navigationHeight =
        lastWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect.height; // 获取导航栏高度
    });
  }

  build() {
    Column() {
      TextInput({ placeholder: '请输入内容' })
        .width('80%')
        .height(40)
        .borderRadius('50%')
        .margin({ bottom: 350 });

      Button('确认')
        .height(30)
        .width(90)
        .borderRadius('50%')
        .backgroundColor('#0A59F7')
        .margin({ bottom: 2 })
        .onClick(() => {
          this.dialogController.open();
        });
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.End)
    .padding({ top: this.statusHeight + 'px', bottom: this.navigationHeight + 'px' }); // 设置padding避让导航栏和状态栏
  }
}
```

效果图如下：