Flutter ListView内嵌Row无法跟随页面整体滚动问题求助

问题根因 #

• 代码存在基础语法错误：AppBar() 后缺少逗号，首先会触发编译异常，需优先修正。
• 核心滚动异常的原因是手势冲突：Row内部的GestureDetector会优先消费垂直滑动事件，导致滑动操作落在Row区域时，事件没有透传给父级ListView，最终表现为其余内容滚动正常，只有Row区域滑不动。
• 额外冗余配置影响：你给ListView添加的shrinkWrap: true仅用于ListView内嵌在其他滚动组件的场景，无嵌套滚动时保留该配置会干扰滚动事件传递，还会降低渲染性能。

修复步骤 #

1. 移除ListView的shrinkWrap: true配置，添加physics: const AlwaysScrollableScrollPhysics()强制滚动事件优先由ListView处理。
2. 给Row外层包裹固定高度的Container，明确布局尺寸，避免ListView计算布局时出现定位异常。
3. 修正AppBar()后的逗号语法错误。

修复后完整代码 #

return Scaffold(
  backgroundColor: Colors.white,
  appBar: AppBar(),
  body: ListView(
    scrollDirection: Axis.vertical,
    physics: const AlwaysScrollableScrollPhysics(),
    children: [
      Container(
        height: 60,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            GestureDetector(
              onTap: () {
                Navigator.pushNamed(context, route.Prochaines_route);
              },
              child: Container(
                padding: EdgeInsets.all(17.0),
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Color(0xFFe0f2f1),
                ),
                child: Text(
                  "Prochaines", // 同步修正了原拼写错误
                  style: TextStyle(
                    color: Color(0xFF30a6ca),
                  ),
                ),
              ),
            ),
            GestureDetector(
              onTap: () {
                Navigator.pushNamed(context, route.EnCours_route);
              },
              child: Container(
                padding: EdgeInsets.all(17.0),
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.white,
                ),
                child: Text("En cours"),
              ),
            ),
            GestureDetector(
              onTap: () {
                Navigator.pushNamed(context, route.Termines_route);
              },
              child: Container(
                padding: EdgeInsets.all(17.0),
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.white,
                ),
                child: Text("Terminés"),
              ),
            ),
          ],
        ),
      ),
      Container(width: 300, height: 200, color: Colors.black),
      SizedBox(
        height: 30,
      ),
      Container(width: 300, height: 200, color: Colors.red),
      SizedBox(
        height: 30,
      ),
      Container(width: 300, height: 200, color: Colors.yellow),
      SizedBox(
        height: 30,
      ),
      Container(width: 300, height: 200, color: Colors.green),
      SizedBox(
        height: 30,
      ),
      Container(width: 300, height: 200, color: Colors.brown),
      SizedBox(
        height: 30,
      ),
      Container(width: 300, height: 200, color: Colors.red),
    ],
  ),
);

兜底方案 #

如果上述修改后仍有问题，可给内部每个GestureDetector添加behavior: HitTestBehavior.deferToChild配置，确保滑动事件优先透传给父级组件，不会被内部点击事件拦截。

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