flutter - 中心行 child 和右对齐

Question

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

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

          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,，它垂直对齐，就像我想要的那样。

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

Answer 1

这是一份 Stack 的工作!

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

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