如何在Flutter中实现可滚动屏幕？SingleChildScrollView无效报像素错如何解决

问题根源 #

• 热门电影卡片高度溢出：_buildPopularSection的容器固定高度仅为200，但_buildPopularItem内部海报高度已占200，叠加下方5px间距和文本后总高度超出父容器限制，触发溢出错误。
• 重复嵌套MaterialApp：当前页面内部又嵌套了一层MaterialApp，和项目入口的顶层MaterialApp冲突，导致手势识别异常，是页面无法竖向滚动的核心原因。
• 冗余配置：分类、热门横向列表加了physics: NeverScrollableScrollPhysics()会禁用横向滚动，同时重复导入了两次package:flutter/material.dart会触发警告。

修复步骤 #

1. 移除多余的MaterialApp嵌套，build方法直接返回Scaffold：

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Color(0xff070d2d),
    body: Column(
      children: [
        Expanded(
          child: SingleChildScrollView(
            child: Column(
              children: [
                _buildHeaderSection(),
                _buildSearchBar(),
                SizedBox(height: 30),
                buildCategoriesSection(),
                SizedBox(height: 20),
                buildListCategories(),
                SizedBox(height: 30),
                _buildPopularTitle(),
                SizedBox(height: 30),
                _buildPopularSection(),
              ],
            ),
          ),
        ),
      ],
    ),
  );
}

2. 调整热门区域容器高度，适配卡片下部的文本和间距：

_buildPopularSection() {
  return Container(
    height: 230, // 从200调整为230，给下方文本预留空间
    padding: EdgeInsets.only(left: 20),
    width: MediaQuery.of(context).size.width,
    child: ListView.builder(
      itemCount: 6,
      // 需要横向滑动可删除下一行配置
      // physics: NeverScrollableScrollPhysics(),
      scrollDirection: Axis.horizontal,
      shrinkWrap: true,
      itemBuilder: (context, position) {
        return _buildPopularItem();
      },
    ),
  );
}

3. （可选）删除重复导入的package:flutter/material.dart，移除横向列表的NeverScrollableScrollPhysics配置恢复横向滑动效果。

修改后页面竖向滚动即可正常生效，也不会再出现像素溢出错误，同时原有的路由跳转逻辑也会恢复正常。

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