OGeek|极客世界-中国程序员成长平台

标题: ios - 如何在 Nativescript 中限制聊天气泡(标签)的宽度？ [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-13 05:30
标题: ios - 如何在 Nativescript 中限制聊天气泡(标签)的宽度？

我正在设置一个聊天应用程序，聊天气泡不应超过一定的宽度(例如屏幕的 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>
...

这是奇怪的布局结果。

---

Best Answer-推荐答案

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

<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%，你可以校准到你想要的比例。

希望对您有所帮助!

关于ios - 如何在 Nativescript 中限制聊天气泡(标签)的宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56950651/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://sqlite.in/)

Powered by Discuz! X3.4