Flutter中如何让ListView在滑动时保持子项的滚动位置？

最简单的办法是给ImageGallery包裹一个AutomaticKeepAliveClientMixin并正确实现wantKeepAlive

class ImageGallery extends StatefulWidget {

  final List images;

  

  const ImageGallery({Key? key, required this.images}) : super(key: key);



  @override

  _ImageGalleryState createState() => _ImageGalleryState();

}



class _ImageGalleryState extends State with AutomaticKeepAliveClientMixin {

  ScrollController _scrollController = ScrollController();



  @override

  bool get wantKeepAlive => true;



  @override

  Widget build(BuildContext context) {

    super.build(context); // 必须调用super.build

    return Container(

      height: 100,

      child: ListView.builder(

        controller: _scrollController,

        scrollDirection: Axis.horizontal,

        itemCount: widget.images.length,

        itemBuilder: (context, index) {

          return Image.network(widget.images[index]);

        },

      ),

    );

  }



  @override

  void dispose() {

    _scrollController.dispose();

    super.dispose();

  }

}

这个问题挺常见的，主要是因为每次父级 ListView 滚动时，子项会被重新构建，导致子级的滚动状态丢失。用 UniqueKey() 或 ValueKey() 并不能解决这个问题，因为它们只是标识组件身份，无法保存滚动状态。

要优化一下，可以用 PageStorageKey 来持久化每个子项的滚动位置。这个 Key 是专门用来保存滚动、表单等状态的，完美适合这种场景。

修改你的代码如下：

ListView.builder(

  itemCount: chats.length,

  itemBuilder: (context, index) {

    return ImageGallery(

      images: chats[index].imageUrls,

      key: PageStorageKey<int>(index), // 重点在这

    );

  },

)

同时，确保你的 ImageGallery 组件使用了 ScrollController，并且没有在重建时创建新的控制器。如果 ImageGallery 内部有自己的 ListView 或 PageView，记得这样写：

class ImageGallery extends StatefulWidget {

  final List<String> images;



  const ImageGallery({

    required this.images,

    required Key key,

  }) : super(key: key);



  @override

  _ImageGalleryState createState() => _ImageGalleryState();

}



class _ImageGalleryState extends State<ImageGallery> with AutomaticKeepAliveClientMixin {

  final ScrollController _controller = ScrollController(); // 单例控制器



  @override

  Widget build(BuildContext context) {

    super.build(context);

    return ListView.builder(

      controller: _controller, // 使用单例控制器

      itemCount: widget.images.length,

      itemBuilder: (context, index) {

        return Image.network(widget.images[index]);

      },

    );

  }



  @override

  bool get wantKeepAlive => true; // 启用保持状态

}

这样就能保证每个子项的滚动位置不会丢失了。注意，AutomaticKeepAliveClientMixin 只是辅助，关键是 PageStorageKey 和单例的 ScrollController 配合使用。

试试看吧，应该能搞定！