Flutter PageView实现双向（左右互滑）滚动的问题求助

要解决PageView在索引0时无法反向滚动的问题，最可靠的方式是实现无限循环滚动，通过以下步骤修改代码：

1. 调整PageController初始页与核心变量 #

将PageController的初始页设置为一个较大的中间值（比如1000），同时定义图片总数常量（根据你的实际图片数量修改）：

// 定义你的图片总数
final int picsCount = 5;

@override
void initState() {
  super.initState();
  picIndexNotifier = ValueNotifier<int>(0);
  // 移除isReverseNotifier，无需切换滚动方向
  myImagesController = PageController(
    initialPage: 1000, // 初始页设为大数值，规避边界滚动限制
    viewportFraction: 1.0,
  );
  // 添加滚动监听，处理索引重置
  myImagesController.addListener(_handlePageScroll);
}

2. 修改itemBuilder实现循环显示 #

在itemBuilder中通过取模运算获取实际图片索引，确保滚动时循环加载图片：

itemBuilder: (context, picIndex) {
  // 计算实际图片索引，实现循环逻辑
  final int actualIndex = picIndex % picsCount;
  return GestureDetector(
    onTap: () {
      // 点击逻辑
    },
    child: SizedBox(
      width: deviceHorizantalSize * 69,
      child: Column(
        children: [
          Stack(
            children: [
              // 根据实际索引加载对应图片
              Image.asset(
                'assets/images/pic${actualIndex + 1}.png',
                height: deviceVerticalSize * 25,
              ),
            ],
          ),
        ],
      ),
    ),
  );
},

3. 添加滚动监听，重置索引避免溢出 #

添加监听函数，当滚动到距离初始页过远时，重置PageController的位置，保持索引在合理范围：

void _handlePageScroll() {
  final currentPage = myImagesController.page?.round() ?? 1000;
  // 当当前页偏离初始值超过2倍图片总数时，重置到中间位置
  if ((currentPage - 1000).abs() >= picsCount * 2) {
    myImagesController.jumpToPage(1000 + (currentPage % picsCount));
  }
  // 更新当前显示的实际图片索引
  picIndexNotifier.value = currentPage % picsCount;
  funcs.printout_to_console('当前实际图片索引 - ${picIndexNotifier.value}');
}

4. 移除不必要的reverse相关逻辑 #

删除isReverseNotifier以及对应的ValueListenableBuilder结构，无限循环滚动不需要切换滚动方向。

完整修改后的代码 #

import 'package:flutter/material.dart';
import 'package:qurani_piroz/Files/Functions.dart' as funcs;
import 'package:qurani_piroz/Files/Constants.dart' as consts;
import 'package:qurani_piroz/Services/Themes/Themes_Model.dart';
import 'package:qurani_piroz/Services/Widget_Size_Configuration/size_config.dart';

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

  @override
  State<getImagesSlides> createState() => _getImagesSlidesState();
}

class _getImagesSlidesState extends State<getImagesSlides> {
  late PageController myImagesController;
  late ValueNotifier<int> picIndexNotifier;
  // 定义图片总数，根据实际数量修改
  final int picsCount = 5;

  @override
  void initState() {
    super.initState();
    picIndexNotifier = ValueNotifier<int>(0);
    myImagesController = PageController(
      initialPage: 1000,
      viewportFraction: 1.0,
    );
    myImagesController.addListener(_handlePageScroll);
  }

  void _handlePageScroll() {
    final currentPage = myImagesController.page?.round() ?? 1000;
    // 重置索引，避免数值过大
    if ((currentPage - 1000).abs() >= picsCount * 2) {
      myImagesController.jumpToPage(1000 + (currentPage % picsCount));
    }
    // 更新实际显示的图片索引
    picIndexNotifier.value = currentPage % picsCount;
    funcs.printout_to_console('当前实际图片索引 - ${picIndexNotifier.value}');
  }

  @override
  void dispose() {
    picIndexNotifier.dispose();
    myImagesController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: deviceVerticalSize * 25,
      width: double.infinity,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(
          consts.mainBorderRadius,
        ),
        color: context.theme.colorScheme.onPrimary,
      ),
      margin: EdgeInsets.fromLTRB(
        consts.leftSideMargin,
        0,
        consts.rightSideMargin,
        0,
      ),
      child: Center(
        child: PageView.builder(
          pageSnapping: true,
          controller: myImagesController,
          onPageChanged: (int newPicIndex) {
            funcs.printout_to_console('pageview - 原始索引 - $newPicIndex');
          },
          itemBuilder: (context, picIndex) {
            final int actualIndex = picIndex % picsCount;
            return GestureDetector(
              onTap: () {
                // 点击逻辑
              },
              child: SizedBox(
                width: deviceHorizantalSize * 69,
                child: Column(
                  children: [
                    Stack(
                      children: [
                        Image.asset(
                          'assets/images/pic${actualIndex + 1}.png',
                          height: deviceVerticalSize * 25,
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

原理说明 #

• 大数值初始页让PageView在左右方向都有足够滚动空间，不会触发原生边界限制。
• 取模运算将无限增长的PageView索引映射到有限的图片列表，实现循环显示。
• 滚动监听重置索引，避免PageController的索引无限增大导致性能问题，同时保持视觉上的无缝循环。

内容的提问来源于stack exchange，提问作者Salar Azad