SingleChildScrollView内嵌套ListView时滚动失效问题求解

这个异常是Flutter滚动布局的固有规则导致的，没有玄学bug：

• Expanded只能在具备明确高度/宽度约束的Flex容器（Column/Row） 下正常工作，一旦父级是SingleChildScrollView这类提供无界高度的可滚动组件，Expanded无法计算「剩余可用高度」，必然触发布局溢出或约束错误。
• 嵌套多个默认配置的可滚动组件时，会出现滚动事件竞争：外层SingleChildScrollView会优先接管滚动响应，内部ListView拿不到明确高度约束时，会直接丧失滚动能力或者高度计算失效。
  你要的普通网页式全局滚动，本质是整个页面只保留一个滚动响应主体，内部的列表区块不需要独立滚动，根本不需要嵌套多个可滚动组件抢事件。

按以下规则调整布局即可：

1. 最外层用SingleChildScrollView作为唯一的全局滚动容器
2. 移除SingleChildScrollView内部所有的Expanded组件，避免无界约束下的布局计算错误
3. 所有内部的ListView配置两个核心参数：
   • shrinkWrap: true：让ListView根据子元素总高度自适应高度，不尝试撑满父容器
   • physics: const NeverScrollableScrollPhysics()：禁用ListView自身的滚动响应，所有滚动事件统一交给外层全局滚动容器处理
4. 固定宽度的侧边内容区（你代码里宽264的容器）直接用普通Container包裹即可，不需要flex分配空间

调整后可直接运行的代码 #

class SchemaPage extends StatelessWidget {
  final String text;

  SchemaPage({Key? key, required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) => Scaffold(
        body: SingleChildScrollView( // 最外层作为唯一全局滚动容器
          child: Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                AppBar(), //自定义AppBar
                const SizedBox(height: 15),
                // 移除原外层Expanded，滚动容器内无界高度下Expanded无法生效
                Container(
                  width: 264,
                  padding: const EdgeInsets.all(36),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Text(
                        'Scheme',
                        style: TextStyle(
                            fontFamily: 'Roboto',
                            fontSize: 24,
                            fontWeight: FontWeight.w700,
                            color: Colors.black),
                      ),
                      const SizedBox(height: 10),
                      const Text(
                        'Person',
                        style: TextStyle(
                            fontFamily: 'Roboto',
                            fontSize: 20,
                            fontWeight: FontWeight.w700,
                            color: Colors.black),
                      ),
                      const SizedBox(height: 20),
                      // 移除原包裹ListView的Expanded
                      ListView(
                        shrinkWrap: true, // 自适应子元素总高度
                        physics: const NeverScrollableScrollPhysics(), // 禁用自身滚动
                        children: const [
                          SizedBox(height: 10),
                          PersonWidget(),
                          SizedBox(height: 10),
                          PersonWidget(),
                          SizedBox(height: 10),
                          PersonWidget(),
                        ],
                      ),
                      const SizedBox(height: 5),
                      InkWell(
                        child: const Text('more',
                            style: TextStyle(
                                fontFamily: 'Roboto',
                                fontSize: 14,
                                fontWeight: FontWeight.w700)),
                        onTap: () {},
                      ),
                      const SizedBox(height: 30),
                      const Text(
                        'Person',
                        style: TextStyle(
                            fontFamily: 'Roboto',
                            fontSize: 20,
                            fontWeight: FontWeight.w700,
                            color: Colors.black),
                      ),
                      const SizedBox(height: 30),
                      // 第二个列表按同样规则配置即可
                      ListView(
                        shrinkWrap: true,
                        physics: const NeverScrollableScrollPhysics(),
                        children: const [
                          // 第二个列表的PersonWidget子项放这里
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      );
}

如果后续需要实现「外层页面全局滚动+内部特定列表区块独立滚动」的效果，只需要给需要独立滚动的ListView外层用SizedBox或ConstrainedBox指定明确高度，保留ListView默认的滚动物理配置即可，不需要加NeverScrollableScrollPhysics。

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