Flutter的轮播怪异行为

时间:2018-11-09 19:42:23

标签: flutter

我需要一个小部件的轮播,其中将包含一些文本,每个小部件的图像以及点导航应显示在底部。另外,轮播和点导航之间应该有空间,因为我需要添加一些内容和按钮,这些内容和按钮将固定在轮播和点导航之间。因此,我使用了Column小部件,并创建了两个容器,一个用于轮播,另一个用于点导航。

现在的问题是,当我在5秒后使用以下代码更改轮播时,我得到了点导航的怪异行为。小部件在5秒后从1st变为2nd,点导航将像这样1-> 2-> 1->2。我不明白为什么它会回到1st dot再回到2nd。在手指轻扫手势时效果很好。我需要针对这种奇怪行为的解决方案。

Timer.periodic(new Duration(seconds: 5), (_) {
    _controller.animateTo(
      _controller.index == _controller.length - 1
        ? 0
        : _controller.index++);
  });

这是代码。

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

void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin{
  TabController _controller;
  Timer _time;
  @override
  void initState() {
    _controller = TabController(length: 5, vsync: this);
      _time = Timer.periodic(new Duration(seconds: 5), (_) {
        _controller.animateTo(
          _controller.index == _controller.length - 1
            ? 0
            : _controller.index++);
      });

    super.initState();
  }
  @override
  void dispose() {
    _controller.dispose();
    _time.cancel();
    super.dispose();
  }
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: <Widget>[
            Container(
              color: Colors.red, height:100.0, width:100.0,
              child: DefaultTabController(
                length: 5,
                child: TabBarView(
                  controller: _controller,
                  children: <Widget>[
                    Container(color: Colors.red, height:100.0, width:100.0),
                    Container(color: Colors.blue, height:100.0, width:100.0),
                    Container(color: Colors.green, height:100.0, width:100.0),
                    Container(color: Colors.yellow, height:100.0, width:100.0),
                    Container(color: Colors.grey, height:100.0, width:100.0),
                  ],
                ),
              ),
            ),
            Container(
              child: TabPageSelector(
                controller: _controller,
                selectedColor: Colors.grey,
                color: Colors.white,
              ),
            )
          ]
        )
      ),
    );
  }
}

1 个答案:

答案 0 :(得分:0)

我运行了您的代码,但排除了计时器,它按预期运行,因此问题可能出在您的计时器上。 可能是您告诉程序添加一帧(: _controller.index++);),而下次运行时,您告诉程序返回了一帧(_controller.length-1?0)。

现在我不是这方面的专家,所以不要认为我的话是理所当然的,但也许值得一试。

祝你好运