首页 > 解决方案 > Flutter:带计时器的 PageView

问题描述

我正在使用一个计时器在 PageView 上工作,该计时器会在 3 到 5 秒内自动滑动每一页。这是我使用的代码:

import 'dart:async';

import 'package:flutter/material.dart';

import '../models/mod_featured.dart';

class WidgetFeatured extends StatefulWidget {
  @override
  _WidgetFeaturedState createState() => _WidgetFeaturedState();
}

class _WidgetFeaturedState extends State<WidgetFeatured> {
  int _currentPage = 0;

  final PageController _pageController = PageController(
    initialPage: 0,
  );

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

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

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

  _onPageChanged(int index) {
    setState(() {
      _currentPage = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: PageView.builder(
        physics: BouncingScrollPhysics(),
        scrollDirection: Axis.horizontal,
        controller: _pageController,
        onPageChanged: _onPageChanged,
        itemBuilder: (context, index) => WidgetFeaturedItem(index),
        itemCount: featuredList.length,
      ),
    );
  }
}

class WidgetFeaturedItem extends StatelessWidget {
  final int indexItem;

  WidgetFeaturedItem(this.indexItem);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(20),
      color: featuredList[indexItem].color,
      width: double.infinity,
      height: 180,
      child: Stack(
        children: <Widget>[
          Row(
            children: <Widget>[
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    featuredList[indexItem].header,
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                  Text(
                    featuredList[indexItem].subHeader,
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                  FlatButton(
                    onPressed: () {},
                    padding: const EdgeInsets.symmetric(
                      horizontal: 15,
                      vertical: 3,
                    ),
                    color: Theme.of(context).primaryColor,
                    child: Text(
                      'Order now',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 12,
                        fontWeight: FontWeight.w100,
                      ),
                    ),
                  ),
                ],
              ),
              Image.asset(
                featuredList[indexItem].imgUrl,
                height: 120,
                width: 120,
                //width: 335,
                fit: BoxFit.cover,
              ),
            ],
          )
        ],
      ),
    );
  }
}

但是当我运行和调试时。它一直在我的调试控制台上显示这些错误/警告。 调试控制台图像

这些错误/警告是否会导致内存泄漏,从而降低应用程序的速度?或者这是正常的?什么可能导致这些类型的错误/警告?

非常感谢任何替代解决方案或帮助。谢谢!

标签: fluttermobiletimer

解决方案


首先使用其 hasClients 属性检查 scrollController 是否附加到滚动视图。

if(_pageController.hasClients){
    _pageController.animateToPage(
        _currentPage,
        duration: Duration(milliseconds: 300),
        curve: Curves.easeIn,
    );
}

推荐阅读