Flutter使Perspective Page View无限循环

好的，如果你想让卷轴在左边也平滑的话.你只需任意设置LARGE NUMBER作为起点，就会感觉到INFINITE(像9万亿这样的大数字).然而，它不会无限期地滚动.

1. 设置某个较大的数字(例如:const largeInt = 9223372036854;)
2. 修改你的initState，如下所示

@override
void initState() {
  super.initState();
  holder = PageViewHolder(value: largeInt.toDouble());
  _controller = PageController(
    initialPage: largeInt,
    viewportFraction: fraction,
  );
  _controller.addListener(() {
    holder.setValue(_controller.page);
  });
}

和ProjectView人的完整代码

const largeInt = 9223372036854;

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

  @override
  ProjectsViewState createState() => ProjectsViewState();
}

class ProjectsViewState extends State<ProjectsView>
    with TickerProviderStateMixin {
  late PageViewHolder holder;

  late PageController _controller;
  double fraction = 0.50;

  @override
  void initState() {
    super.initState();
    holder = PageViewHolder(value: largeInt.toDouble());
    _controller = PageController(
      initialPage: largeInt,
      viewportFraction: fraction,
    );
    _controller.addListener(() {
      holder.setValue(_controller.page);
    });
  }

  int _currentPage = 2;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ChangeNotifierProvider<PageViewHolder>.value(
            value: holder,
            child: Column(
              children: [
                Flexible(
                  child: PageView.builder(
                    controller: _controller,
                    onPageChanged: (value) {
                      setState(() => _currentPage = value);
                    },
                    physics: const BouncingScrollPhysics(),
                    itemBuilder: (context, index) {
                      return ProjectsGalleryView(
                        number: index.toDouble(),
                        fraction: fraction,
                      );
                    },
                  ),
                ),
              ],
            )),
      ),
    );
  }
}

//上一次回答

这不是一个完美的解决方案，但要在left side as well上无限滚动，在_controller.addListener内加jumpToPage

首先，不要在Pageview.builder中包含itemCount或将其设置为null.

但是，即使将itemCount设置为null，它仍会在index为0时结束.

因此，在初始化PageController之后的initState中添加.

_controller.addListener(() {
  holder.setValue(_controller.page);
  final page = _controller.page;
  if (page == null) return;
  if (page < 2.01 && page > 1.99) {
    _controller.jumpToPage(10);
  }
});

通过在_controller.page介于1.99和2.01之间时添加_controller.jumpToPage(10),_pageController将再次将页面设置为10.

我把这个加到_controller.addListener中的原因是，如果你把它放在onPageChanged中，它会卡顿得很厉害，因为返回的value是int.

然而，即使我使用了Double来将影响降至最低，但当滚动速度真的很快时，它仍然会有一点卡顿，如果它非常快，它有可能无法工作.然而，这将始终适用于正常的逐页滚动.

你的ProjectView Widget的完整代码.

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

  @override
  ProjectsViewState createState() => ProjectsViewState();
}

class ProjectsViewState extends State<ProjectsView>
    with TickerProviderStateMixin {
  late PageViewHolder holder;

  late PageController _controller;
  double fraction = 0.50;

  @override
  void initState() {
    super.initState();
    holder = PageViewHolder(value: 2.0);
    _controller = PageController(initialPage: 2, viewportFraction: fraction);
    _controller.addListener(() {
      holder.setValue(_controller.page);
      final page = _controller.page;
      if (page == null) return;
      if (page < 2.01 && page > 1.99) {
        _controller.jumpToPage(10);
      }
    });
  }

  int currentPage = 2;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ChangeNotifierProvider<PageViewHolder>.value(
          value: holder,
          child: Flexible(
            child: PageView.builder(
              controller: _controller,
              onPageChanged: (value) {
                setState(() => currentPage = value);
              },
              physics: const BouncingScrollPhysics(),
              itemBuilder: (context, index) {
                return ProjectsGalleryView(
                  number: index.toDouble(),
                  fraction: fraction,
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}