Flutter中嵌套ListView的GridView如何接收滚动事件实现无限加载？

我之前也碰到过一模一样的坑！你这个问题的核心原因很明确：当GridView作为ListView的子组件时，它默认不会拥有独立的滚动行为——滚动事件会被外层的ListView完全接管，所以你给GridView设置的ScrollController自然就监听不到任何滚动动作了。之前它作为独立页面组件能正常工作，是因为那时它占据了整个页面的滚动空间，滚动事件由自己处理。

下面给你两个可行的解决方案，你可以根据需求选择：

方案一：让外层ListView统一处理滚动（推荐，体验更连贯） #

这种方式下，我们把滚动监听移到外层ListView的ScrollController上，同时让GridView放弃自己的滚动能力，只负责展示内容：

1. 在UserProfile的State里创建并管理ScrollController：

class _UserProfileState extends State<UserProfile> {
  final _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_onScroll);
  }

  void _onScroll() {
    // 在这里检测是否滚动到底部，实现无限加载
    if (_scrollController.position.pixels >= _scrollController.position.maxScrollExtent - 200) {
      // 加载下一批数据的逻辑
    }
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      controller: _scrollController,
      children: [
        // User avatar
        // User name
        // Action button
        TileGallery(userId: widget.userId),
      ],
    );
  }
}

2. 修改TileGallery里的GridView配置，让它自适应内容且不处理滚动：

class _TileGalleryState extends State<TileGallery> {
  // 这里可以移除原来的_scrollController了
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      shrinkWrap: true, // 让GridView根据内容高度自适应
      physics: const NeverScrollableScrollPhysics(), // 禁用自身滚动
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 8,
        mainAxisSpacing: 8,
      ),
      itemCount: // 你的数据长度,
      itemBuilder: (context, index) {
        // 你的Tile组件
      },
    );
  }
}

方案二：让GridView拥有独立滚动空间（适合需要局部滚动的场景） #

如果你确实需要GridView自己滚动（比如外层ListView内容很多，GridView需要固定高度独立滚动），那就要给GridView设置固定高度，让它能拥有自己的滚动上下文：

class _TileGalleryState extends State<TileGallery> {
  final _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_onScroll);
  }

  void _onScroll() {
    // 现在这个方法就能正常触发了
    if (_scrollController.position.pixels >= _scrollController.position.maxScrollExtent - 100) {
      // 加载下一批数据
    }
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 用SizedBox给GridView固定高度
    return SizedBox(
      height: 400, // 根据你的需求设置合适高度
      child: GridView.builder(
        controller: _scrollController,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 8,
          mainAxisSpacing: 8,
        ),
        itemCount: // 数据长度,
        itemBuilder: (context, index) {
          // Tile组件
        },
      ),
    );
  }
}

这个时候外层ListView的primary属性可以保持默认（true），不需要额外修改，因为GridView已经有了自己的滚动区域，和外层互不干扰。

内容的提问来源于stack exchange，提问作者Chen Li Yong