Flutter循环轮播插件loop_page_view的使用

loop_page_view是一个增强版的Flutter PageView.builder，它支持双向无限滚动。通过自定义的LoopPageController控制器，可以实现页面之间的动画跳跃，并且可以根据需要配置滚动和循环行为。

使用方法

要使用loop_page_view，首先需要将其导入到项目中：

dependencies:
  loop_page_view: ^1.2.5

然后在Dart文件中导入包：

import 'package:loop_page_view/loop_page_view.dart';

LoopPageView的工作方式与PageView.builder类似，但必须指定一个项数（itemCount）以及使用LoopPageController作为控制器。LoopPageController类似于PageController，但它能正确处理LoopPageView的无限滚动特性。

此外，LoopPageController添加了一个新的方法animateJumpToPage，可以在不构建中间页面的情况下动画跳转到任何页面（前提是viewportFraction设置为1.0）。可以通过更新LoopPageViewController.scrollMode来设置动画的方向：

• LoopScrollMode.shortest: 动画方向是最短路径。
• LoopScrollMode.forwards: 总是向前动画。
• LoopScrollMode.backwards: 总是向后动画。

还可以通过设置LoopPageViewController的LoopActivationMode来控制何时开始无限循环：

• LoopActivationMode.immediate: 在LoopPageView启动后立即触发无限循环。
• LoopActivationMode.afterFirstLoop: 在完成第一次完整前向循环后触发无限循环。
• LoopActivationMode.forwardOnly: 只启用向前无限滚动，阻止向后循环。

示例代码

下面是一个完整的示例demo，展示了如何使用loop_page_view创建一个具有颜色卡片的无限循环轮播图：

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

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

final Set<MaterialColor> colors = {
  Colors.blueGrey,
  Colors.blue,
  Colors.cyan,
  Colors.green,
  Colors.yellow,
  Colors.orange,
  Colors.red,
  Colors.purple,
};

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final List<bool> isSelected =
      colors.map((e) => e == colors.last ? true : false).toList();
  LoopScrollMode selectedScrollMode = LoopScrollMode.shortest;
  final LoopPageController controller = LoopPageController(
      scrollMode: LoopScrollMode.shortest,
      activationMode: LoopActivationMode.immediate);

  @override
  Widget build(BuildContext context) {
    final int selectedIndex = isSelected.indexOf(
      isSelected.firstWhere((element) => element == true),
    );

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Loop Page View Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                  "Animate mode is set to ${selectedScrollMode.toString().split('.').last}"),
              SizedBox(
                height: 80,
                child: LoopPageView.builder(
                  controller: controller,
                  itemCount: colors.length,
                  itemBuilder: (_, index) {
                    return Card(
                      color: colors.elementAt(index),
                      child: Center(
                        child: Text('$index'),
                      ),
                    );
                  },
                ),
              ),
              FittedBox(
                child: ToggleButtons(
                  children: <Widget>[
                    for (int index = 0; index < isSelected.length; index++)
                      Text('$index'),
                  ],
                  onPressed: (int index) {
                    setState(() {
                      for (int buttonIndex = 0;
                          buttonIndex < isSelected.length;
                          buttonIndex++)
                        if (buttonIndex == index)
                          isSelected[buttonIndex] = true;
                        else
                          isSelected[buttonIndex] = false;
                    });
                  },
                  isSelected: isSelected,
                ),
              ),
              ElevatedButton(
                child: Text('Animate to $selectedIndex'),
                onPressed: () {
                  controller.animateToPage(selectedIndex,
                      duration: Duration(milliseconds: 400),
                      curve: Curves.easeIn);
                },
              ),
              ElevatedButton(
                child: Text('Jump to $selectedIndex'),
                onPressed: () {
                  controller.jumpToPage(selectedIndex);
                },
              ),
              ElevatedButton(
                child: Text('Animate jump to $selectedIndex'),
                onPressed: () {
                  controller.animateJumpToPage(selectedIndex,
                      duration: Duration(milliseconds: 400),
                      curve: Curves.easeIn);
                },
              ),
              ElevatedButton(
                child: Text("Change mode to ${(() {
                  switch (selectedScrollMode) {
                    case LoopScrollMode.shortest:
                      return 'forwards';
                    case LoopScrollMode.forwards:
                      return 'backwards';
                    case LoopScrollMode.backwards:
                      return 'shortest';
                  }
                })()}"),
                onPressed: () {
                  setState(() {
                    switch (selectedScrollMode) {
                      case LoopScrollMode.shortest:
                        selectedScrollMode = LoopScrollMode.forwards;
                        break;
                      case LoopScrollMode.forwards:
                        selectedScrollMode = LoopScrollMode.backwards;
                        break;
                      case LoopScrollMode.backwards:
                        selectedScrollMode = LoopScrollMode.shortest;
                        break;
                    }
                    controller.scrollMode = selectedScrollMode;
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这个示例展示了一个带有颜色卡片的无限循环轮播图，用户可以通过按钮控制页面的切换和动画模式的改变。希望这个例子能帮助你更好地理解和使用loop_page_view插件。