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

Question

在我的 flutter 应用程序中，我需要一个布局，如果所有小部件对于屏幕而言都太长，我可以在其中滚动，因此我添加了一个 SingleChildScrollView。但是，如果小部件较小并且留有很多空间，我希望最后一行固定在屏幕底部，最后两个项目之间有空白。所以我添加了一个 Spacer 来帮助解决这个问题。

但是这会导致错误，因为 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!"),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

如果我添加 Spacer，错误是:

======== 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"),
                ],
              ),
            )
          ],
        ),
      ),
    )