允许一个小部件覆盖另一个小部件。

Question

我试图实现一个效果，允许一个小部件覆盖另一个小部件
如此看到 这里

我目前的代码是这样的：

  @override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;
    return new Column(children: <Widget>[
      new Container(
      color: Colors.blue,
      height: screenSize.height / 2,
      width: screenSize.width,
      child: new Center(
        child: new Container(
          margin: const EdgeInsets.only(top: 320.0),
          color: Colors.red,
          height: 40.0,
          width: 40.0,
        ),
      ))
]);
}

这导致了以下, 正方形被容器裁剪掉了。
有其他的解决办法吗？

- Omer

---

我猜 https://docs.flutter.io/flutter/widgets/Stack-class.html 是你要找的。 - Günter Zöchbauer

Answer 1

一般来说，你在 Flutter 中永远不应该发生溢出。

如果你想要一个特定的布局，你需要将“溢出”的小部件明确地分离到另一层中。

其中一个解决方案是使用Stack小部件，它允许小部件彼此重叠。

最后实现如下所示：

flutter 代码为：

new Stack(
  fit: StackFit.expand,
  children: <Widget>[
    new Column(
      mainAxisSize: MainAxisSize.max,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        new Expanded(
          child: new Container(
            color: Colors.blue,
          ),
        ),
        new Expanded(
          child: new Container(
            color: Colors.white,
          ),
        ),
      ],
    ),
    new Center(
      child: new Container(
        color: Colors.red,
        height: 40.0,
        width: 40.0,
      ),
    )
  ],
);

- Rémi Rousselet

---

有没有办法将屏幕底部的容器取出？我尝试了alignment，但似乎必须增加Container的高度才能看到效果。 - CopsOnRoad

我不明白你想要什么。你能提出一个问题吗？我很乐意回答。 - Rémi Rousselet

在我看来，这只是一件小事，一个注释就可以解决。无论如何，让我澄清一下，在上面的截图中，我们可以看到红色的“Container”位于屏幕中央，我们如何将该特定容器对齐到屏幕中心底部（也就是白色容器的中心底部，它是“Column”的第二个容器）？ - CopsOnRoad

用Alignment.bottomCenter替换Center并将其命名为Align。你也可以直接在Stack上设置对齐方式，从而完全删除Center。 - Rémi Rousselet

另外还要看一下LayoutBuilder。如果您有复杂的布局需要根据当前大小进行布局，则LayoutBuilder加上Stack非常方便。 - Martin Kersten

在我的情况下，这只是一个动画。它只会溢出几毫秒，但仍然会出现错误。 - Joran