草庐IT

flutter - 中心行 child 和右对齐

coder 2023-07-22 原文

我正在尝试实现以下布局。如果是列表，这是顶部单元格。

现在我设法用下面的代码得到了下面的结果

          Row(
        children: <Widget>[
          Expanded(
            child:
          Center(
            heightFactor: 3.5,
            child:
            Text("PLAY QUEUE",
            ),
          ),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(0,0,15.0,0),
            child:
            Align(
              child:
              Text("CLEAR"),
              alignment: Alignment.centerRight,
            ),
          ),

        ],
      ),

您可能已经注意到，“PLAY QUEUE”偏离中心，这是正常的，因为它以剩余空间为中心，而“CLEAR”占用了该空间。

所以居中只是从该布局中删除 CLEAR 标签的问题，但如果我这样做了，我该如何显示它？

查看 documentation ，我应该非常接近解决方案。但它们并未将标题行居中(第 1 步，查看标题部分的红色方 block )，因此显然不完全相同。

我不确定我现在应该瞄准什么样的布局。是否可以重叠小部件？所以我可以简单地居中并完全展开 PLAY QUEUE，并在右侧与清除按钮重叠。

注意:我不想在播放队列标签上写任意左填充。

编辑: 感谢我从答案中获得的帮助，我现在使用以下代码得到了正确的结果:

      Stack(
        fit: StackFit.passthrough,
        children: <Widget>[
          Center(
            heightFactor: 3.5,
            child:
            Text(title,
              style: Theme.of(context).textTheme.title.copyWith(color: textColor),
            ),
          ),
          Positioned.directional(
            textDirection: TextDirection.rtl,
            start: 30,
            top: 22,
            child:
              Text("CLEAR"),
            ),
        ],
      ),

困扰我的是我无法垂直对齐，我手动写了任意偏移量，我认为这不是正确的方法。

出于某种原因，我不能只放置 Center() 或类似的东西。这是应该如何完成还是可以改进？

编辑 2:

我现在在 Stack() 类上使用 alignment: FractionalOffset.center,，它垂直对齐，就像我想要的那样。

所以现在一切都很好，我很高兴!谢谢大家:)

最佳答案

这是一份 Stack 的工作!

您可以将 Text 小部件作为单独的子部件放入 Stack 中，并使用 Positioned小部件右对齐“清晰”的小部件。

这就是 Material AppBar 小部件 does for this exact scenario .

关于flutter - 中心行 child 和右对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53819058/

心行flutternoreferrersectioncenteringflutter-layout

有关flutter - 中心行 child 和右对齐的更多相关文章

  1. Flutter 环境变量配置和flutter doctor中的错误解决 - 2

    一、环境变量右键点击我的电脑-属性：然后找到环境变量 1.Android的SDK不在C盘的话需要额外配这个到用户环境变量：ANDROID_HOMED:\AndroidSDK2.然后在系统变量：Path中添加一条这样的值        D:\Flutter\flutter\bin             这个值写flutter包解压的实际地址即可 3.在系统变量中添加两个镜像变量：        变量名：FLUTTER_STORAGE_BASE_URL      变量值：https://storage.flutter-io.cn        变量名：PUB_HOSTED_URL      变量

  2. 微信小程序顶部标题栏与胶囊对齐 - 2

    介绍    最近在做微信小程序时，顶部标题栏总是与胶囊对不齐。往往是在这款手机上对齐了，在另外一款手机差很多。我在查阅资料后，提出了一种方法解决这个问题，即：在页面onLoad或组件created时，利用微信小程序提供的API，获取系统状态栏高度和胶囊信息，进而动态调整顶部标题栏样式。在苹果、小米、荣耀手机做验证，能做到精准对齐。理论        胶囊样式应该是垂直居中，有1px的border，border-radius为18px。        若要使顶部标题栏与胶囊对齐，则其高度必须是导航栏高度，标题栏内容也要垂直居中，顶部标题栏的外边距或内边距必须是状态栏高度。        如果顶部

  3. ruby - Prawn :有没有办法让一个盒子里的所有内容垂直对齐？ - 2

    我正在尝试将一些内容垂直居中放置在bounding_box中。对于单个文本，这没问题:bounding_box([0,bounds.top],:width=>pdf.bounds.right,:height=>pdf.bounds.top)dotext"verticallyalignedinthesurroundingbox",:valign=>:centerend但是如果我的边界框中有多个元素，我该怎么办:bounding_box([0,bounds.top],:width=>pdf.bounds.right,:height=>pdf.bounds.top)dotext"vertic

  4. ruby-on-rails - rails : how to extend a gem's ActiveRecord child class? - 2

    我在扩展一个在gem中定义并且是ActiveRecord::Base的子类的类时遇到问题。我唯一想扩展这个类的是:有很多:promos然而，扩展倾向于排除原始类。我得到的错误:PGError:ERROR:relation"sites"doesnotexistLINE4:WHEREa.attrelid='"sites"'::regclass^:SELECTa.attname,format_type(a.atttypid,a.atttypmod),d.adsrc,a.attnotnullFROMpg_attributeaLEFTJOINpg_attrdefdONa.attrelid=d.a

  5. ruby-on-rails - ruby rails : Creating child objects - 2

    我确定这是一个非常简单的问题，但我只是个新手，所以...我有一个模型Game，它has_many:piles。依次堆放has_many:cards。我可以在创建游戏时填充桩和纸牌，所以我目前的代码看起来像:classGameid,"contents"=>"c_type_#{num}")endendendclassPileid,"value"=>num)endendendclassCard现在一切都很好，但是当ActiveRecord知道game_id是外键并且应该引用时传递"game_id"=>id感觉不对家长游戏。但是，如果我将其关闭，外键最终将无法设置。有更好的方法吗？(作为奖励，

  6. ruby-on-rails - has_many 关系中 child 数量的 rails3 范围 - 2

    尝试在rails3中做一个范围。:bookhas_many:chapters我希望scope:long返回超过10章的书籍。如何最好地构建这个范围(不使用计数器缓存)？谢谢! 最佳答案 这应该让你继续:classBookscope:long,joins(:chapters).select('books.id,count(chapters.id)asn_chapters').group('books.id').having('n_chapters>10')end有帮助吗？ 关于ruby-o

  7. ruby - Nokogiri递归地得到所有 child - 2

    问题我正在针对各种URL运行一些统计数据。我想找到child数量最集中的顶级元素。我想遵循的方法是识别所有顶级元素，然后确定页面上所有元素的百分比属于它。目标递归地获取给定元素的所有子元素。输入:一个Nokogiri元素输出:Nokogiri元素数组或child总数设置ruby1.9.2Nokogirigem我最终得出的结果(这可行，但不如我在下面选择的答案那么漂亮)getChildCount(elem)children=elem.childrenreturn0unlesschildrenandchildren.count>0child_count=children.countchil

  8. ruby - 中断从 ruby 调用的 child - 2

    为什么使用system调用创建的子进程中断ruby​​进程不会中断ruby​​进程本身？他们应该属于同一个组，所以应该都被打断。这也不适用于ruby​​2.0。给定ruby​​1.8.7补丁371、ruby1.9.3补丁392和ruby​​2.0补丁0:运行ruby1.8-e'system"sleep100";$?;bash中的sleep'并按⌃C只会终止对sleep100的内部调用。Ruby1.9的行为相同。虽然运行ruby2.0-e'system"sleep100";$?;sleep'中断内部命令和ruby​​进程本身。2.0.0-p0--编辑--阅读资源我发现处理SIGINT、S

  9. ruby - 在 nokogiri rails 中找到一级 child - 2

    我遇到了如何从当前元素中找到一级子元素的问题？例如我有html:abcdefsecond我正在为rails使用Nokogiri:table=page.css('table')table.css('tr')它返回表中的所有tr。但我只需要2个表的第一层。 最佳答案 当你这样说时:table=page.css('table')您正在获取两个表而不仅仅是顶级表。因此，您可以返回到文档根目录并使用只匹配第一个表中的行的选择器，如mosch所说，或者您可以将table修复为仅外部表，如下所示:table=page.css('table').f

  10. ruby - 如何获取没有 child 的节点文本？ - 2

    我使用Nokogiri来解析具有相同内容的html页面:UsefultextUselesstext当我调用方法时page.css('p.parent').textNokogiri返回“有用的文本无用的文本”。但我只需要“有用的文字”。如何获取没有child的节点文本？ 最佳答案 XPath包含用于选择文本节点的text()节点测试，因此您可以:page.xpath('//p[@class="parent"]/text()')如果相关元素可能属于多个类，使用XPath选择HTML类会变得非常棘手，因此这可能不是理想的选择。幸运的是，N

随机推荐