Question

我正在创建一个在Stack内显示Container的小部件。在Stack内的Column小部件内有一个动态Positioned，它将Column粘贴到Bottom。

我正在尝试将Stack包装在SingleChildScrollView中，这样，如果动态Column会有很多子元素，它将能够滚动。

但是在我添加滚动视图后，我收到以下错误消息：

RenderStack object was given an infinite size during layout.

Answer 1

scrollView没有高度，它将为其子代使用无限的高度。因此，如果需要，应将堆栈包装在一个已知高度的sizeBox中。如果要让堆栈填满屏幕，请完全删除singleChildScrollview。并且如果您希望堆栈从内部滚动。只需在堆栈内添加SingleChildScrollView

return Scaffold(
      body: Container(
        color: Colors.blue[100],
        child: Stack(
          children: [
            Positioned.fill(child: SingleChildScrollView(child: MyColumn()))
          ],
        ),
      ),
    );

编辑1：好的，问题是布局本身。由于仅使用堆栈来放置图像。而且您知道图像的宽度和高度，并且背景形状填充了所有项目。我们可以

仅将堆栈与图像隔离，并使用填充和一些计算以类似的方式构建布局。

然后在普通列中呈现其他所有内容

我的实现https://dartpad.dev/230b14d8f0b22b45929a75c208786257

Answer 2

摘自RenderStack文档：

首先，将未定位的子项（其上，右，下和左值为空的子项）布局并最初放置在堆栈的左上角。然后调整堆栈的大小以包围所有未定位的子代。如果没有未定位的子代，则堆栈会变得尽可能大。

由于Stack的所有子级都已定位，因此Stack将与SingleChildScrollView传递的最大大小限制相匹配。此大小具有无限的高度，因此Stack也被迫具有无限的高度。

要解决此问题，您将需要找到另一种方法来完成所需的工作。我想到的一个选择涉及ConstrainedBox提供最小高度（从LayoutBuilder获得），未定位的Column和{{ 1}}本身。这类似于SingleChildScrollView文档中的第一个代码示例：

bottomCenter

在堆栈中使用Positioned时，“ RenderStack对象在布局期间被赋予了无限大小”

2 个答案: