Ionic4：在一行中包含多个控件（输入和复选框）的列表项

Question

我有以下代码可以在一行中显示多个控件（标签、2 个输入和复选框）

<ion-list>
    <ion-item>
        <ion-label slot="start">1</ion-label>
        <ion-input col-6></ion-input>
        <ion-input col-6></ion-input>
        <ion-checkbox slot="end"></ion-checkbox>
    </ion-item>
</ion-list>

在 Android 上它运行良好，但在 iOS 上我有意外行为：当我点击复选框时，系统试图打开键盘但没有显示，所以我得到了一个免费的space 页面底部：

如何解决此问题，或者您知道如何在一行中显示多个控件的另一种方式？

Answer 1

构建该布局的更好方法是使用 rows and columns。

请看this Stackblitz demo

这是视图的代码：

<ion-header>
  <ion-toolbar>
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  <ion-row *ngFor="let row of rows">
    <ion-col>
      <ion-label>{{ row }}</ion-label>
    </ion-col>
    <ion-col>
      <ion-input></ion-input>
    </ion-col>
    <ion-col>
      <ion-input></ion-input>
    </ion-col>
    <ion-col>
      <ion-checkbox></ion-checkbox>
    </ion-col>
  </ion-row>
</ion-content>

然后我设置了一些样式来设置第一列和最后一列的宽度：

ion-row {
  ion-col {
    display: flex;
    align-items: center;
    justify-content: center;

    &:first-child {
      flex-basis: 16px;
      flex-shrink: 0;
      flex-grow: 0;
    }

    &:last-child {
      flex-basis: 32px;
      flex-shrink: 0;
      flex-grow: 0;
    }
  }
}

在演示中，输入有一些背景信息，以便更容易了解它们的宽度。

Ionic4：在一行中包含多个控件（输入和复选框）的列表项

Ionic4: List item with multiple controls (inputs and checkbox) on one line

ionic-framework

ionic4