Ionic 4-iOS状态栏与顶部选项卡重叠

我试图在我的应用程序顶部创建一个标签栏，没有明显的标题，但iOS状态栏与之重叠。我尝试过将ion tabs标签包装在一个带有填充的ion内容标签中，但没有成功。我将标签包装在一个标题中，修复了填充问题，但随后标签加载的页面消失在标题中

我看过所有关于标题重叠的帖子，但这些都是几年前的事了，在ion 4中已经修复了，而且这些解决方案对标签都不起作用

如何在不删除状态栏的情况下解决此问题

iOS版本：11.4.1

爱奥尼亚版本：4.0.5

重新创建：

• 创建ionic tabs启动程序项目
• 将选项卡位置更改为顶部
• 删除home.html中的标题

  <ion-tabs tabsPlacement="top">
    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
    <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
  </ion-tabs>
  

---

似乎选项卡很难使用。我找到了一个使用分段的解决方法。我只需要花点时间把它们设计成合适的样式

以下是我的新app.html代码：

<ion-header>
  <h2></h2>
  <ion-segment [(ngModel)]="page" (ionChange)="segmentChanged($event)">
    <ion-segment-button value="home">
      <ion-icon name="home"></ion-icon>
    </ion-segment-button>
    <ion-segment-button value="about">
      <ion-icon name="information-circle"></ion-icon>
    </ion-segment-button>
    <ion-segment-button value="contacts">
      <ion-icon name="contacts"></ion-icon>
    </ion-segment-button>
  </ion-segment>
</ion-header>
<ion-content>
<ion-nav [root]="rootPage"></ion-nav>
</ion-content>

在标题中添加段对我来说很有用，但为了获得所需的填充，我必须添加一个空的h2标记。如果有更好的方法，请随时告诉我，现在我很高兴

对于那些想做类似事情的人，我找到了答案，由rapropos发布在这里：

---

一个更好的解决方案显而易见：

<ion-header>
  <h2></h2>
</ion-header>

<ion-content>
  <ion-tabs tabsPlacement="top">
    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
    <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
  </ion-tabs>
</ion-content>

---

我不知道为什么我花了这么长时间才弄明白……

只要再努力一点，你就可以继续使用

离子标签了。这就是我想到的：

添加到您的全球SCS（或任何需要的地方）
global.scss

.plt-ios {
  ion-tab-bar {
    padding-top: var(--ion-safe-area-top);
  }

  ion-header ion-toolbar.noSafeAreaPaddingTop{
    padding-top: 0 !important;
  }
}

使用
ion工具栏将“eapaddingtop”类添加到每个选项卡页面

YourPageTemplate.html

<ion-header>
  <ion-toolbar class='noSafeAreaPaddingTop'>
    <ion-title>Tab page title</ion-title>
  </ion-toolbar>
</ion-header>
...


选项卡页面标题
...

我对这种方法也不是很满意，但它可以与
离子标签一起使用。
阅读和使用后，我发现只需将
离子标签作为一个整体添加边距就足够了，如下所示：

离子标签{
边缘顶部：var（--离子安全区顶部）；
}

这为iOS上的状态栏增加了空间。在已经正常运行的Android上，没有任何变化，因此此修复程序可以跨平台工作。
选项卡是缺乏灵活性的噩梦。在有人向我推销之前，我会回到细分市场。更新到正确的答案，因为标签很烂，没有人应该使用它们。