Flutter中嵌套子ListView滚动到边界时触发父ListView滚动如何实现？

你需要实现的子滚动组件到边界后触发父组件滚动的效果，本质是嵌套滚动的事件分发逻辑处理，具体修改步骤如下：

步骤1：定义滚动控制器 #

首先在当前页面的State类中声明两个滚动控制器，分别对应父滚动组件和子ListView：

// 父可滚动页面的控制器，绑定到外层的SingleChildScrollView/ListView等滚动组件上
late ScrollController _parentScrollController;
// 子ListView的控制器
late ScrollController _childScrollController;

@override
void initState() {
  super.initState();
  _parentScrollController = ScrollController();
  _childScrollController = ScrollController();
  // 给子控制器添加滚动监听
  _childScrollController.addListener(_handleChildScroll);
}

@override
void dispose() {
  _parentScrollController.dispose();
  _childScrollController.dispose();
  super.dispose();
}

步骤2：编写滚动联动逻辑 #

实现子滚动的监听回调，判断子滚动到边界时将剩余偏移量交给父控制器处理：

void _handleChildScroll() {
  // 子ListView滚动到底部
  if (_childScrollController.position.pixels >= _childScrollController.position.maxScrollExtent && !_childScrollController.position.outOfRange) {
    // 计算子组件超出底部的滚动偏移量，转移给父组件
    double overOffset = _childScrollController.position.pixels - _childScrollController.position.maxScrollExtent;
    if (overOffset > 0) {
      _parentScrollController.jumpTo(_parentScrollController.offset + overOffset);
    }
  }
  // 子ListView滚动到顶部
  if (_childScrollController.position.pixels <= _childScrollController.position.minScrollExtent && !_childScrollController.position.outOfRange) {
    // 计算子组件超出顶部的滚动偏移量，转移给父组件
    double overOffset = _childScrollController.position.minScrollExtent - _childScrollController.position.pixels;
    if (overOffset > 0) {
      _parentScrollController.jumpTo(_parentScrollController.offset - overOffset);
    }
  }
}

步骤3：修改现有子ListView代码 #

给你的子ListView绑定控制器，同时禁用回弹效果避免事件冲突：

Widget FreshProductsShow(double pageHeight, double pageWidth) {
  return Container(
    height: pageHeight / 1.3,
    width: pageWidth,
    child: ListView.builder(
      // 绑定子滚动控制器
      controller: _childScrollController,
      // 禁用Android/iOS默认回弹效果，避免边界多余事件干扰
      physics: const ClampingScrollPhysics(),
      itemCount: 10,
      itemBuilder: (context, index) {
        return Card(
          child: Container(
            width: pageWidth,
            decoration: BoxDecoration(
                color: Colors.white, borderRadius: BorderRadius.circular(10)),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              textDirection: TextDirection.rtl,
              children: [
                Image.asset(
                  "images/peper.png",
                  width: pageWidth / 4,
                  height: pageHeight / 8,
                ),
                Padding(
                  padding: EdgeInsets.only(left: pageWidth / 6.3),
                  child: Column(
                    children: [
                      Padding(
                        padding: EdgeInsets.only(
                            left: pageWidth / 10, top: pageHeight / 45),
                        child: AutoSizeText(
                          "peper",
                          style: TextStyle(
                              fontSize: pageHeight / 48,
                              fontWeight: FontWeight.bold,
                              color: Color(0xff54595F)),
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
            alignment: Alignment.centerRight,
          ),
          elevation: 5,
        );
      },
      scrollDirection: Axis.vertical,
    ),
  );
}

步骤4：绑定父滚动控制器 #

将_parentScrollController绑定到你外层的父可滚动组件上即可。

可选优化 #

如果需要更顺滑的滚动手感，可以将jumpTo替换为animateTo自定义动画参数；如果页面结构支持，也可以直接使用Flutter官方的NestedScrollView组件，它内置了嵌套滚动事件分发逻辑，不需要手动写监听代码，适配更省心。

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