0

我正在创建一个Stack在Container. 在小部件内部有Stack一个动态，它将 粘贴到.ColumnPositionedColumnBottom

我正在尝试将其包装Stack在一个SingleChildScrollView中，如果动态Column将有很多孩子，它将能够滚动。

但是在我添加滚动视图后，我收到了这个错误消息：

RenderStack object was given an infinite size during layout.

4

2 回答 2

1

scrollView 没有高度，它将为其子级使用无限高度。因此，如果您需要，堆栈应该被包裹在一个已知高度的 sizedBox 中。如果您希望堆栈填满屏幕，则完全删除 singleChildScrollview。如果您希望堆栈可以从内部滚动。只需在堆栈中添加 SingleChildScrollView

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

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

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

然后在普通列中渲染其他所有内容

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

于 2020-09-25T15:01:00.257 回答
0

从RenderStack文档中：

首先，未定位的子项（to​​p、right、bottom 和 left 的值为 null 的子项）被布局并最初放置在堆栈的左上角。然后调整堆栈的大小以包含所有未定位的子项。如果没有未定位的孩子，则堆栈变得尽可能大。

由于您Stack的所有孩子都已定位，Stack因此将匹配SingleChildScrollView. 这个尺寸有无限的高度，所以Stack也被迫有无限的高度。

要解决此问题，您将需要找到另一种方法来完成您想要的。想到的一个选项包括ConstrainedBox提供最小高度（从 a 获得LayoutBuilder）、一个非定位Column的 和一个bottomCenter对齐Stack本身。这类似于SingleChildScrollView文档中的第一个代码示例：

LayoutBuilder(
  builder: (context, constraints) {
    return SingleChildScrollView(
      child: ConstrainedBox(
        // This ensures that the Stack fills the entire viewport,
        // even if the Column is small.
        constraints: BoxConstraints(
          minHeight: constraints.maxHeight,
        ),
        child: Stack(
          // Place the only non-positioned child (the column) at the bottom
          alignment: Alignment.bottomCenter,
          children: [
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [ /* ... */ ]
            )
          ]
        )
      )
    );
  }
)
于 2020-09-25T15:36:15.993 回答