Question

我制作了一个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
                                )
                            )
                        )
                    }
                )

Answer 1

您需要将Outer添加到a.txt b.txt c.txt中。然后，在hello a.txt hello b.txt hello c.txt上可以启动PageController，在这里您可以从一个页面跳转到另一个页面。像这样：

PageView

通过使用initState()的方式导入Timer.periodic()的方式。

Answer 2

对我来说，最有效的方法是实现动画控制器。 AnimationController和Animation。在页面视图中的StatefulWidget和page 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();
        });
  }
}

Answer 3

@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,
  );
});}

如何在不使用生成器的情况下延迟一定时间来自动滚动PageView？

3 个答案: