android - ionic 2 Android 标题和按钮在导航栏中未对齐

Question

我正在使用 ionic v2。我在 android 的导航栏中遇到问题。请看这张图片: https://drive.google.com/file/d/0B7NIjYwi6WIpM0I3eXJLdWlnV0k/view?usp=sharing

左右两边的标题和按钮没有垂直对齐。左边的在上面，标题在下面，左边的按钮在中间。

在 iOS 和网络浏览器中，一切都完美对齐。这是图片:

https://drive.google.com/file/d/0B7NIjYwi6WIpcERhd1dPa3FVaDA/view?usp=sharing

这是我在 ionic v2 中的 html:

<ion-header>
    <ion-navbar color="nav_bar" class="nav_bar_style">

    <ion-buttons start>
        <button ion-button clear color="nav_bar_bttn (click)="searchBttnPressed()">
        <ion-icon ios="ios-search" md="md-search"></ion-icon>
        </button>
    </ion-buttons>

    <ion-title text-center>Main</ion-title>

    <ion-buttons end>
        <button ion-button clear color="nav_bar_bttn" (click)="sortBttnPressed()">
            <ion-icon>Sort</ion-icon>
        </button>
        <button ion-button clear color="nav_bar_bttn" (click)="addBttnPressed()">
            <ion-icon name="md-add"></ion-icon>
        </button>
    </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content>
    <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
        {{item.noteId}}
            <div class="item-note" item-right>
                {{item.content}}
            </div>
    </button>
    </ion-list>
    <div *ngIf="selectedItem" padding>
        You navigated here from <b>{{selectedItem.title}}</b>
    </div>
</ion-content>

Answer 1

我找到了一个非常 hacky 的方法来解决这个问题，但是，嘿，它有效。

只需将其放入 .scss 文件中即可:

.toolbar-title-md {
    text-align: left;
    margin-right: 50px;
    margin-bottom: -30px;
}

Toolbar-title-md 是确切的文本项。当在其上放置边距时，它似乎会按照您通常期望的方式自行安排。当以另一种方式翻转时，它的位置与导航项被推送时的位置完全相同(而不是模态)。

我建议找到一种方法将文本剪掉适当的量，这样就可以避免标题的开头而不是结尾被剪掉。