Flutter中PageView双滚动列表索引同步滚动问题求助

你遇到的问题是因为PageView默认会复用内部的滚动状态（包括当前页面索引），当你通过state.indexView切换不同的数据源时，PageView的Widget实例没有被重建，导致滚动位置在列表切换后会延续之前的状态，看起来两个列表共用了同一索引。

方案1：使用唯一Key让PageView重建 #

给PageView添加基于state.indexView的ValueKey，这样当indexView变化时，Flutter会认为这是一个全新的PageView，会重建其状态，从而为每个列表提供独立的滚动状态。

修改后的代码：

return PageView.builder(
  key: ValueKey(state.indexView), // 添加唯一Key
  scrollDirection: Axis.vertical,
  itemCount: category[state.indexView].length,
  itemBuilder: category[state.indexView][0].containsKey('video')
      ? (context2, index2) {
          return Stack(
            children: [
              VideoWidget(
                videoUrl: category[state.indexView][index2]['video'],
                asset: true,
                videoFile: File(''),
              ),
              if (category[state.indexView][index2].containsKey('image'))
                Center(child: Image(image: AssetImage(category[state.indexView][index2]['image']))),
              _postContent(d_height)
            ],
          );
        }
      : (context, index) {
          return Stack(
            children: [
              if (category[state.indexView][index].containsKey('image'))
                Center(child: Image(image: AssetImage(category[state.indexView][index]['image']))),
              _postContent(d_height)
            ],
          );
        });

方案2：为每个列表分配独立的PageController #

如果需要更精细地控制每个列表的滚动状态，可以为每个indexView对应的列表创建独立的PageController，这样每个列表的滚动状态完全隔离。

步骤1：在State类中初始化控制器 #

class _YourPageState extends State<YourPage> {
  Map<int, PageController> _pageControllers = {};

  @override
  void initState() {
    super.initState();
    // 为每个分类初始化PageController
    for (int i = 0; i < category.length; i++) {
      _pageControllers[i] = PageController();
    }
  }

  @override
  void dispose() {
    // 释放所有控制器资源
    _pageControllers.values.forEach((controller) => controller.dispose());
    super.dispose();
  }

  // ... 其他代码
}

步骤2：在PageView中使用对应控制器 #

return PageView.builder(
  controller: _pageControllers[state.indexView], // 使用对应列表的控制器
  scrollDirection: Axis.vertical,
  itemCount: category[state.indexView].length,
  itemBuilder: category[state.indexView][0].containsKey('video')
      ? (context2, index2) {
          return Stack(
            children: [
              VideoWidget(
                videoUrl: category[state.indexView][index2]['video'],
                asset: true,
                videoFile: File(''),
              ),
              if (category[state.indexView][index2].containsKey('image'))
                Center(child: Image(image: AssetImage(category[state.indexView][index2]['image']))),
              _postContent(d_height)
            ],
          );
        }
      : (context, index) {
          return Stack(
            children: [
              if (category[state.indexView][index].containsKey('image'))
                Center(child: Image(image: AssetImage(category[state.indexView][index]['image']))),
              _postContent(d_height)
            ],
          );
        });

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