【问题标题】:Flutter: PageView with timerFlutter:带计时器的 PageView
【发布时间】:2020-04-27 02:50:06
【问题描述】:

我正在使用一个计时器来处理 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,
              ),
            ],
          )
        ],
      ),
    );
  }
}

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

这些错误/警告会导致内存泄漏导致应用程序变慢吗?或者这是正常的? 什么可能导致这些类型的错误/警告?

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

【问题讨论】:

    标签: flutter mobile timer


    【解决方案1】:

    你试过flutter_swiper吗? 它有autoplay 参数,在我看来它应该满足您的需求。

    【讨论】:

    • 感谢您的回复。我会试试这个。但我想尽可能使用我自己的代码。
    【解决方案2】:

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

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

    【讨论】:

    • 嗨,马哈茂德。虽然此代码可能会回答问题,但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。 How to Answer。亲切的问候。
    猜你喜欢
    • 2021-10-02
    • 2020-07-30
    • 1970-01-01
    • 2021-02-09
    • 2020-04-11
    • 1970-01-01
    • 2019-05-23
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多