将 Row 定位在堆栈底部 Flutter

Question

我有一个固定高度的堆栈，我想在该堆栈的底部放置一行包含多个元素的行。

我包裹了我的行

mainAxisAlignment: MainAxisAlignment.center

作为定位元素中的属性，因此代码现在如下所示：

Stack(
  children: [
    //Other children,
    Positioned(
      bottom: 0,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          //children here
        ],
      ),
    ),
  ],
),

奇怪的是，在该行位于定位元素内部之前，它占据了屏幕的整个宽度。现在该行只有其子行的宽度。这是一个问题，因为孩子们现在不再以中心为中心。

有谁知道这里发生了什么以及如何将行放置在堆栈的底部而不将行缩小到不再是屏幕的宽度？

Answer 1

您可以像这样使用Align底部居中Row：

Container(
      height: 300,
      width: 400,
      child: Stack(
        children: [
          Positioned.fill(
            child: Container(
              color: Colors.cyan,
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              color: Colors.purple,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    width: 100,
                    height: 50,
                    color: Colors.red,
                    alignment: Alignment.bottomCenter,
                    child: Text('row child 1'),
                  ),
                  Container(
                    width: 100,
                    height: 50,
                    color: Colors.yellow,
                    alignment: Alignment.bottomCenter,
                    child: Text('row child 2'),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );