Flutter：修复Scaffold Body中SingleChildScrollView未填满区域问题

在Scaffold的Body中使用了包含短ListView的SingleChildScrollView，从演示视频可见，SingleChildScrollView并未填满Scaffold的整个Body区域，该如何解决？

原代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return SingleChildScrollView(
        child: ListView(shrinkWrap: true, children: [
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      ),
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      ),
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      ),
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      ),
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      ),
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      ),
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      )
    ]));
  }
}

问题根源是SingleChildScrollView的子组件（高度不足的ListView）未撑满父容器，导致SingleChildScrollView自身无法占据整个Body空间。以下是几种可行的解决方式：

方法一：用Column包裹ListView并添加Spacer #

将ListView放入Column中，通过Spacer组件占据剩余空间，强制SingleChildScrollView撑满Body：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          ListView(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(), // 禁用ListView自身滚动，避免嵌套滚动冲突
            children: const [
              ListTile(title: Text("TEST"), subtitle: Text("________")),
              ListTile(title: Text("TEST"), subtitle: Text("________")),
              ListTile(title: Text("TEST"), subtitle: Text("________")),
              ListTile(title: Text("TEST"), subtitle: Text("________")),
              ListTile(title: Text("TEST"), subtitle: Text("________")),
              ListTile(title: Text("TEST"), subtitle: Text("________")),
              ListTile(title: Text("TEST"), subtitle: Text("________")),
            ],
          ),
          const Spacer(), // 占据剩余空间，撑满父容器
        ],
      ),
    );
  }
}

方法二：通过ConstrainedBox强制设置最小高度 #

利用LayoutBuilder获取父容器的高度，再通过ConstrainedBox给SingleChildScrollView的子组件设置最小高度：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return SingleChildScrollView(
          child: ConstrainedBox(
            constraints: BoxConstraints(minHeight: constraints.maxHeight),
            child: ListView(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              children: const [
                ListTile(title: Text("TEST"), subtitle: Text("________")),
                ListTile(title: Text("TEST"), subtitle: Text("________")),
                ListTile(title: Text("TEST"), subtitle: Text("________")),
                ListTile(title: Text("TEST"), subtitle: Text("________")),
                ListTile(title: Text("TEST"), subtitle: Text("________")),
                ListTile(title: Text("TEST"), subtitle: Text("________")),
                ListTile(title: Text("TEST"), subtitle: Text("________")),
              ],
            ),
          ),
        );
      },
    );
  }
}

方法三：移除嵌套结构，直接使用ListView #

如果不需要额外的滚动逻辑，直接用ListView替代嵌套的SingleChildScrollView+ListView，ListView默认会自动撑满整个Body：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: const [
        ListTile(title: Text("TEST"), subtitle: Text("________")),
        ListTile(title: Text("TEST"), subtitle: Text("________")),
        ListTile(title: Text("TEST"), subtitle: Text("________")),
        ListTile(title: Text("TEST"), subtitle: Text("________")),
        ListTile(title: Text("TEST"), subtitle: Text("________")),
        ListTile(title: Text("TEST"), subtitle: Text("________")),
        ListTile(title: Text("TEST"), subtitle: Text("________")),
      ],
    );
  }
}

内容的提问来源于stack exchange，提问作者sosnus