Nativescript：使标签跨度宽度的内容，然后包装在最大宽度

我想创建一个类似于iMessage的布局的消息传递视图，其中聊天“泡沫”是其内容的大小，直到它获取是一定的宽度。像这样： screenshot Nativescript：使标签跨度宽度的内容，然后包装在最大宽度

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

产生这样的： screenshot

通知的较长的不换，尽管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的列，在这种情况下其设置为*（使用可用区域的其余部分）。也就是说然而，产生这样的：

screenshot

注意，短消息跨越整个宽度。我想在标签上我需要类似width =“auto”的东西。我无法弄清楚这样一种布局，它可以适应两种实现方式中最好的一种，小文本的小气泡和长文本的气泡。

来源

2016-08-30 davecoffin

嘿，你有没有尝试在你的gridLayout中创建另一列？ Something like columns =“40，*，*” – Kansen

@Kansen我确实尝试过！对第二列（带有消息标签的列）使用*会使Label跨越列的整个宽度。然后在那里添加另一个只是分隔这两列之间的剩余空间，产生这个：https://d3vv6lp55qjaqc.cloudfront.net/items/2E1S2k0C3S2t1s233T3j/Screenshot%202016-08-31%2008.42.59.png?X-CloudApp- Visitor-Id = 196928 – davecoffin

你能尝试用下面的代码

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

我希望这有助于你，干杯

来源

2016-08-31 15:12:35 Kansen

这不工作。 TextView跨越整个列的长度，当列是*时，它是视图的其余部分。另外，Label不仅仅用于一行显示，textWrap =“true”属性可以让一个标签跨越多行。使用TextView代替标签结果如下：https://d3vv6lp55qjaqc.cloudfront.net/items/3F0w140i2f0J2Y0R1K3G/Screenshot%202016-08-31%2011.46.45.png?X-CloudApp-Visitor-Id=196928 – davecoffin

然后我'我会尝试我的最后一个项目符号：如果您的柱设置如下：columns =“40，auto，*” 第一列设置为40为您的图片第二列与自动像这个列将获得您的子组件的宽度（标签/文本视图）第三列作为明星填充剩余空间 – Kansen

我试过了，但它不起作用。自动列不限制在视图中，它的大小与内容大小无关，不让标签换行。 – davecoffin

尝试在网格包裹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所呈现的空间。

这里有一个基本的例证：

来源

2016-09-01 14:13:02

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

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

来源

2016-09-01 16:18:59 Tsvetan

谢谢！这终于奏效了。顺便说一句，这是嵌入在列表视图。我将在更新中详细说明它是如何完成的，我赞成你的回应。 – davecoffin

Nativescript：使标签跨度宽度的内容，然后包装在最大宽度

回答

相关问题