Flutter 轮播图封装

Flutter 轮播图封装

PageView组件

支持滚动、懒加载、按需渲染，可以用来实现分页加载、轮播图，可以通过scrollDirection 设置滚动的方向。

效果图

flutter PageView 实现轮播图

实现

 @override
  void initState() {
    super.initState();
    // 组件初始化时启动定时器（可选）
    _setTimer();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  List<int> _list = List.generate(10, (index) => index + 1);
  int _currentIndex = 0;
  PageController _pageController = PageController();
  Timer? _timer;

  /// 设置定时器
  void _setTimer() {
    _timer?.cancel();
    _timer = Timer.periodic(Duration(seconds: 3), (timer) {
    // 3s 自动轮播
      _currentIndex += 1;
      if (_currentIndex == _list.length) {
        _currentIndex = 0;
      }
      _jumpPage(_currentIndex);
      setState(() {});
    });
  }

  void _cancelTimer() {
    _timer?.cancel();
  }

  void _jumpPage(int index) {
    // 跳转到指定页面，动画平滑过渡
    _pageController.animateToPage(index,
        duration: const Duration(milliseconds: 300), curve: Curves.linear).then((value) {
        	// 重启定时器
          _setTimer();
        },);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Stack(
        children: [
          PageView(
            onPageChanged: (index) {}, // 也可以在此处设置_curIndex = index, 这样左右滑动也可以跳转，但是指示器动画不好看
            controller: _pageController, // 控制器
            children: List.generate(_list.length, (index) { // 轮播
              return Container(
                alignment: Alignment.center,
                child: Text(
                  "第${index + 1}轮播图",
                  style: const TextStyle(color: Colors.white),
                ),
              );
            }),
          ),
          Positioned(
              bottom: 10,
              left: 0,
              right: 0,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: List.generate(_list.length, (index) {
                  return GestureDetector(
                    onTap: () {
                     // 点击指示器，跳转到对应的页面
                      _cancelTimer(); // 取消定时器， 重置计时时间
                      _jumpPage(index);
                      setState(() {
                        _currentIndex = index;
                      });
                    },
                    child: Container(
                      margin: const EdgeInsets.only(left: 10),
                      height: 20,
                      width: 20,
                      decoration: BoxDecoration(
                          borderRadius:
                              const BorderRadius.all(Radius.circular(20)),
                          color: _currentIndex == index
                              ? Colors.red
                              : Colors.white), // 指示器颜色判读
                    ),
                  );
                }),
              ))
        ],
      ),
    );
};