论坛 › 知识问答 › ios - 如何在 Nativescript 中限制聊天气泡(标签)的宽度？

菜鸟教程小白 发表于 2022-12-13 05:30:41

ios - 如何在 Nativescript 中限制聊天气泡(标签)的宽度？

                                            <p><p>我正在设置一个聊天应用程序，聊天气泡不应超过一定的宽度(例如屏幕的 80% 左右)。 </p>

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

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


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

<p>这是奇怪的布局结果。</p>

<p> <img src="https://i.imgur.com/7WPwbNU.png" width="200"/> </p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>嗯，我以前遇到过这个问题。试试这个</p>

<pre><code>&lt;ScrollView row=&#34;1&#34; background=&#34;#fafafa&#34; ref=&#39;scrollView&#39;&gt;
    &lt;FlexboxLayout flexDirection=&#34;column&#34; justifyContent=&#34;flex-end&#34;&gt;
         &lt;GridLayout v-for=&#34;chat in processedChats&#34; :key=&#34;chat.timestamp&#34; rows=&#39;*&#39; backgroundColor=&#34;#fafafa&#34; &gt;

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


             &lt;FlexboxLayout row=&#39;0&#39; v-else flexDirection=&#34;row&#34; justifyContent=&#34;flex-start&#34; @loaded=&#34;resize&#34;&gt;
               &lt;Label :text=&#34;chat.content&#34; :textWrap=&#34;true&#34; padding=&#34;10&#34; margin=&#34;5 5 5 10&#34; fontSize=&#34;16&#34; background=&#34;#f1f0f0&#34; color=&#34;#484848&#34; borderRadius=&#34;15&#34; /&gt;
               &lt;Label text=&#34;&#34; width=&#34;40%&#34; /&gt;
             &lt;/FlexboxLayout&gt;

         &lt;/GridLayout&gt;
    &lt;/FlexboxLayout&gt;
&lt;/ScrollView&gt;
...

methods: {

    resize(args) {
      setTimeout(() =&gt; {
            if(args.object.getActualSize().width &gt; screen.mainScreen.widthDIPs*0.6) {
               args.object.width = &#39;100%&#39;
            }
      }, 50)
    }
}
...
</code></pre>

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

<p>希望对您有所帮助! </p></p>
                                   
                                                <p style="font-size: 20px;">关于ios - 如何在 Nativescript 中限制聊天气泡(标签)的宽度？，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/56950651/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/56950651/
                                                        </a>
                                                </p>
                                       

查看完整版本: ios - 如何在 Nativescript 中限制聊天气泡(标签)的宽度？