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

Question

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

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

如果我把所有三个都放在 <ion-buttons end> 我得到这个：

如果我尝试将前两个放在 <ion-buttons start> 中，将一个放在 <ion-buttons end> 中，我会得到：

如果我在 <ion-buttons start> 中放一个，在 <ion-buttons end>

中放一个，也会发生类似的事情

这是我的 header 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 navbar/toolbar 上面有一系列定位元素，从 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[ 遵循按钮顺序=24=] 像这样：

<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

Answer 2

这是一个非常简单的修复方法！，based on this。

使用 left 而不是 start 和使用 right 而不是 end

然后，您将在 ios 和 android 上看到一致的对齐方式。

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

Ionic 2 Android Toolbar Buttons are Stacking

html

android

toolbar

navbar

ionic2