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

Question

I'm setting up a chat app, and the chat bubble should not exceed the certain width (like around 80% of the screen).

I read from the other post, they all mentioned to wrap the Label with Layout, it works charm in Android but not 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>
...

Here is the weird layout result.

Answer 1

Well, I had this problem before. Try this

<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)
    }
}
...

The code above will auto resize the chat bubble one it exceeds the 60% of the screen width, you may calibrate to the ratio you want.

Hope this help!

Answer 2

You could use a Label wrapped in a StackLayout with a fixed width and set it to wrap when it hits the StackLayout 's width.

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