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

Question

我正在尝试使用类似于iMessage的布局创建消息传递视图,其中聊天"气泡"是其内容的大小,直到它达到一定的宽度.像这样:

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

这产生了这个:

请注意,尽管Label上的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中的列,在这种情况下,它设置为*(使用剩余的可用区域).然而,这产生了这个:

请注意,较短的消息跨越整个宽度.我想在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>

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

Answer 2

尝试将 StackLayout 包装在网格中。StackLayout 测量它的一侧到无穷大（在垂直方向，宽度是无限的。在水平方向，高度是无限的）。

在您的配置中，右边界被测量为无穷大，因此 Label 没有地方可以包裹。

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

问题是Label标签用于一行显示，而Textview允许您多行显示。

我希望这对你有帮助，干杯