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> 

产生这样的：

通知的较长的不换，尽管textWrap =真上的标签。

硬币的另一面是这样的：

<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 =“auto”的东西。我无法弄清楚这样一种布局，它可以适应两种实现方式中最好的一种，小文本的小气泡和长文本的气泡。

Answer 1

你能尝试用下面的代码

<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允许你几行显示。

我希望这有助于你， 干杯

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所呈现的空间。

这里有一个基本的例证：

Answer 3

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

你应该记住，布局没有虚拟化。当有大量对话时，这会让你的应用程序变慢。您可以改为使用列表视图。