如何使SingleChildScrollView在需要的地方用空格填充全屏高度

Question

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

但是，这会导致一个错误，因为SingleChildScrollView不喜欢间隔符。我已经尝试了我所知道的一切，但我找不到一个既满足这两个条件又没有错误的布局。有人能提出一个解决方案吗？

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

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，以避免屏幕在部分填充时滚动。通过这种方式，我们也可以使用间隔和扩展的小部件！

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

您可以使用Container Container SingleChildScrollView 的设置高度无穷大

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

Answer 3

您可以使用CCD_ 1从CCD_。

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将完成与Align小部件的技巧。

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