草庐IT

ios - Nativescript:使标签跨越其内容的宽度，然后以最大宽度换行

coder 2023-09-22 原文

我正在尝试创建一个布局类似于 iMessage 的消息传递 View ，其中聊天“气泡”是其内容的大小，直到达到一定宽度。像这样:

使用 nativescript，我找不到适合这种情况的布局。我尝试使用 GridLayout，但列的自动性质似乎意味着它将成为内容的大小，即使内容的大小超出 View 也是如此。

<GridLayout width="100%" columns="40, auto" rows="auto, 20" class="msg them" visibility="{{is_me ? 'collapsed' : 'visible'}}">
    <Image class="authorimg" col="0" stretch="aspectFill" verticalAlignment="top" src="{{user.profile_photo ? user.profile_photo.sizes.tiny_square : ''}}" />
    <StackLayout class="msg_text" col="1">
        <Label text="{{message}}" textWrap="true" verticalAlignment="top" />
    </StackLayout>
    <Label class="msg_timestamp" text="{{author}}" verticalAlignment="top" row="1" colSpan="2" />
</GridLayout>

产生这个:

请注意较长的标签不会换行，尽管标签上的 textWrap=true。

硬币的另一面是这样的:

<GridLayout width="100%" columns="40, *" rows="auto, 20" class="msg them" visibility="{{is_me ? 'collapsed' : 'visible'}}">
    <Image class="authorimg" col="0" stretch="aspectFill" verticalAlignment="top" src="{{user.profile_photo ? user.profile_photo.sizes.tiny_square : ''}}" />
    <StackLayout class="msg_text" col="1">
        <Label text="{{message}}" textWrap="true" verticalAlignment="top" />
    </StackLayout>
    <Label class="msg_timestamp" text="{{author}}" verticalAlignment="top" row="1" colSpan="2" />
</GridLayout>

唯一的区别是网格布局中的列，在本例中它设置为 *(使用剩余的可用区域)。然而，这会产生这个:

请注意，较短的消息跨越了整个宽度。我猜我需要在 Label 上使用类似于 width="auto"的东西。我想不出一种布局可以兼顾这两种实现的最佳效果，小气泡用于小文本，环绕气泡用于长文本。

最佳答案

使用 StackLayout 将完成这项工作:

<StackLayout>
  <StackLayout orientation="horizontal" style="padding: 5">
    <Image src="~/res/logo.png" width="50" height="50" verticalAlignment="top"/>
    <Label text="I am a message" textWrap="true" backgroundColor="red" />
  </StackLayout>
  <StackLayout orientation="horizontal" style="padding: 5">
    <Image src="~/res/logo.png" width="50" height="50" verticalAlignment="top"/>
    <Label text="This is a longer message, which is worth adding because then I can make sure that longer messages display properly in the messages view! They need to wrap, obviously!" backgroundColor="red" textWrap="true" />
  </StackLayout>
</StackLayout>

您应该记住布局不是虚拟化的。当有大量对话时，这会使您的应用变慢。您可以改用 ListView 。

关于ios - Nativescript:使标签跨越其内容的宽度，然后以最大宽度换行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39236005/

其内Nativescript34StackLayoutverticalAlignmentioslabel

有关ios - Nativescript:使标签跨越其内容的宽度，然后以最大宽度换行的更多相关文章

  1. ruby - 在院子里用@param 标签警告 - 2

    我试图使用yard记录一些Ruby代码，尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么？

  2. ruby - 如何验证 IO.copy_stream 是否成功 - 2

    这里有一个很好的答案解释了如何在Ruby中下载文件而不将其加载到内存中:https://stackoverflow.com/a/29743394/4852737require'open-uri'download=open('http://example.com/image.png')IO.copy_stream(download,'~/image.png')我如何验证下载文件的IO.copy_stream调用是否真的成功——这意味着下载的文件与我打算下载的文件完全相同，而不是下载一半的损坏文件？documentation说IO.copy_stream返回它复制的字节数，但是当我还没有下

  3. Ruby 文件 IO 定界符？ - 2

    我正在尝试解析一个文本文件，该文件每行包含可变数量的单词和数字，如下所示:foo4.500bar3.001.33foobar如何读取由空格而不是换行符分隔的文件？有什么方法可以设置File("file.txt").foreach方法以使用空格而不是换行符作为分隔符？ 最佳答案 接受的答案将slurp文件，这可能是大文本文件的问题。更好的解决方案是IO.foreach.它是惯用的，将按字符流式传输文件:File.foreach(filename,""){|string|putsstring}包含“thisisanexample”结果的

  4. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  5. Get https://registry-1.docker.io/v2/: net/http: request canceled while waiting - 2

    1.错误信息：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:requestcanceledwhilewaitingforconnection(Client.Timeoutexceededwhileawaitingheaders)或者：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:TLShandshaketimeout2.报错原因：docker使用的镜像网址默认为国外，下载容易超时，需要修改成国内镜像地址（首先阿里

  6. ruby-on-rails - 需要帮助最大化多个相似对象中的 3 个因素并适当排序 - 2

    我需要用任何语言编写一个算法，根据3个因素对数组进行排序。我以度假村为例(如Hipmunk)。假设我想去度假。我想要最便宜的地方、最好的评论和最多的景点。但是，显然我找不到在所有3个中都排名第一的方法。Example(assumingthereare20importantattractions):ResortA:$150/night...98/100infavorablereviews...18of20attractionsResortB:$99/night...85/100infavorablereviews...12of20attractionsResortC:$120/night

  7. ruby - 为什么不能使用类IO的实例方法noecho？ - 2

    print"Enteryourpassword:"pass=STDIN.noecho(&:gets)puts"Yourpasswordis#{pass}!"输出:Enteryourpassword:input.rb:2:in`':undefinedmethod`noecho'for#>(NoMethodError) 最佳答案 一开始require'io/console'后来的Ruby1.9.3 关于ruby-为什么不能使用类IO的实例方法noecho？，我们在StackOverflow上

  8. ruby - 代码块中的 Markdown 换行符 - 2

    使用Redcarpet，当我在Markdown中包含类似以下内容时，它不考虑任何换行符或缩进。我在行尾尝试了两个空格。代码之间的额外行。似乎没有任何效果。```xml3```我明白了:3这里是Redcarpet设置:Redcarpet::Markdown.new(Redcarpet::Render::HTML,:autolink=>true,:space_after_headers=>true,:fenced_code_blocks=>true,:no_intra_emphasis=>true,:lax_html_blocks=>true)我需要做什么才能正确换行并保留缩进，就像这里或

  9. ruby - 如何用 Nokogiri 解析连续的标签？ - 2

    我有这样的HTML代码:Label1Value1Label2Value2...我的代码不起作用。doc.css("first").eachdo|item|label=item.css("dt")value=item.css("dd")end显示所有首先标记，然后标记标签，我需要“标签:值” 最佳答案 首先，您的HTML应该有和中的元素:Label1Value1Label2Value2...但这不会改变您解析它的方式。你想找到s并遍历它们，然后在每个你可以使用next_element得到;像这样:doc=Nokogiri::HTML(

  10. ruby-on-rails - 在 Label 标签中嵌套 Ruby on Rails HAML 复选框 - 2

    我有以下不起作用的代码:=form_for(resource,:as=>resource_name,:url=>session_path(resource_name),:html=>{:class=>"well"})do|f|=f.label:email=f.email_field:email=f.label:password=f.password_field:password-ifdevise_mapping.rememberable?%p=f.label:remember_me,:class=>"checkbox"=f.check_box:remember_me,:class=>"

随机推荐