Как сделать автозапуск при просмотре страниц, и каждый элемент имеет определенную продолжительность?

#flutter #dart #mobile

#flutter #dart #Мобильный

Вопрос:

Я хочу сделать 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,

          ),
        ],
      ),
    );
  }
  

Я хочу, чтобы Duration in Timer.periodic изменялся, как в моем коде, который я хочу, чтобы это было {5,10,15}

Я не могу, потому Timer.periodic что функция в initState функции

Ответ №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,

          ),
        ],
      ),
    );
  }
}
  

Ответ №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),
    );
  }