如何让定位小部件在堆栈中工作（颤动）？

Question

这段代码有问题吗？定位的元素未显示，但其他元素显示。 deviceHeight 在其他地方定义为设备的高度。

第一个容器将另外两个容器放在其下方。第二个容器正确显示在顶部，但应位于第二个容器下方的第三个容器（位于）却没有出现。欢迎听取任何替代方案。

Align(
    alignment: Alignment.bottomCenter,
    child: Stack(children: <Widget>[
      Container(
        color: Color(bgDark),
        height: deviceHeight / 100 * 40,
      ),
      Container(color: Colors.red, height: deviceHeight / 18),
      Positioned(
          top: 50,
          child: Container(
              color: Colors.green, height: deviceHeight / 1))
    ]))

Answer 1

将

width

添加到

Positioned

Container

使其可见。

Align(
      alignment: Alignment.bottomCenter,
      child: Stack(
        children: <Widget>[
          Container(
            color: Colors.blue,
            height: 300,
          ),
          Container(
            color: Colors.red,
            height: 200,
          ),
          Positioned(
            top: 50,
            child: Container(
              color: Colors.green,
              height: 100,
              width:100,
            ),
          ),
        ],
      ),
    );

我不确定问题的确切原因，但似乎

Positioned

需要

height

和

width

尺寸。

Answer 2

您需要设置容器的宽度，如果是

width property

或添加

left: 0, right:0

（占据所有可能的水平空间）到定位的小部件

Align(
  alignment: Alignment.bottomCenter,
  child: Stack(
    children: <Widget>[
      Container(
        color: Color(bgDark),
        height: deviceHeight / 100 * 40,
      ),
      Container(
        color: Colors.red,
        height: deviceHeight / 18
      ),
      Positioned(
        top: 50,
        left: 0,
        right: 0,
        child: Container(
          color: Colors.green,
          height: deviceHeight / 1
        ),
      ),
    ],
  ),
);