ios - Nativescript:使标签跨越其内容的宽度，然后以最大宽度换行

Question

我正在尝试创建一个布局类似于 iMessage 的消息传递 View ，其中聊天“气泡”是其内容的大小，直到达到一定宽度。像这样:

使用 nativescript，我找不到适合这种情况的布局。我尝试使用 GridLayout，但列的自动性质似乎意味着它将成为内容的大小，即使内容的大小超出 View 也是如此。

<GridLayout width="100%" columns="40, auto" rows="auto, 20" class="msg them" visibility="{{is_me ? 'collapsed' : 'visible'}}">
    <Image class="authorimg" col="0" stretch="aspectFill" verticalAlignment="top" src="{{user.profile_photo ? user.profile_photo.sizes.tiny_square : ''}}" />
    <StackLayout class="msg_text" col="1">
        <Label text="{{message}}" textWrap="true" verticalAlignment="top" />
    </StackLayout>
    <Label class="msg_timestamp" text="{{author}}" verticalAlignment="top" row="1" colSpan="2" />
</GridLayout>

产生这个:

请注意较长的标签不会换行，尽管标签上的 textWrap=true。

硬币的另一面是这样的:

<GridLayout width="100%" columns="40, *" rows="auto, 20" class="msg them" visibility="{{is_me ? 'collapsed' : 'visible'}}">
    <Image class="authorimg" col="0" stretch="aspectFill" verticalAlignment="top" src="{{user.profile_photo ? user.profile_photo.sizes.tiny_square : ''}}" />
    <StackLayout class="msg_text" col="1">
        <Label text="{{message}}" textWrap="true" verticalAlignment="top" />
    </StackLayout>
    <Label class="msg_timestamp" text="{{author}}" verticalAlignment="top" row="1" colSpan="2" />
</GridLayout>

唯一的区别是网格布局中的列，在本例中它设置为 *(使用剩余的可用区域)。然而，这会产生这个:

请注意，较短的消息跨越了整个宽度。我猜我需要在 Label 上使用类似于 width="auto"的东西。我想不出一种布局可以兼顾这两种实现的最佳效果，小气泡用于小文本，环绕气泡用于长文本。

Answer 1

使用 StackLayout 将完成这项工作:

<StackLayout>
  <StackLayout orientation="horizontal" style="padding: 5">
    <Image src="~/res/logo.png" width="50" height="50" verticalAlignment="top"/>
    <Label text="I am a message" textWrap="true" backgroundColor="red" />
  </StackLayout>
  <StackLayout orientation="horizontal" style="padding: 5">
    <Image src="~/res/logo.png" width="50" height="50" verticalAlignment="top"/>
    <Label text="This is a longer message, which is worth adding because then I can make sure that longer messages display properly in the messages view! They need to wrap, obviously!" backgroundColor="red" textWrap="true" />
  </StackLayout>
</StackLayout>

您应该记住布局不是虚拟化的。当有大量对话时，这会使您的应用变慢。您可以改用 ListView 。