使用 Flutter PageView 小部件双向滚动（从右到左 <=> 从左到右）

Question

我在 flutter 中使用“PageView”小部件来水平显示图像列表 - 一次一张图像；我已经实现了下面的代码，它工作正常，但是当尝试从右向左滚动并且索引为 0 时它不会滚动，因为默认情况下该小部件构建为在单个方向上工作。

我尝试在用户执行滑动手势时以编程方式使用“reverse”参数反转滚动方向，但无法弄清楚。

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;
  late ValueNotifier<bool> isReverseNotifier;

  @override
  void initState() {
    super.initState();
    picIndexNotifier = ValueNotifier<int>(0);
    isReverseNotifier = ValueNotifier<bool>(false);
    myImagesController = PageController(
      initialPage: 1,
      viewportFraction: 1.0,
    );
    WidgetsBinding.instance.addPersistentFrameCallback((timeStamp) {
      checkPageView();
    });
  }

  checkPageView() {
    myImagesController.addListener(() {});
  }

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

  int getPicIndex(int adIndex, int adsCount) {
    return adIndex % adsCount;
  }

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder(
        valueListenable: isReverseNotifier,
        builder: (context, isReverseValue, _) {
          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,
                reverse: isReverseValue,
                controller: myImagesController,
                onPageChanged: (int newPicIndex) {
                  funcs.printout_to_console('pageview - index - $newPicIndex');
                  picIndexNotifier.value = newPicIndex;
                },
                itemBuilder: (context, adIndex) {
                  return GestureDetector(
                    onTap: () {
                      //
                    },
                    child: SizedBox(
                      width: deviceHorizantalSize * 69,
                      child: Column(
                        children: [
                          Stack(
                            children: [
                              Image.asset(
                                'assets/images/pic5.png',
                                height: deviceVerticalSize * 25,
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  );
                },
              ),
            ),
          );
        });
  }
}

我还尝试使用 'controller.addListener(() {})' 方法来检测何时使用 'PageView' 小部件 - 它通常仅在指定的滚动方向上检测，因此在索引 0 处并沿相反方向滚动，然后“addListender”不会检测到任何东西。

任何有关如何实现这一目标的建议将不胜感激。

Answer 1

要向后滚动，即使索引为 0，您也可以使用

loop_page_view

包：

import 'package:flutter/material.dart';
import 'package:loop_page_view/loop_page_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Loop Page View Demo'),
        ),
        body: Center(
          child: LoopPageView.builder(
            itemCount: 10,
            itemBuilder: (_, index) {
              return Card(
                child: Center(
                  child: Text('$index'),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}