Ionic 3：内联显示离子搜索栏和离子段按钮答案

【问题标题】：Ionic 3: Displaying an ion-searchbar and ion-segment-buttons inlineIonic 3：内联显示离子搜索栏和离子段按钮
【发布时间】：2018-05-19 16:20:19
【问题描述】：

如何在同一个离子工具栏中显示ion-searchbar 和ion-segment 内联？我正在使用 Ionic 3。

（如果您好奇，这只是横向模式的事情，因为在横向模式下，垂直空间非常宝贵）。

我（大部分情况下）能够让它与ion-col 一起工作，如下所示。通过 Ionic Serve 在 Chrome 中一切看起来都很好。但是在真实设备上运行时，ion-segment 会被向下推，看起来不正确。

示例代码如下：

<ion-toolbar color="primary">

  <ion-row>
    <ion-col no-padding>
      <ion-segment [(ngModel)]="joined" (ionChange)="switchView($event)" color="light">
        <ion-segment-button [value]="true">
          {{'PROJECT_JOINED_BUTTON' | translate}}
        </ion-segment-button>
        <ion-segment-button [value]="false">
          {{'PROJECT_LIST_BUTTON' | translate}}
        </ion-segment-button>
      </ion-segment>
    </ion-col>
    <ion-col no-padding>
      <ion-searchbar [(ngModel)]="query" (ionInput)="load()" color="light" debounce="500" showCancelButton="true" placeholder="Search projects"></ion-searchbar>
    </ion-col>
  </ion-row>


</ion-toolbar>

欺骗 iPhone 模式时通过 Ionic Serve 在 Chrome 中的外观

它在真实 iOS 设备上的外观：

什么有效：

我我能够使用ion-buttons end 让按钮对齐到末尾。但是，当我将ion-segment 包装在ion-buttons 中时，该段根本不会出现。当我尝试将end 属性应用于ion-segment 时，该段会覆盖搜索栏。

<ion-toolbar color="primary">

  <ion-searchbar [(ngModel)]="query" (ionInput)="load()" color="light" debounce="500" showCancelButton="true" placeholder="Search projects"></ion-searchbar>

  <ion-buttons end>
    <button ion-button clear>
      Test Button
    </button>
  </ion-buttons>

</ion-toolbar>

有没有办法可靠地在离子工具栏中显示与其他内容内联的离子段？谢谢！

【问题讨论】：

嗯，您是否尝试过像 col-4 和 col-8 那样明确指定 col 宽度？有时这会产生问题...无论如何尝试在设备上@987654324@ 看看发生了什么。

标签： ionic-framework ionic3

【解决方案1】：

尝试使用 align-items-center 和 col-6，例如：

<ion-toolbar color="primary">
    <ion-grid>
      <ion-row align-items-center>
        <ion-col no-padding col-6>
          <ion-segment [(ngModel)]="joined" (ionChange)="switchView($event)" color="light">
            <ion-segment-button [value]="true">
              {{'PROJECT_JOINED_BUTTON' | translate}}
            </ion-segment-button>
            <ion-segment-button [value]="false">
              {{'PROJECT_LIST_BUTTON' | translate}}
            </ion-segment-button>
          </ion-segment>
        </ion-col>
        <ion-col no-padding col-6>
          <ion-searchbar [(ngModel)]="query" (ionInput)="load()" color="light" debounce="500" showCancelButton="true" placeholder="Search projects"></ion-searchbar>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-toolbar>

文档： https://ionicframework.com/docs/api/components/grid/Grid/

【讨论】：