Ionic Footer在安卓设备上偶现半遮挡，Toaster Notification也半遮挡问题

针对你遇到的安卓设备上Ionic Footer和Toaster Notification被半遮挡的问题，我整理了几个实用的解决方案，你可以根据项目情况尝试：

1. 利用Ionic安全区域适配系统导航栏 #

安卓设备的底部虚拟导航栏经常会覆盖footer，通过Ionic内置的安全区域类可以让footer自动避开这些系统区域：

修改你的footer代码，添加ion-safe-area-bottom类：

<ion-footer class="ion-safe-area-bottom">
  <ion-toolbar>
    <ion-row>
      <ion-col size="6">
        <button ion-button full color="secondary">ADD TO CART</button>
      </ion-col>
      <ion-col size="6">
        <button ion-button full color="primary">BUY NOW</button>
      </ion-col>
    </ion-row>
  </ion-toolbar>
</ion-footer>

这个类会自动检测设备的底部安全区域，给footer添加合适的padding，彻底避免被系统导航栏遮挡。

2. 调整Toaster Notification的位置和样式 #

Toaster默认的底部位置容易和footer重叠，你可以通过自定义CSS类调整它的底部偏移：

步骤1：创建Toast时指定自定义类 #

async presentToast() {
  const toast = await this.toastController.create({
    message: '操作完成！',
    duration: 2000,
    position: 'bottom',
    cssClass: 'toast-custom-offset' // 自定义类名
  });
  await toast.present();
}

步骤2：在全局样式文件（global.scss）中添加样式 #

.toast-custom-offset {
  bottom: 80px !important; /* 根据你的footer高度调整数值，确保Toaster在footer上方显示 */
}

如果你的footer高度是60px，设置80px就能留出足够的间隔，完全避开遮挡。

3. 配置Ionic全局滚动padding #

在app.module.ts中配置Ionic模块的scrollPadding选项，让页面内容自动避开footer和安全区域：

import { IonicModule } from '@ionic/angular';

@NgModule({
  imports: [
    IonicModule.forRoot({
      scrollPadding: true // 开启自动滚动padding适配
    })
  ]
})
export class AppModule {}

这个配置会让ion-content自动添加底部padding，确保页面内容不会被footer或系统导航栏遮挡。

额外检查：状态栏配置 #

如果页面顶部也存在遮挡问题，确保在app.component.ts中正确初始化状态栏：

import { StatusBar } from '@ionic-native/status-bar/ngx';

constructor(private statusBar: StatusBar) {
  this.initializeApp();
}

initializeApp() {
  this.statusBar.styleDefault(); // 使用默认状态栏样式
  this.statusBar.show(); // 确保状态栏可见
}

这些方案基本能解决安卓设备上的遮挡问题，你可以先尝试第一个安全区域的方法，这是最直接的适配方式。

内容的提问来源于stack exchange，提问作者Mohamed Arshath