首页 文章

Nativescript ActionBar / ActionItem对齐

提问于
浏览
0

我有一个问题,有人可能会帮助解决...我目前有一个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 回答

  • 1

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

    还可以尝试为搜索栏图标设置android.position =“right” .

相关问题