如何使 PageView 自动播放并且每个项目都有特定的持续时间？

Question

我想PageView自动播放并且每个项目都有特定的持续时间

我知道如何PageView自动播放所有项目的固定持续时间，但我想让每个项目都有持续时间

我的代码

 
  int _currentPage = 0;
  PageController _pageController = PageController(
    initialPage: 0,
  );
  
  @override
  void initState() {
    super.initState();
    Timer.periodic(Duration(seconds: 5), (Timer timer) {
      return setState(() {
        if (_currentPage < 2) {
          _currentPage++;
        } else {
          _currentPage = 0;
        }
        _pageController.animateToPage(
          _currentPage,
          duration: Duration(milliseconds: 350),
          curve: Curves.easeIn,
        );
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _pageController,
        children: [
          Container(
            color: Colors.lightBlue,
          ),
          Container(
            color: Colors.red,

          ),
          Container(
            color: Colors.green,

          ),
        ],
      ),
    );
  }

我想要的是让 Timer.periodic 中的 Duration 是可变的，就像在我的代码中我希望它是 {5,10,15}...

我不能，因为 Timer.periodic 函数在 initState 函数中

Answer 1

我会在你的情况下使用 Future.delayed，

这里有一个例子，它是硬编码的，但你可以根据你需要多少不同的持续时间来优化它：

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

class Sandbox extends StatefulWidget {
  @override
  _SandboxState createState() => _SandboxState();
}

class _SandboxState extends State<Sandbox> {

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

  @override
  void initState() {
    super.initState();
    Timer.periodic(Duration(seconds: 35), (Timer timer)


 {
      Future.delayed(const Duration(seconds: 5), () {
        // Here you can write your code
        setState(() {
          // Here you can write your code for open new view
          if (_currentPage < 2) {
            _currentPage++;
          } else {
            _currentPage = 0;
          }
          _pageController.animateToPage(
            _currentPage,
            duration: Duration(milliseconds: 350),
            curve: Curves.easeIn,
          );
        });
      });
      Future.delayed(const Duration(seconds: 15), () {
        // Here you can write your code
        setState(() {
          // Here you can write your code for open new view
          if (_currentPage < 2) {
            _currentPage++;
          } else {
            _currentPage = 0;
          }
          _pageController.animateToPage(
            _currentPage,
            duration: Duration(milliseconds: 350),
            curve: Curves.easeIn,
          );
        });
      });
      Future.delayed(const Duration(seconds: 30), () {
        // Here you can write your code
        setState(() {
          // Here you can write your code for open new view
          if (_currentPage < 2) {
            _currentPage++;
          } else {
            _currentPage = 0;
          }
          _pageController.animateToPage(
            _currentPage,
            duration: Duration(milliseconds: 350),
            curve: Curves.easeIn,
          );
        });
      });
    });
  }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _pageController,
        children: [
          Container(
            color: Colors.lightBlue,
          ),
          Container(
            color: Colors.red,

          ),
          Container(
            color: Colors.green,

          ),
        ],
      ),
    );
  }
}

Answer 2

我找到了这个问题的解决方案

Color myColor = Colors.orange;
List<int> list = [5,10,20];

Future fun ()async{
  for(int i =0 ; i  < list.length ; i ++){
    await Future.delayed( Duration(seconds: list[i]), () {
     setState(() {
       if(i  == 0){
         myColor = Colors.green;
       } else if (i  == 1){
         myColor = Colors.blue;
       }
       else if (i  == 2){
         myColor = Colors.yellowAccent;
       }
     });
    });
  }
}

  @override
  void initState() {
    super.initState();
       fun();
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
            color: myColor),
    );
  }

如何使 PageView 自动播放并且每个项目都有特定的持续时间？

How to make PageView autoplay and each item has a specific duration?

mobile

dart

flutter