中间行 child 和 right-align

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" 是 off-center，这是正常的，因为它以剩下的 space 为中心，而 "CLEAR" 正在接受那个space.

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

看看 documentation，我应该很接近解决方案了。但是他们没有将标题行居中（第 1 步，查看标题部分的红色方块），因此显然不完全相同。

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

注意：我不想在播放 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() class 上使用 alignment: FractionalOffset.center,，它垂直对齐，完全符合我的要求。

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

Answer 1

这是一份 Stack 的工作！

您可以将文本小部件作为单独的子部件放入堆栈中，并使用 Positioned 小部件右对齐 "clear" 小部件。

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

Answer 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'),
                  )
                ],
              ),
            ),
          ),

Answer 3

要将 Container 放在 Row, I have used Expanded 的右侧！

一旦我必须在 Row 中放置一个 child Container，而这里 Row 之前已经有一些其他 children 小部件 Container 从默认方向从左到右开始，Container 正好落后于较早的 childrens.

这里我的 Container 宽度是 40.0， Row 内的剩余宽度在领先 childrens.

后约为 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),
                ),
              ),
            )),
      )
    ],
)),

希望这个场景可以帮助到一些人。

中间行 child 和 right-align

Center row child and right-align

centering

flutter

flutter-layout