如何将2个容器在堆栈中居中放置在另一个容器下面

Question

代码：

Container(
  height: 300,
  width: 300,
  color: Colors.brown,
  child: Stack(
    children: <Widget>[
      Align(child: Container(color: Colors.red, height: 50)),
      Align(
        alignment: Alignment(0, 0.4),
        child: Container(color: Colors.green, height: 50),
      ),
    ],
  ),
)

我想将Green Container放在Red的正下方。上面的解决方案可以工作，但是我必须将对齐值硬编码为0.4，我曾想过使用Column来实现，但是似乎没有办法。如何在不对Alignment进行硬编码的情况下完成此任务。

输出：

Answer 1

您可以尝试一下，希望对您有所帮助：

Container(
        height: 300,
        width: 300,
        color: Colors.brown,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Expanded(child: SizedBox(height: 1,)),
            Container(color: Colors.red, height: 100),
            Container(color: Colors.green, height: 100),
          ],
        ),
      )

Answer 2

这是一种方法，您无需对值进行硬编码，只需将flex更改为所需的大小，然后使用Flutter即可计算高度。

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          Expanded(flex: 4, child: Container(color: Colors.brown,),),
          Expanded(flex: 1, child: Container(color: Colors.red,),),
          Expanded(flex: 1, child: Container(color: Colors.green,),),
          Expanded(flex: 4, child: Container(color: Colors.brown,),),
        ],
      ),
    );
  }

这是这样的：