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

您遇到此问题的原因是您的 container 位于 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,
              ),
            ],
          )),
    ));
  }

Answer 2

如果你想要一些动态解决方案......即在

Spacer()

内使用

SingleChildScrollView

那么你应该将

SingleChildScrollView

包裹在

LayoutBuilder

内...... 就像我在

Column

中使用

SingleChildScrollView

... 使

children

的

Column

可在小屏幕上滚动，并且在键盘打开时不会相互折叠（在键盘打开时占用可用空间并保持最小空间）键盘打开并带有滚动羽毛）我用过

LayoutBuilder

...

以下是我的小部件树...

LayoutBuilder
  __SingleChildScrollView
    __ConstrainedBox
      __IntrinsicHeight
        __Column
          __TextField
          __SizedBox
          __TextField
          __SizedBox
          __SubmitButton
          __Spacer
          __TermAndConditionWidget

代码示例

Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return SingleChildScrollView(
          child: ConstrainedBox(
            constraints: BoxConstraints(
              minHeight: constraints.maxHeight,
            ),
            child: IntrinsicHeight(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Column(
                      children: [
                        TextField(
                          decoration: InputDecoration(labelText: 'First Text Field'),
                        ),
                        SizedBox(height: 16),
                        TextField(
                          decoration: InputDecoration(labelText: 'Second Text Field'),
                        ), 
                        SizedBox(height: 16),
                        ElevatedButton(
                          child: Text("Submit"),
                          onPressed: (){ 
                            //submit logic 
                        })
                      ],
                    ),
                  ),

                  Spacer(),

                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Column(
                      children: [
                        Text(
                          'Terms and Conditions',
                          style: TextStyle(
                            fontSize: 16,
                            color: Colors.grey,
                          ),
                        ),
                        Row(
                          children: [
                            Checkbox(
                              value: true,
                              onChanged: (value) {},
                            ),
                            Expanded(
                              child: Text('I agree to the terms and conditions.'),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );