flutter 如何自动滚动一个PageView与一些延迟,是不使用构建器?

qco9c6ql  于 2023-05-19  发布在  Flutter
关注(0)|答案(3)|浏览(204)

我已经做了一个PageView,作为一个图像轮播。我如何让它在Flutter中的一些延迟后在页面之间无限地自动滚动?

new PageView(
    children: List<Widget> {
        new Container(
            decoration: BoxDecoration(
                image: DecorationImage(image: new AssetImage(images[0]), 
                fit: BoxFit.cover
                )
            )
        ),
        new Container(
            decoration: BoxDecoration(
                image: DecorationImage(image: new AssetImage(images[1]), 
                fit: BoxFit.cover
                )
            )
        ),
        new Container(
            decoration: BoxDecoration(
                image: DecorationImage(image: new AssetImage(images[2]), 
                fit: BoxFit.cover
                )
            )
        )
    }
)
ubof19bj

ubof19bj1#

您需要将PageController添加到PageView。然后在initState()上你可以启动一个Timer.periodic(),你只需要从一个页面跳到另一个页面。就像这样:
注意:当处理页面或其他事件时,您必须取消计时器。

int _currentPage = 0;

'''
Timer? _timer;
'''

Timer _timer;
PageController _pageController = PageController(
  initialPage: 0,
);

@override
void initState() {
  super.initState();
  _timer = Timer.periodic(Duration(seconds: 5), (Timer timer) {
    if (_currentPage < 2) {
      _currentPage++;
    } else {
      _currentPage = 0;
    }

    _pageController.animateToPage(
      _currentPage,
      duration: Duration(milliseconds: 350),
      curve: Curves.easeIn,
    );
  });
}

  @override
  void dispose() {
    super.dispose();
    _timer?.cancel();
  }

@override
Widget build(BuildContext context) {
  return PageView(
    controller: _pageController,
    children: [
      Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: new AssetImage(images[0]), 
            fit: BoxFit.cover,
          ),
        ),
      ),
      Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: new AssetImage(images[1]), 
            fit: BoxFit.cover,
          ),
        ),
      ),
      Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: new AssetImage(images[2]), 
            fit: BoxFit.cover,
          ),
        ),
      ),
    ],
  );
}

顺便说一下,你需要导入'dart:async'来使用Timer

drkbr07n

drkbr07n2#

@GaboBrandX的答案是正确的,所以我添加了一些代码来反转动画,例如,它将从0,1,2页开始动画,当到达终点时,它将反转到2,1,0。

final PageController _pageController = PageController(initialPage: 0);
 int _currentPage = 0;

bool end = false;
@override
void initState() {
super.initState();
Timer.periodic(Duration(seconds: 2), (Timer timer) {
  if (_currentPage == 2) {
    end = true;
  } else if (_currentPage == 0) {
    end = false;
  }

  if (end == false) {
    _currentPage++;
  } else {
    _currentPage--;
  }

  _pageController.animateToPage(
    _currentPage,
    duration: Duration(milliseconds: 1000),
    curve: Curves.easeIn,
  );
});}
vuktfyat

vuktfyat3#

对我来说最有效的方法是实现动画控制器。AnimationControllerAnimation。页面视图中的StatefulWidgetpage controller内部。

import 'package:flutter/material.dart';

class ChangePageViewAuto extends StatefulWidget {
  @override
  _ChangePageViewAutoState createState() => _ChangePageViewAutoState();
}

class _ChangePageViewAutoState extends State<ChangePageViewAuto>
    with SingleTickerProviderStateMixin {

  //declare the variables
  AnimationController _animationController;
  Animation<double> _nextPage;
  int _currentPage = 0;
  PageController _pageController = PageController(initialPage: 0);

  @override
  void initState() {
    super.initState();
    //Start at the controller and set the time to switch pages
    _animationController =
        new AnimationController(vsync: this, duration: Duration(seconds: 10));
    _nextPage = Tween(begin: 0.0, end: 1.0).animate(_animationController);

    //Add listener to AnimationController for know when end the count and change to the next page
    _animationController.addListener(() {
      if (_animationController.status == AnimationStatus.completed) {
        _animationController.reset(); //Reset the controller
        final int page = 4; //Number of pages in your PageView
        if (_currentPage < page) {
          _currentPage++;
          _pageController.animateToPage(_currentPage,
              duration: Duration(milliseconds: 300), curve: Curves.easeInSine);
        } else {
          _currentPage = 0;
        }
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    _animationController.forward(); //Start controller with widget
          print(_nextPage.value);
    return PageView.builder(
        itemCount: 4,
        scrollDirection: Axis.horizontal,
        controller: _pageController,
        onPageChanged: (value) {
          //When page change, start the controller 
          _animationController.forward();
        },
        itemBuilder: (BuildContext context, int index) {
          
          return Container();
        });
  }
}

相关问题