Flutter嵌套列表：子列表触顶/触底时触发父列表滚动

要实现子列表滚动到顶部/底部时，让父列表继续滚动的效果，核心思路是监听子列表的滚动状态，在到达边界时主动触发父列表的滚动。以下是修改后的完整代码：

import 'package:flutter/material.dart';

class NestedListPage extends StatefulWidget {
  const NestedListPage({super.key});

  @override
  State<NestedListPage> createState() => _NestedListPageState();
}

class _NestedListPageState extends State<NestedListPage> {
  // 父列表全局key，用于获取滚动状态
  final GlobalKey<ScrollableState> _outerListKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Nested List Scrolling"),
      ),
      body: ListView.builder(
        key: _outerListKey,
        padding: const EdgeInsets.all(16),
        itemCount: 10,
        itemBuilder: (context, index) {
          return index == 2
              ? Padding(
                  padding: const EdgeInsets.only(bottom: 20),
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 16),
                    constraints: const BoxConstraints(maxHeight: 150),
                    // 监听子列表滚动通知
                    child: NotificationListener<ScrollNotification>(
                      onNotification: (notification) {
                        final metrics = notification.metrics;
                        // 滚动到顶部时，触发父列表向上滚动
                        if (metrics.atEdge && metrics.pixels <= 0) {
                          _outerListKey.currentState?.position.scrollBy(-50);
                        }
                        // 滚动到底部时，触发父列表向下滚动
                        else if (metrics.atEdge && metrics.pixels >= metrics.maxScrollExtent) {
                          _outerListKey.currentState?.position.scrollBy(50);
                        }
                        // 允许通知继续传递
                        return false;
                      },
                      child: ListView.builder(
                        shrinkWrap: true,
                        // 子列表需设为可滚动，不能用NeverScrollableScrollPhysics
                        physics: const ClampingScrollPhysics(),
                        padding: EdgeInsets.zero,
                        itemCount: 10,
                        itemBuilder: (context, idx) {
                          return Container(
                            margin: EdgeInsets.only(bottom: idx == 9 ? 0 : 10),
                            height: 40,
                            width: MediaQuery.of(context).size.width,
                            color: Colors.red,
                            child: Center(
                              child: Text(
                                "Inner list item no: ${(idx + 1).toString()}",
                                style: const TextStyle(color: Colors.white),
                              ),
                            ),
                          );
                        },
                      ),
                    ),
                  ),
                )
              : Container(
                  height: 200,
                  margin: const EdgeInsets.only(bottom: 20),
                  width: MediaQuery.of(context).size.width,
                  color: Colors.blue,
                  child: Center(
                    child: Text(
                      "Outer list item no: ${(index + 1).toString()}",
                      style: const TextStyle(color: Colors.white),
                    ),
                  ),
                );
        },
      ),
    );
  }
}

关键修改说明： #

• 父列表全局Key：给父ListView添加GlobalKey<ScrollableState>，用来获取父列表的滚动状态，从而主动触发滚动操作。
• 子列表滚动监听：用NotificationListener<ScrollNotification>包裹子ListView，捕获滚动事件。
• 边界判断逻辑：通过metrics.atEdge判断是否到达滚动边界，结合metrics.pixels的值区分是顶部还是底部。
• 父列表滚动触发：调用scrollBy()方法控制父列表滚动，参数值可根据需求调整滚动幅度。
• 子列表物理属性调整：移除NeverScrollableScrollPhysics，改用ClampingScrollPhysics（或其他可滚动物理属性），确保子列表能正常滚动以触发通知。

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