flutter - Flutter：三列 Row：当左右两列大小不等时，中间列如何居中？

Question

我有一个包含三列的 Flutter Row()。无论左右两列有多宽，我都希望将中间列“B”的内容完美地放在中心。

Row(children: [Text('AAAAAAAAAA'), Text('B'), Text('C')],
    mainAxisAlignment: MainAxisAlignment.spaceEvenly),

这看起来应该很容易，但是“B”太正确了。

我尝试过包装每个 Text() 并Flexible(..., flex:3)认为它会做 33% 33% 和 33%，但这不起作用。

我希望有一个小部件，其中第一列和第三列以某种方式约束/捆绑在一起。

我可以通过包装 Text() 来“作弊”，SizedBox()但这是不灵活的。

Answer 1

您可以使用Expanded+Center让 3 列在相等的空间中居中（每列 1/3）

|----- A -----|----- B -----|----- C -----|

@override
Widget build(BuildContext context) {
  return Row(
    children: [
      Expanded(child: Center(child:Text('AAAAAAAAAA'))),
      Expanded(child: Center(child:Text('B'))),
      Expanded(child: Center(child:Text('C'))),
    ],
  );
}

或使用Stack+Align使位置在 1/4 之间

Align: -1.0     -0.5        0        0.5      1.0
         |------- A ------- B ------- C -------|

@override
Widget build(BuildContext context) {
  return Stack(
    children: [
      Align(alignment: Alignment(-0.5, 0), child: Text('AAAAAAAAAA')),
      Align(alignment: Alignment(0, 0), child: Text('B')),
      Align(alignment: Alignment(0.5, 0), child: Text('C')),
    ],
  );
}

Answer 2

使用Stack小部件工作。不知道你是否严格需要一个Row.

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              child: Text('AAAAAAAAAA'),
            ),
            Container(
              child: Text('C'),
            ),
          ],
        ),
        Positioned.fill(
          child: Align(
            alignment: Alignment.center,
            child: Text("B"),
          ),
        ),
      ],
    );
  }