Nativescript ActionBar / ActionItem对齐

时间:2017-09-22 17:47:34

标签: layout android-actionbar nativescript

我有一个问题,有人可能会帮助解决...我现在有一个看起来像这样的ActionBar:

enter image description here

如果触摸放大镜,则会显示以下内容:

enter image description here

如果你触摸后箭头,动作栏应该像起初一样,但放大镜会发生奇怪的事情......

enter image description here

我目前正在使用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>

1 个答案:

答案 0 :(得分:1)

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

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