中心行子级和右对齐答案

【问题标题】：Center row child and right-align中心行子级和右对齐
【发布时间】：2019-05-18 01:06:44
【问题描述】：

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

现在我设法使用以下代码得到以下结果

          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 步，查看标题部分上的红色方块），因此显然不完全相同。

我不确定我现在应该瞄准什么布局。是否可以重叠小部件？所以我可以简单地居中并完全展开 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,，它垂直对齐，就像我想要的那样。

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

【问题讨论】：

标签： flutter centering flutter-layout

【解决方案1】：

这是Stack 的工作！

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

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

【讨论】：

谢谢！真的很棒！不过，我有一个后续问题，我不确定我所做的是否足够好。我已经编辑了原始问题
没关系，我找到了一种方法 :) AlignmentGeometry 对我来说不是很清楚，但是在 Stack() 上使用 alignment: FractionalOffset.center, 完成了我想要的工作！
+1111 用于 Material AppBar Widget 示例！编辑：哦，我刚刚注意到你是谁，哈哈。

【解决方案2】：

你可以用Stack创建它

       Card(child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Stack(
                children: <Widget>[
                  Center(child: Text('PLAY QUEUE'),),
                  Container(
                    alignment: Alignment.centerRight,
                    child: Text('CLEAR'),
                  )
                ],
              ),
            ),
          ),

【讨论】：

【解决方案3】：

要将Container 放在Row 的右侧，我使用了Expanded！

一旦我必须在Row 中放置一个子Container，这里Row 之前已经有一些其他子小部件Container 从默认方向从左到右开始，Container 正好在尾随在早期的孩子之后。

在这里，我的Container 宽度是 40.0，Row 内的剩余宽度在引导孩子之后约为 100.0。

因此，我用下面所说的将Container右侧推到Row。

child: Row(
    children: <Widget>[
      Container(
        padding: EdgeInsets.only(left: 8.0, right: 8.0),
        child: CircleAvatar(
          child: ClipOval(
            child: _musicIcon,
            clipBehavior: Clip.antiAlias,
          ),
        ),
      ),
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(top: 8.0, bottom: 3.0),
            constraints: BoxConstraints(maxWidth: 280.0),
            child: Text("some0"),
          ),
          Row(
            children: <Widget>[
              Container(
                constraints: BoxConstraints(maxWidth: 200.0),
                child: Text("some1"),
              ),
              Container(
                padding: EdgeInsets.only(left: 10.0, right: 10.0),
                child: Text("some2"),
              ),
              Container(
                constraints: BoxConstraints(minWidth: 20.0),
                child: Text("some3"),
              ),
            ],
          ),
        ],
      ),
      Expanded(
        child: Container(
            width: 40.0,
            margin: EdgeInsets.only(right: 8.0),
            alignment: Alignment.centerRight,
            child: GestureDetector(
              onTap: () {
                // doing something
              },
              child: Padding(
                padding: EdgeInsets.only(left: 18.0, right: 0.0),
                child: CircleAvatar(
                  child: _getActionFlareActor(
                      _musicURL, _musicTitle, true),
                ),
              ),
            )),
      )
    ],
)),

希望这种情况可能对某人有所帮助。

【讨论】：