android - Ionic 2 Android 工具栏按钮正在堆叠

Question

我正在尝试将最右侧的三个按钮添加到我的 Ionic 2 应用程序。

它在 Chrome 浏览器和 iOS 上运行得很好，但是，在 Android 上，无论我做什么，两个按钮都会堆叠。

如果我将所有三个放入 <ion-buttons end>我明白了 这:

如果我尝试将前两个放入 <ion-buttons start>和 <ion-buttons end> 中的一个我明白了:

如果我将一个放入 <ion-buttons start> 中，也会发生类似的情况和 <ion-buttons end> 中的一个

这是我的标题 HTML:

<ion-header>
    <ion-navbar color="primary">
        <button ion-button menuToggle>
          <ion-icon name="menu"></ion-icon>
        </button>
    <ion-title>Cobblestone</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="openSearch()">
          <ion-icon name="search"></ion-icon>
      </button>
      <button ion-button icon-only (click)="openLocations($event)">
          <ion-icon name="pin"></ion-icon>
      </button>
      <button ion-button icon-only (click)="openCart()">
          <ion-icon name="cart"></ion-icon>
      </button>
     </ion-buttons>
  </ion-navbar>
</ion-header>

我认为它可能与菜单按钮有关，但删除它并没有改变任何东西。 任何帮助，将不胜感激。谢谢!

Answer 1

ionic 2 导航栏/工具栏上有一系列定位 itens，从 0 到 7。转到 docs 的底部并检查 ios 和 android scss 变量。

所以他们是这样的:

$toolbar-order-md: (
  back-button: 0,
  menu-toggle-start: 1,
  buttons-left: 2,
  content: 3, 
  buttons-start: 4,
  buttons-end: 5,
  buttons-right: 6,
  menu-toggle-end: 7, )

因此，您需要做的是使用属性 start、end 和 right 遵循按钮顺序，如下所示:

<ion-buttons start>
     <button ion-button icon-only>
         <ion-icon name="search"></ion-icon>
     </button>
 </ion-buttons>
 <ion-buttons end>
     <button ion-button icon-only>
         <ion-icon name="pin"></ion-icon>
     </button>
 </ion-buttons>
 <ion-buttons right>
     <button ion-button icon-only>
         <ion-icon name="cart"></ion-icon>
     </button>
 </ion-buttons>

希望有帮助:D