Как ограничить ширину пузыря чата (Label) в Nativescript?

Question

Я настраиваю приложение чата, и пузырь чата не должен превышать определенную ширину (примерно 80% экрана).

Я читал из другого поста, все они упоминали, чтобы обернуть Label с помощью Layout, он работает очаровательно в 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>