文本（标签）没有占用离子列表中的所有可用空间

Question

我是Ionic和移动开发的新手。我正在使用离子列表，如何使文本在整个屏幕上可用（请参阅图片中的上次收到信息），可以在<ion-label>和<h4>周围使用<p>吗？

<ion-list>
<ion-item *ngFor ="let connection of connections">
  <ion-avatar slot="start">
    <img [src]="connection?.picture">
  </ion-avatar>
<ion-label text-wrap>
  <h4>{{ connection?.name}}</h4>
  <p text-wrap> Last received:  {{ connection?.locationDesc }}</p>
</ion-label>

<ion-label slot="end" text-right>
  <p item-end> 2 Messages </p>
  <ion-button clear slot="end">View</ion-button>
</ion-label>          
</ion-item>

Answer 1

似乎只花了一点时间，但实际上是与您用作列的两个标签共享50 50。由于使用了自动换行功能，因此似乎占用了不到一半的时间。

这是因为使用这些规则将标签样式设置为弹性项目。

我设法做到这一点：

使用此代码：

  <ion-list>
    <ion-item>
      <ion-avatar slot="start">
        <img src="/assets/matthew.jpg">
      </ion-avatar>
      <ion-label  class="ion-text-wrap">
        <h4>Some name</h4>
        <p> Last received: All plugins have two components - the native code (Cordova) and the
          JavaScript code. Cordova plugins are also wrapped in a Promise or Observable in order to provide a common
          plugin interface. Below are various framework options using the Camera plugin as an example. </p>
      </ion-label>
      <ion-note class="ion-text-end">
        <p> 2 Messages </p>
        <ion-button clear>View</ion-button>
      </ion-note>
    </ion-item>
  </ion-list>

基本上我将最后一个ion-label交换为一个ion-note。

我还搞砸了其他事情，例如删除不需要的插槽并将属性转换为appropriate utility classes，这现在被认为是最佳实践（因为它们引入了不支持这些属性的react和vue）。