Flutter的輪播怪異行為

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）。

現在我不是這方面的專家，所以不要認為我的話是理所當然的，但也許值得一試。

祝好運