如何解决“容器切割另一个容器”的问题

Question

如果我将绿色容器的高度设置为MediaQuery.of(context).size.height/2，则可以正常工作，但是将绿色容器的高度设置为MediaQuery.of(context).size.height/3会导致绿色容器切割蓝色容器。

我该如何克服？

Stack(
        children: <Widget>[      
          Container(
            height: MediaQuery.of(context).size.height/3,
            color: Colors.green,
          ),
          Positioned(
            top: 80,
            right: 30,
            left: 30,
            child: Container(
              height: 200,
              width: 400.0,
            ))

Answer 1

由于某种原因，绿色容器正在充当“主屏幕”，并且将其余的Stack子项定位在其中。

所以...我只是将主容器包装成一列（我认为您可以使用任何多子布局），并且按预期工作。

body: Stack(
    children: <Widget>[
      Column(
        children: [
          Container(
            height: MediaQuery.of(context).size.height / 3,
            color: Colors.green,
          ),
        ],
      ),
      Positioned(
        top: 80,
        right: 30,
        left: 30,
        child: Container(
          color: Colors.blue,
          height: 200,
          width: 400.0,
        ),
      ),
    ],
  ),
);

希望它对您有帮助。