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> 

你應該記住，佈局沒有虛擬化。當有大量對話時，這會讓你的應用程序變慢。您可以改爲使用列表視圖。