如何让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!"),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

如果我添加 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"),
                        ],
                      ),
                    )
                  ],
                ),
              ),
            )

Answer 2

您可以使用包含 SingleChildScrollView 的容器设置无限高度

Container(
        height: double.infinity,
        color: Colors.white,
        child: SingleChildScrollView(
          child: Container(
            // Content
          ),
        )
      ),

Answer 3

您可以使用

bottomNavigationBar

来自

Scaffold

。

return Scaffold(
  bottomNavigationBar: Container(
    color: Colors.blue,
    height: 100,
    child: Text("I'm always fixed to the bottom of the screen!"),
  ),
  body: SafeArea(...

还有 您可以使用 CustomScrollView ，它比 SingleChildScrollView 更好；并使用 SliverFillRemaining 将通过对齐小部件来实现这一点。

class TestMain extends StatefulWidget {
  TestMain({Key? key}) : super(key: key);

  @override
  State<TestMain> createState() => _TestMain();
}

class _TestMain extends State<TestMain> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: Container(
        color: Colors.blue,
        height: 100,
        child: Text("I'm always fixed to the bottom of the screen!"),
      ),
      body: SafeArea(
        child: CustomScrollView(
          slivers: [
            /// your top level items
            // SliverList(delegate: SliverChildBuilderDelegate((context, index) => ,)),

            SliverList(
                // better use `SliverChildBuilderDelegate`
                delegate: SliverChildListDelegate([
              // you can put regular container here
              Container(
                color: Colors.amber,
                height: 100,
              ),
            ])),
            SliverFillRemaining(
              child: Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  color: Colors.blue,
                  height: 100,
                  child: Text("I'm always fixed to the bottom of the screen!"),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}