如何在 Nativescript 中限制聊天气泡（标签）的宽度？

Question

我正在设置一个聊天应用，聊天气泡不应超过一定的宽度（例如屏幕的 80% 左右）。

我从另一篇文章中读到，他们都提到用布局包装标签，它在 Android 中很有效，但在 iOS 中没有。

...
<ScrollView row="1" background="#fafafa" ref='scrollView'>
    <FlexboxLayout flexDirection="column" justifyContent="flex-end">
         <GridLayout v-for="chat in processedChats" :key="chat.timestamp" rows='*' backgroundColor="#fafafa" >
             <FlexboxLayout row='0' v-if="chat.speaker == me" flexDirection="row" justifyContent="flex-end">
                 <Label :text="chat.content" :textWrap="true" padding="10" margin="5 5 5 10" fontSize="16" background="#222222" color="#ffffff" borderRadius="15" />
                 <Label text="" width="40%" />
             </FlexboxLayout>


             <FlexboxLayout row='0' v-else flexDirection="row" justifyContent="flex-start">
                 <Label :text="chat.content" :textWrap="true" padding="10" margin="5 5 5 10" fontSize="16" background="#f1f0f0" color="#484848" borderRadius="15" />
                 <Label text="" width="40%" />
             </FlexboxLayout>
         </GridLayout>
    </FlexboxLayout>
</ScrollView>
...

这是奇怪的布局结果。

Answer 1

嗯，我以前遇到过这个问题。试试这个

<ScrollView row="1" background="#fafafa" ref='scrollView'>
    <FlexboxLayout flexDirection="column" justifyContent="flex-end">
         <GridLayout v-for="chat in processedChats" :key="chat.timestamp" rows='*' backgroundColor="#fafafa" >

             <FlexboxLayout row='0' v-if="chat.speaker == me" flexDirection="row" justifyContent="flex-end" @loaded="resize">
                 <Label :text="chat.content" :textWrap="true" padding="10" margin="5 5 5 10" fontSize="16" background="#222222" color="#ffffff" borderRadius="15" />
                 <Label text="" width="40%" />
             </FlexboxLayout>


             <FlexboxLayout row='0' v-else flexDirection="row" justifyContent="flex-start" @loaded="resize">
                 <Label :text="chat.content" :textWrap="true" padding="10" margin="5 5 5 10" fontSize="16" background="#f1f0f0" color="#484848" borderRadius="15" />
                 <Label text="" width="40%" />
             </FlexboxLayout>

         </GridLayout>
    </FlexboxLayout>
</ScrollView>
...

methods: {

    resize(args) {
        setTimeout(() => {
            if(args.object.getActualSize().width > screen.mainScreen.widthDIPs*0.6) {
               args.object.width = '100%'
            }
        }, 50)
    }
}
...

上面的代码会自动调整聊天气泡的大小，超过屏幕宽度的 60%，你可以校准到你想要的比例。

希望对您有所帮助！

Answer 2

您可以使用 Label 包裹在具有固定宽度的 StackLayout 中，并将其设置为在达到 StackLayout 的宽度时包裹。

<ScrollView row="1" background="#fafafa" ref='scrollView'>
  <StackLayout orientation="vertical">
    <StackLayout v-for="chat in processedChats" :horizontalAlignment="chat.speaker == me ? 'left' : 'right'" width="80%" orientation="horizontal">
      <Label :text="chat.content" textWrap="true" :backgroundColor="chat.speaker == me ? '#222222' : '#f1f0f0'" margin="5 10" padding="5 10" borderRadius="15"></Label>
    </StackLayout>
  </StackLayout>
</GridLayout>