Flutter - 我可以让 SingleChildScrollView 填充可用空间吗？

Question

我有一个正在为 Android 构建的 Flutter 应用程序。 结构大致如下：

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("")),
      body: SingleChildScrollView(
        child: Container(
          decoration: const BoxDecoration(
            gradient: ...
          ),
          child: ...
        ),
      )
    );
  }

这里的目标是让渐变背景填充应用栏下方的所有屏幕，如果内容大于该空间，则使其可滚动。

如果我省略SingleChildScrollView ，则Container会填充空间。 但当然，如果它溢出，则没有滚动。 使用上面的代码，滚动视图在小屏幕上完成它的工作，但在大屏幕上，渐变背景不会填满整个可用区域。

如果我像这样改变它：

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("")),
      body: Container(
        decoration: const BoxDecoration(
          gradient: ...
        ),
        child: Column(children: [
          SingleChildScrollView(
            child: ...
          ),
          Expanded(child:Container())
        ]),
      )
    );
  }

然后渐变填充背景但滚动视图没有做正确的事情 - 内容溢出屏幕但无法滚动。 我怎样才能做到这两点？

Answer 1

您遇到此问题的原因是您的容器位于SingleChildScrollView小部件内，并且正在沿着SingleChildScrollView小部件滚动。 并且删除SingleChildScrollView会导致renderflex 溢出错误

Expanded关键字将引发incorrect use of ParentDataWidget

此外，您已经在列中添加了 SingleChildScrollView 小部件，您必须很好地交换这些小部件

这是我给出的一个示例，它将帮助您实现它。

  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
    // Add The Container gradient here
      width: double.infinity,
      height: MediaQuery.of(context).size.height,
      child: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                height: 100,
                width: 50,
                color: Colors.red,
              ),
              Container(
                height: 100,
                width: 50,
                color: Colors.blue,
              ),
              Container(
                height: 1000,
                width: 50,
                color: Colors.yellow,
              ),
              Container(
                height: 1000,
                width: 50,
                color: Colors.orange,
              ),
            ],
          )),
    ));
  }