如何使 Stack 中的 Widget 垂直或水平居中？

Question

Center 小部件将小部件水平和垂直居中放置在堆栈的中心。如何才能让小部件仅水平或垂直居中？

使用行或列小部件可以使小部件在堆栈中居中。不使用那些小部件可以完成吗？

条件：

不能使用行/列。
堆栈的大小在布局之前是未知的（不能使用硬编码的定位值）。

中心小部件：

Container(
      decoration:
          BoxDecoration(border: Border.all(color: Colors.black87, width: 10)),
      child: Stack(
        children: [
          Center(
            child: Container(color: Colors.amber, width: 50, height: 50),
          ),
        ],
      ),
    );

水平居中w/Row:

Row(mainAxisAlignment: MainAxisAlignment.center)

垂直居中w/Column:

Column(mainAxisAlignment: MainAxisAlignment.center)

上面的对齐是想要的结果。这些结果可以通过其他 Flutter 小部件实现吗？

Answer 1

使用Align小部件

 Align(
        alignment: Alignment.topCenter, // This will horizontally center from the top
        child: Container(
          decoration: BoxDecoration(
              border: Border.all(color: Colors.black87, width: 10)),
          child: Stack(
            children: [
              Container(color: Colors.amber, width: 50, height: 50),
            ],
          ),
        ),
      )

1.对于顶部中心使用对齐方式： Alignment.topCenter

2。对于中左使用对齐方式： Alignment.centerLeft

3。对于居中右对齐： Alignment.centerRight

3。对于底部居中使用对齐方式： Alignment.bottomCenter

如何使 Stack 中的 Widget 垂直或水平居中？

How to vertically or horizontally center a Widget in a Stack?

flutter

flutter-layout

flutter-widget