Flutter OverflowBox 在下一列的 widget 后面

Question

我正在做一个 Flutter 项目，我正在尝试使用 OverflowBox小部件。

我在 Column 中有一个小部件列表，其中一个位于中间，应该根据用户的某些事件溢出其他小部件。

这是我的代码的简化版本。

红色Container需要在顶部和底部显示溢出它的绿色Container。但是正如您在图像上看到的那样，绿色的 Container 仅在前一个 Container(蓝色的)上方可见，而在下一个(黑色的 容器)。好像在后面。

class MyScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          height: 100,
          width: 100,
          color: Colors.blue,
        ),
        Container(
          height: 100,
          width: 100,
          color: Colors.red,
          child: Center(
            child: OverflowBox(
              maxHeight: 150,
              child: Container(
                color: Colors.green,
                height: 150,
                width: 50,
              ),
            ),
          ),
        ),
        Container(
          height: 100,
          width: 100,
          color: Colors.black,
        )
      ],
    );
  }
}

如何让我的绿色 Container 也位于黑色之上？

---

编辑:出于功能目的，我需要绿色 Container 成为子项/由红色 Container 创建(而不是我可以使用的列表堆栈 小部件)。我需要逻辑在红色和绿色的内部。

Answer 1

它仍然使用 Stack，但是 Green Container 仍然是 Red Container 的一部分。

如果 Container 具有动态高度，则可能难以计算边距。

class MyScreen extends StatelessWidget {
  const MyScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            height: 100,
            width: 100,
            color: Colors.blue,
          ),
          Container(
            margin: const EdgeInsets.only(top: 200),
            height: 100,
            width: 100,
            color: Colors.black,
          ),
          Container(
            margin: const EdgeInsets.only(top: 100),
            height: 100,
            width: 100,
            color: Colors.red,
            child: Center(
              child: OverflowBox(
                maxHeight: 150,
                child: Container(
                  height: 150,
                  width: 50,
                  color: Colors.green,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}