Flutter嵌套ListView滚动冲突：子列表边界时交权父列表

要实现子ListView滚动到顶部/底部边界时，将滚动控制权交还给父ListView，只需调整子ListView的滚动物理属性，让它在到达边界时不再拦截滚动事件，而是传递给父视图。

修改后的代码 #

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Scroll example',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          body: ListView(
            children: [
              for (int i = 0; i < 10; i++) ListItem(),
              SizedBox(
                height: 120,
                child: ListView(
                  shrinkWrap: true,
                  // 核心配置：让子ListView到达边界时传递滚动事件给父视图
                  physics: const ClampingScrollPhysics(),
                  children: [
                    for (int i = 0; i < 10; i++) ListItem2(),
                  ],
                ),
              ),
              for (int i = 0; i < 10; i++) ListItem(),
            ],
          ),
        ));
  }
}

class ListItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text('Item'),
      tileColor: Colors.blue,
    );
  }
}

class ListItem2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text('Item',
          style: TextStyle(
            color: Colors.red,
          )),
    );
  }
}

原理说明 #

• 默认情况下，Flutter的ListView在iOS平台使用BouncingScrollPhysics、Android平台使用GlowingOverscrollPhysics，这两种物理效果会在滚动到达边界时拦截后续滚动事件，用于展示弹跳或发光反馈，导致父ListView无法接管滚动。
• ClampingScrollPhysics会在滚动到达边界时直接停止，不会拦截超出边界的滚动事件，此时父ListView就能接收到滚动手势并继续滚动。

进阶方案（保留子ListView原生效果） #

如果需要保留子ListView的弹跳/发光效果，同时实现边界滚动传递，可以通过NotificationListener监听滚动通知，手动触发父ListView滚动：

SizedBox(
  height: 120,
  child: NotificationListener<OverscrollNotification>(
    onNotification: (notification) {
      // 子ListView滚到顶部，向上滚动时让父ListView滚动
      if (notification.overscroll < 0 && notification.metrics.extentBefore == 0) {
        Scrollable.of(context).position.jumpTo(
          Scrollable.of(context).position.pixels + notification.overscroll,
        );
      }
      // 子ListView滚到底部，向下滚动时让父ListView滚动
      else if (notification.overscroll > 0 && notification.metrics.extentAfter == 0) {
        Scrollable.of(context).position.jumpTo(
          Scrollable.of(context).position.pixels + notification.overscroll,
        );
      }
      return false; // 允许通知继续传递
    },
    child: ListView(
      shrinkWrap: true,
      children: [
        for (int i = 0; i < 10; i++) ListItem2(),
      ],
    ),
  ),
)

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