Nativescript：使标签跨度为其内容宽度，然后以最大宽度换行

Question

我正在尝试使用类似于iMessage的布局创建一个消息传递视图，其中一个聊天＆＃34; bubble＆＃34;是它的内容的大小，直到它达到一定的宽度。像这样：

使用nativescript，我无法找到适合这种情况的布局。我尝试使用GridLayout，但列的自动性质似乎意味着它将是内容的大小，即使内容的大小扩展到视图之外。

<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>

唯一的区别是gridlayout中的列，在这种情况下，它设置为*（使用剩余的可用区域）。然而，这产生了这个：

请注意，较短的消息跨越整个宽度。我需要类似于width =＆＃34; auto＆＃34;在标签上我猜。我无法找到一个布局，可以容纳两种实现中的最佳，小文本的小气泡，以及长文本的包装气泡。

Answer 1

使用StackLayout将完成这项工作：

I was born in New YORK in country USA

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

Answer 2

尝试在网格中包装StackLayout。 StackLayout将其中一个边测量到无穷大（在Veritcal方向，宽度是无限的。在水平方向，高度是无限的）。

在您的配置中，右边界被测量为无穷大，因此标签无法包裹。

<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 : ''}}" />
<GridLayout col="1">
<StackLayout class="msg_text" >
    <TextView editable="false"  text="{{message}}" textWrap="true" verticalAlignment="top" />
</StackLayout>
</GridLayout>

要解决关于保持较小消息保持对齐的第二个问题，请将StackLayout设置为在新的GridLayout中保持对齐。这应该产生的结果是只有长消息将填充第二列的GridLayout所呈现的空间。

这里有一个基本的例子：

Answer 3

您可以尝试使用以下代码

<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">
    <Textview editable="false"  text="{{message}}" textWrap="true" verticalAlignment="top" />
</StackLayout>
<Label class="msg_timestamp" text="{{author}}" verticalAlignment="top" row="1" colSpan="2" />

标签标记用于一行显示，而 Textview 允许您显示多行。

我希望这有助于你， 干杯