如果两个水平对齐的项目，名称和价格，请避免与NativeScript GridLayout重叠文本

Question

我按照here的说明将两个水平对齐的项目左右居中。现在的问题是我的商品名称文本太长，这意味着它与商品价格重叠。

此图很容易说明：

实际代码是：

<ListView for="product in products" @itemTap="onItemTap">
  <v-template>
    <GridLayout rows="auto" columns="*">
      <Label row="0" horizontalAlignment="left" :text="product.title" />
      <Label row="0" horizontalAlignment="right" :text="'$'+product.price" />
    </GridLayout>
  </v-template>
</ListView>

是GridLayout的解决方法，还是有更好的方法？

Answer 1

GridLayout将是进行此操作的方法。我使用Angular，所以我的绑定语法略有不同，但是您想要执行以下操作：

<GridLayout rows="auto" columns="*,auto">
        <Label col="0" row="0" textWrap="true" horizontalAlignment="left" [text]="item.title"></Label>
        <Label col="1" row="0" horizontalAlignment="right" [text]="'$'+item.price"></Label>
    </GridLayout>

使用columns="*,auto"将使第0列占用剩余的空间，而第1列仅占用所需的空间。因此，价格将使用少量空间，并将剩余空间留给标题。然后将textWrap="true添加到标题。

如果您的GridLayout有多行，则需要给标题Label赋予一个rowSpan="2"，以使它进入下一行而不被截断。

希望这会有所帮助！