如何使 SingleChildScrollView 在需要时用空白填充全屏高度

Question

在我的 flutter 应用程序中，我需要一个布局，如果所有小部件对于屏幕来说都太长，我可以滚动，所以我添加了一个 SingleChildScrollView。但是，如果小部件较小并留有大量空间，我希望将最后一行固定到屏幕底部，并在最后两项之间留出空白。所以我添加了一个垫片来帮助解决这个问题。

然而，这会导致错误，因为 SingleChildScrollView 不喜欢 Spacer。我已经尝试了我所知道的一切，但我找不到满足这两个条件且没有错误的布局。有人可以建议一个解决方案吗？

下面的代码 - 您可能需要更改容器的大小（或数量）才能在您的设备上演示该问题。

class _TestMain extends State<TestMain> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          child: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  color: Colors.blue,
                  height: 100,
                ),
                Container(
                  color: Colors.yellow,
                  height: 100,
                ),
                Container(
                  color: Colors.green,
                  height: 100,
                ),
                Container(
                  color: Colors.pink,
                  height: 100,
                ),
                // comment out these four containers to demonstrate issue
                Container(
                  color: Colors.blue,
                  height: 100,
                ),
                Container(
                  color: Colors.yellow,
                  height: 100,
                ),
                Container(
                  color: Colors.green,
                  height: 100,
                ),
                Container(
                  color: Colors.pink,
                  height: 100,
                ),
                // SingleChildScrollView won't allow the Spacer
                //const Spacer(),
                Container(
                  color: Colors.blue,
                  height: 100,
                  child: Text("I'm always fixed to the bottom of the screen!"),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

如果我添加垫片，错误是：

======== Exception caught by rendering library =====================================================
The following assertion was thrown during performLayout():
RenderFlex children have non-zero flex but incoming height constraints are unbounded.

When a column is in a parent that does not provide a finite height constraint, for example if it is in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining space in the vertical direction.
These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child cannot simultaneously expand to fit its parent.

Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible children (using Flexible rather than Expanded). This will allow the flexible children to size themselves to less than the infinite remaining space they would otherwise be forced to take, and then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum constraints provided by the parent.

Answer 1

您可以使用CustomScrollView和SliverFillRemaining来实现您想要的。

这样我们还可以在可滚动列表中使用Spacer和小部件：Expanded

        Scaffold(
              body: SafeArea(
                child: CustomScrollView(
                  slivers: [
                    SliverFillRemaining(
                      hasScrollBody: false,
                      child: Column(
                        children: [
                          Text("I'm at top part"),
                          Text("I'm at top part"),
                          Text("I'm at top part"),
                          const Spacer(),
                          Text("I'm at bottom"),
                        ],
                      ),
                    )
                  ],
                ),
              ),
            )