小编dav*_*fin的帖子

我正在尝试使用类似于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" /> …