Question

我需要一个小部件的轮播，其中将包含一些文本，每个小部件的图像以及点导航应显示在底部。另外，轮播和点导航之间应该有空间，因为我需要添加一些内容和按钮，这些内容和按钮将固定在轮播和点导航之间。因此，我使用了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,
              ),
            )
          ]
        )
      ),
    );
  }
}

Answer 1

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

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

祝你好运

Flutter的轮播怪异行为

1 个答案: