如何在 Flutter 中创建一个可滚动的列，如果它不占用所有空间，它会在某处扩展？

Question

我正在尝试创建一个可滚动的列，如果它没有填满，则在屏幕底部有一个小部件。 但是，如果它滚动。

首先，我尝试使用一个带有MainAxisSize.max的简单Column并使用一个空Container进行Expand ，在该列溢出之前效果很好。

[...]

Column(
  mainAxisSize: MainAxisSize.max,
  children: [
    MyWidget(),
    MyWidget(),
    [...],
    MyWidget(),
    Expand(child: Container()),
    ElevatedButton()
  ],
)

然后我搜索并发现使Column可滚动的推荐解决方案是SingleChildScrollView 。 这使列中的所有小部件都消失了（我仍然不确定为什么），直到我删除了Expand ，它虽然解决了一个问题，但引入了另一个问题。

[...]

SingleChildScrollView(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      MyWidget(),
      MyWidget(),
      [...],
      MyWidget(),
      // Expand(child: Container()),
      ElevatedButton()
    ],
  )
)

所以我的问题是，如何使 Column 既可滚动又不需要所有空间来扩展以便最后一个子项位于屏幕底部？

Answer 1

IntrinsicHeight使用成本太高，但在这种情况下您别无选择。 尝试这个：

LayoutBuilder(builder: (context, constraint) {
    return SingleChildScrollView(
      child: ConstrainedBox(
        constraints: BoxConstraints(minHeight: constraint.maxHeight),
        child: IntrinsicHeight(
          child: Column(
            children: [
              Container(
                color: Colors.red,
                height: 400,
                width: double.infinity,
              ),
              Expanded(
                child: Container(
                  color: Colors.blue,
                  width: double.infinity,
                ),
              ),
            ],
          ),
        ),
      ),          
    );
  })

在此示例中，如果您为蓝色container设置高度，您将看到scrollview有效，如果您在其上使用Expanded ，它会采用可用大小。