草庐IT

flutter - 行中忽略的小部件对齐

coder 2023-07-23 原文

我正在创建一个显示一些气泡的新小部件，这些气泡应该用线连接。

5-------6
|
4-------3
        |
1-------2

我选择了一个 ListView 作为外部小部件，如果我理解正确的话，这应该会给我滚动性:

return Expanded(
  child: ListView(
    children: _createLWItems(_createBubbles()),        
  ),
);

Children 是我内部小部件的列表。每个小部件都是一行，因此我可以将两个气泡并排放置:

    return Container(
      child: Row(
        children: <Widget>[
          Container(
            child: bubbleItem1,
            alignment: Alignment.centerLeft,
          ),
          Container(
            child: bubbleItem2,
            alignment: Alignment.centerRight,
          ) 
        ],
      ),
      decoration: BoxDecoration( //TODO remove after testing
        shape: BoxShape.rectangle,
        border: Border.all(color: Colors.blue),          
      ),
    );

BubbleItem 只是一个带有 BoxDecoration 并包裹着 GestureDetector 的容器。

我想要实现的是，左边的气泡向左对齐，右边向右对齐，但是，尽管行占据了我屏幕的整个宽度，但两者并排放置在左侧，如您所见(蓝色边框):

当我读到here行小部件有一个 MainAxisAlignment，但这只会将所有子元素左对齐、右对齐、居中对齐等，这不是我想要的。

我怎样才能按照我想要的方式放置这些气泡？ 如果它们放置正确，我想用线连接它们。有没有办法不用计算就可以做到这一点？我的想法是在带线的气泡之间插入另一个小部件，但我需要以某种方式告诉它，它应该占据他所在行的气泡之间的整个空间。

目前我有点不确定我是否应该计算任何东西，因为我读到一些关于“你无法在渲染之前计算”的内容，但另一方面我缺少一些理解如何在没有 flutter 的情况下进行计算

最佳答案

对齐确实适用于 Row children，但不是您期望的方式。例如，如果您有一个 Row 子级，其高度为 Row 的一半，您可以使用 Alignment 来指定您希望该子级位于 Row 的顶部还是底部 - 默认为居中。

默认情况下，子项按顺序位于一行(水平)和一列(垂直)内，这就是您在所附屏幕截图中看到的内容。如果您只想将 2 个圆定位在行的左右两端，您可以使用 spaceBetween 的 MainAxisAlignment 值，它将自由空间均匀地放置在 children 。

但是，如果您还想在圆圈之间画一条线，那么您将没有任何剩余空间可以在 Row 中分配，因此 MainAxisAlignment 将无济于事。相反，您想要的是圆圈之间行内的 Expanded 小部件。这将创建一个小部件，该小部件占用 Row 中的所有剩余空间，这是您希望行所在的位置。

  Row(
    children: <Widget>[
      Container(
        child: bubbleItem1,
        alignment: Alignment.centerLeft,
      ),
      Expanded(
        child: Divider(),
      ),
      Container(
        child: bubbleItem2,
        alignment: Alignment.centerRight,
      ) 
    ],
  )

关于flutter - 行中忽略的小部件对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56803927/

部件fluttercodesectionwidgetflutter-layout

有关flutter - 行中忽略的小部件对齐的更多相关文章

  1. ruby-on-rails - 在 Rails 和 ActiveRecord 中查询时忽略某些字段 - 2

    我知道我可以指定某些字段来使用pluck查询数据库。ids=Item.where('due_at但是我想知道，是否有一种方法可以指定我想避免从数据库查询的某些字段。某种反拔？posts=Post.where(published:true).do_not_lookup(:enormous_field) 最佳答案 Model#attribute_names应该返回列/属性数组。您可以排除其中一些并传递给pluck或select方法。像这样:posts=Post.where(published:true).select(Post.attr

  2. c - mkmf 在编译 C 扩展时忽略子文件夹中的文件 - 2

    我想这样组织C源代码:+/||___+ext||||___+native_extension||||___+lib||||||___(Sourcefilesarekeptinhere-maycontainsub-folders)||||___native_extension.c||___native_extension.h||___extconf.rb||___+lib||||___(Rubysourcecode)||___Rakefile我无法使此设置与mkmf一起正常工作。native_extension/lib中的文件(包含在native_extension.c中)将被完全忽略。

  3. Ruby - 如何在读取文件时跳过/忽略特定行？ - 2

    在读取/解析文件(使用Ruby)时忽略某些行的最佳方法是什么？我正在尝试仅解析Cucumber.feature文件中的场景，并希望跳过不以Scenario/Given/When/Then/And/But开头的行。下面的代码有效，但它很荒谬，所以我正在寻找一个聪明的解决方案:)File.open(file).each_linedo|line|line.chomp!nextifline.empty?nextifline.include?"#"nextifline.include?"Feature"nextifline.include?"Inorder"nextifline.include?

  4. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  5. sql - 查询忽略时间戳日期的时间范围 - 2

    我正在尝试查询我的Rails数据库(Postgres)中的购买表，我想查询时间范围。例如，我想知道在所有日期的下午2点到3点之间进行了多少次购买。此表中有一个created_at列，但我不知道如何在不搜索特定日期的情况下完成此操作。我试过:Purchases.where("created_atBETWEEN?and?",Time.now-1.hour,Time.now)但这最终只会搜索今天与那些时间的日期。 最佳答案 您需要使用PostgreSQL'sdate_part/extractfunction从created_at中提取小时

  6. Ruby 正则表达式匹配逗号，但忽略括号中的逗号 - 2

    我正在尝试通过正则表达式拆分参数列表。这是一个带有我的参数列表的字符串:"a=b,c=3,d=[1,3,5,7],e,f=g"我想要的是:["a=b","c=3","d=[1,3,5,7]","e","f=g"]我试过先行，但Ruby不允许使用动态范围后行，所以这行不通:/(?如何让正则表达式忽略方括号中的所有内容？ 最佳答案 也许这样的东西对你有用:str.scan(/(?:\[.*?\]|[^,])+/)编辑再三考虑。简单的非贪婪匹配器在某些嵌套括号的情况下会失败。 关于Ruby正则

  7. ruby - 忽略 Jekyll 中的特定标签 - 2

    我正在使用Jekyll构建一个站点，我的代码中有一些看起来像{{}}(液体标签)的东西。我希望它在Jekyll完成生成网站后最终出现在输出html中，但Jekyll将其解释为其他任何标记。有没有办法让Jekyll只忽略这个标签的这个特定实例？ 最佳答案 使用{%raw%}标签:{%raw%}{{...}}{%endraw%}此代码段将生成{{...}}。 关于ruby-忽略Jekyll中的特定标签，我们在StackOverflow上找到一个类似的问题： htt

  8. ruby - 将 Ruby 中的字符串切成固定长度的字符串，忽略(不考虑/不管)新行或空格字符 - 2

    我有一个包含许多换行符和空格的字符串。我需要将它拆分成固定长度的子字符串。例如a="Thisissome\nText\nThisissometext"现在我想把它分成长度为17的字符串。所以现在它应该导致["Thisissome\nText","\nThisissometex","t"]评论:我的字符串可能包含任何字符(空格/单词等) 最佳答案 "Thisissome\nText\nThisissometext".scan(/.{1,17}/m)#=>["Thisissome\nText","\nThisissometex","t"

  9. ruby-on-rails - 第 1 行中的引号缺失或遗漏 (CSV::MalformedCSVError) - 2

    我在ruby​​/rails中导入此CSV文件时遇到问题我得到的错误信息是这样的:Missingorstrayquoteinline1(CSV::MalformedCSVError)但我不确定发生了什么，因为我的CSV看起来非常好。以下是示例数据:"lesley_grades","lesley_id","last","first","active","site","cohort","section","sections_title","faculty","completed_term_cred","term","sec_start_date","sec_end_date","grade

  10. ruby-on-rails - Rails 3 : Looping through array of objects, 忽略数组中的第一个对象？ - 2

    在我看来，我正在尝试显示一个对象表，这是我的代码:CategoriesCBB's">然而这是抛出一个错误说:can'tconvertCapabilityBuildingBlockintoArray关系是正确的，错误来self尝试在此处减去数组的第一个对象的行:有什么方法可以忽略数组中的第一个对象来遍历数组吗？谢谢 最佳答案 尝试使用Array.drop-http://www.ruby-doc.org/core/classes/Array.html#M000294 关于ruby-on-ra

随机推荐