首页 > 解决方案 > PageView 和 AnimateToPage - 如何动态动画到 Page 到 Flutter 中的滚动位置

问题描述

我有通过页面控制器成功滚动并动画到页面的卡片。现在我的问题是,即使它被正确迭代,如果我向右或向左滚动,它会让我回到起始位置,也就是 _currentPage=0。我希望系统动态知道,如果 0 是起始位置并且我手动滚动到第 3 个位置,我希望它转到第 4 个位置,而不是再次从第 0 个位置开始。同样,如果我向后滚动到第 6 个位置,我希望它从我滚动的位置向前而不是回到 0。有没有办法动态地实现这一点?

请参考我尝试添加手势检测器的 Timer.periodic 代码,但这不起作用,程序根本不会滚动。

 Timer _mytimer;
  bool _mytimerz = false;
  int _timerspeed = 15;
  int _currentPage = 0;
  bool _speedtime = false;
  PageController _pageController = PageController(
    initialPage: 0,
  );

  // timerforthisThis() {

  void initState() {
    super.initState();
    tests = [
      widget.label00,
      widget.label0,
      widget.label1,
      widget.label2,
      widget.label3,
      widget.label4,
      widget.label5,
      widget.label6,
      widget.label7,
      widget.label8,
      widget.label9,
      widget.label10,
      widget.label11,
      widget.label12,
      widget.label13,
      widget.label14,
      widget.label15,
      widget.label16,
      widget.label17,
      widget.label18,
      widget.label19,
      widget.label20,
      widget.label21,
      widget.label22,
      widget.label23,
      widget.label24,
      widget.label25,
      widget.label26,
      widget.label27,
      widget.label28,
      widget.label29,
      widget.label30,
      widget.label31,
      widget.label32,
      widget.label33,
      widget.label34,
      widget.label35,
      widget.label36,
      widget.label37,
    ];

    results = [];

    for (int i = 0; i < tests.length; i++) {
      if (widget.label00 != '') {
        results.add(widget.label00);
      }
      if (widget.label0 != '') {
        results.add(widget.label0);
      }
      if (widget.label1 != '') {
        results.add(widget.label1);
      }
      if (widget.label2 != '') {
        results.add(widget.label2);
      }
      if (widget.label3 != '') {
        results.add(widget.label3);
      }
      if (widget.label4 != '') {
        results.add(widget.label4);
      }
      if (widget.label5 != '') {
        results.add(widget.label5);
      }
      if (widget.label6 != '') {
        results.add(widget.label6);
      }
      if (widget.label7 != '') {
        results.add(widget.label7);
      }
      if (widget.label8 != '') {
        results.add(widget.label8);
      }
      if (widget.label9 != '') {
        results.add(widget.label9);
      }
      if (widget.label10 != '') {
        results.add(widget.label10);
      }
      if (widget.label11 != '') {
        results.add(widget.label11);
      }
      if (widget.label12 != '') {
        results.add(widget.label12);
      }
      if (widget.label13 != '') {
        results.add(widget.label13);
      }
      if (widget.label14 != '') {
        results.add(widget.label14);
      }
      if (widget.label15 != '') {
        results.add(widget.label15);
      }
      if (widget.label16 != '') {
        results.add(widget.label16);
      }
      if (widget.label17 != '') {
        results.add(widget.label17);
      }
      if (widget.label18 != '') {
        results.add(widget.label18);
      }
      if (widget.label19 != '') {
        results.add(widget.label19);
      }
      if (widget.label20 != '') {
        results.add(widget.label20);
      }
      if (widget.label21 != '') {
        results.add(widget.label21);
      }
      if (widget.label22 != '') {
        results.add(widget.label22);
      }
      if (widget.label23 != '') {
        results.add(widget.label23);
      }
      if (widget.label24 != '') {
        results.add(widget.label24);
      }
      if (widget.label25 != '') {
        results.add(widget.label25);
      }

      if (widget.label26 != '') {
        results.add(widget.label26);
      }
      if (widget.label27 != '') {
        results.add(widget.label27);
      }
      if (widget.label28 != '') {
        results.add(widget.label28);
      }
      if (widget.label29 != '') {
        results.add(widget.label29);
      }
      if (widget.label30 != '') {
        results.add(widget.label30);
      }
      if (widget.label31 != '') {
        results.add(widget.label31);
      }
      if (widget.label32 != '') {
        results.add(widget.label32);
      }
      if (widget.label33 != '') {
        results.add(widget.label33);
      }
      if (widget.label34 != '') {
        results.add(widget.label34);
      }
      if (widget.label35 != '') {
        results.add(widget.label35);
      }
      if (widget.label36 != '') {
        results.add(widget.label36);
      }
      if (widget.label37 != '') {
        results.add(widget.label37);
      }
    }

    Timer.periodic(Duration(seconds: 5), (Timer timer) {
      // if (_mytimerz = true) {
      //   timer.cancel();
      // }

      // if (_speedtime = false) {
      //   Timer.periodic(Duration(seconds: 2), (timer) {});

      if (_currentPage < results.length) {
        _currentPage++;
        // _currentPage++;
      }
      // _speedtime = true;
      // timer.cancel();

      // } else {
      // GestureDetector(onPanUpdate: (details) {
      //   if (details.delta.dx > 0 || details.delta.dx < 0) {
      //     print("right");
      //   }
      // });
      //   _currentPage = _currentPage;
      //   // 0
      // }

      _pageController
          .
          // animateTo(
          // _pageController.,

          // duration: , curve: curve)
          animateToPage(
        // results.length,
        _currentPage = _currentPage,
        duration:
            //  _speedtime
            // ?
            // Duration(milliseconds: 0),
            // :
            Duration(milliseconds: 350),
        curve: Curves.easeIn,
      );
    }
        // );

        // );
        // }
        );
  }

标签: fluttermobileflutter-layoutflutter-animationflutter-pageview

解决方案


推荐阅读