Nativescript ActionBar / ActionItem 对齐

Question

我有一个问题，这里的人可能会帮助解决...我目前有一个看起来像这样的 ActionBar：

如果您触摸放大镜，将显示以下内容：

如果你触摸后退箭头，操作栏应该和最初一样，但放大镜会发生一些奇怪的事情......

我目前正在显示/隐藏具有 visibility 属性的 ActionItems，但我不知道为什么当我再次显示它们时会发生这种错位。

实际代码是这样的：

<ActionBar
    class="action-bar"
    title="{{ actionBarTitle }}"
    [ngClass]="{
        'action-bar-search-bar-visible' : showSearch
    }"
>
    <!-- Android menu button -->
    <NavigationButton
        (tap)="toggleDrawer()"
        [visibility]="showSearch ? 'collapse' : 'visible'"
        *ngIf="isAndroid"
        class="action-bar-item"
        icon="res://menu_icon_white"
    ></NavigationButton>
    <!-- iOS menu button -->
    <ActionItem
        (tap)="toggleDrawer()"
        [visibility]="showSearch ? 'collapse' : 'visible'"
        *ngIf="isiOS &&"
        class="action-bar-item action-bar-item-menu-icon"
        ios.position="left"
    ><Image src="res://menu_icon_white"></Image></ActionItem>
    <!-- Search bar toggle -->
    <ActionItem
        (tap)="toggleSearch()"
        [visibility]="showSearch ? 'collapse' : 'visible'"
        android.position="popup"
        class="action-bar-item action-bar-item-menu-icon"
        ios.position="right"
    ><Image src="res://ic_search"></Image></ActionItem>
    <!-- Search bar -->
    <search-bar-custom
        *ngIf="showSearch"
        (on-search-hide)="toggleSearch()"
    ></search-bar-custom>
</ActionBar>

Answer 1

您正在使用 show/hide 操作项的可见性，使用相同的技术来显示或隐藏搜索栏，而不是 *ngIf。

同时尝试为搜索栏图标设置 android.position="right"。

Nativescript ActionBar / ActionItem 对齐

Nativescript ActionBar / ActionItem alignment

layout

android-actionbar

nativescript