dart 如何使SingleChildScrollView在需要的地方用空白填充整个屏幕高度

iyfamqjs  于 2023-07-31  发布在  其他
关注(0)|答案(3)|浏览(149)

在我的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.

enxuqcxy

enxuqcxy1#

您可以使用CustomScrollView和SliverFillRemaining略有不同,以避免让屏幕在部分填充时滚动。这样我们也可以使用Spacer和Expanded widgets!

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

字符串

iswrvxsc

iswrvxsc2#

您可以从Scaffold使用bottomNavigationBar

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

字符串
并且可以使用比SingleChildScrollView更好的CustomScrollView;然后使用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!"),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

xxls0lw8

xxls0lw83#

您可以使用设置容器高度无穷大包含SingleChildScrollView

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

字符串

相关问题