颤振标签栏视图未显示相应的索引子项

Question

我有两个2 TabController。当我使用tabcontroller.index时，它们两个总是在正确的索引上。我第一次调用TabBarView时未显示相应的子索引的问题。这是我的代码：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: "Wattza app",
        home: MyNavigationBar(),
      );
  }

}

class MyNavigationBar extends StatefulWidget {
  @override
  _MyNavigationBarState createState() => _MyNavigationBarState();
}

class _MyNavigationBarState extends State<MyNavigationBar>
    with TickerProviderStateMixin {
  TabController pageTabController;
  TabController tabController;


  @override
  void initState() {
    pageTabController = TabController(initialIndex: 0, length: 3, vsync: this);
    tabController = TabController(initialIndex: 0, length: 4, vsync: this);
    super.initState();
  }

  List<Widget> buildTabs() {
    return [
      Tab(
        icon: Icon(
          Icons.home,
        ),
        child: Text("Home"),
      ),
      Tab(
        icon: Icon(
          Icons.directions_bike,
        ),
        child: Text("Training"),
      ),
      Tab(
        icon: Icon(
          Icons.history,
        ),
        child: Text("History"),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: CustomAppBar(pageTabController: pageTabController, tabController: tabController),
      bottomNavigationBar: TabBar(
        tabs:buildTabs(),
        controller: pageTabController,
      ),
      backgroundColor: Constants.greyColor,
    );
  }
}

我在这里进行tabbarview调用：

class CustomAppBar extends StatefulWidget {
  final TabController pageTabController;
  final TabController tabController;
  CustomAppBar({this.pageTabController, this.tabController});
  @override
  _CustomAppBarState createState() => _CustomAppBarState();
}

class _CustomAppBarState extends State<CustomAppBar>
    with TickerProviderStateMixin {
  bool isScrollingUp;
  bool isScollingDown;

  AnimationController animationController;
  Animation animation;

  void showTabs() {
    isScollingDown = true;
    isScrollingUp = false;
    animationController.forward();
  }

  void hideTabs() {
    isScollingDown = false;
    isScrollingUp = true;
    animationController.reverse();
  }

  void onVerticalDrag(DragUpdateDetails details) {
    if (details.delta.dy > 3) {
      if (!isScollingDown) {
        showTabs();
        //print("going down");
      }
    }
    if (details.delta.dy < -3) {
      if (!isScrollingUp) {
        hideTabs();
        //print("going up");
      }
    }
    //print(details.delta.dy);
  }

  @override
  void initState() {
    isScrollingUp = false;
    isScollingDown = false;

    animationController =
        AnimationController(duration: Duration(milliseconds: 500), vsync: this);
    animation =
        CurvedAnimation(parent: animationController, curve: Curves.easeIn);
    // TODO: implement initState
    super.initState();
  }

  Widget build(BuildContext context) {
    return _AnimatedAppBar(
      animation: animation,
      onVerticalDrag: onVerticalDrag,
      tabController: widget.tabController,
      showTabs: showTabs,
      pageTabController: widget.pageTabController,
    );
  }
}

class _AnimatedAppBar extends AnimatedWidget {
  _AnimatedAppBar({
    Key key,
    Animation<double> animation,
    this.tabController,
    this.onVerticalDrag,
    this.showTabs,
    this.pageTabController,
  }) : super(key: key, listenable: animation);

  final Function(DragUpdateDetails) onVerticalDrag;
  final TabController tabController;
  final TabController pageTabController;
  final Function() showTabs;

  static final _sizeTween = Tween<double>(begin: 0.0, end: 15.0);

  List<Widget> buildTabs() {
    return [
      Tab(
        child: IconButton(
            icon: Icon(
              Icons.home,
              color: Colors.black,
            ),
            onPressed: () {
              tabController.animateTo(0);
              showTabs();
            }),
      ),
      Tab(
        child: IconButton(
            icon: Icon(
              Icons.bluetooth_connected,
              color: Colors.black,
            ),
            onPressed: () {
              tabController.animateTo(1);
              showTabs();
            }),
      ),
      Tab(
          child: IconButton(
              icon: Icon(
                Icons.battery_full,
                color: Colors.black,
              ),
              onPressed: () {
                tabController.animateTo(2);
                showTabs();
              })),
      Tab(
        child: IconButton(
            icon: Icon(
              Icons.dehaze,
              color: Colors.black,
            ),
            onPressed: () {
              tabController.animateTo(3);
              showTabs();
            }),
      ),
    ];
  }

  Widget _appBarBottom() {
    return PreferredSize(
      preferredSize: Size.fromHeight(_sizeTween.evaluate(listenable)),
      child: (_sizeTween.evaluate(listenable) >= 10)
          ? Column(
              children: <Widget>[
                TabPageSelector(
                  controller: tabController,
                  selectedColor: Colors.black,
                ),
                Container(
                  height: 0,
                  child: Icon(Icons.arrow_drop_up),
                )
              ],
            )
          : Container(
              height: 0, // work in progress
              child: Icon(Icons.arrow_drop_down),
            ),
    );
  }

  Widget buildBodyView() {
    return TabBarView(
      controller: pageTabController,
      children: <Widget>[
        Icon(Icons.face),
        Icon(Icons.directions_bike),
        Icon(Icons.history),
      ],
    );
  }

  Widget buildTabBarView() {
    print(tabController.index); //<------ prints correct index but doesnt display corresponding child
    return TabBarView(
      controller: tabController,
      children: <Widget>[
        Icon(Icons.home),
        Icon(Icons.bluetooth_connected),
        Icon(Icons.battery_full),
        Icon(Icons.dehaze)
      ],
    );
  }

  Widget build(BuildContext context) {
    return GestureDetector(
      onVerticalDragUpdate: onVerticalDrag,
      child: Scaffold(
          appBar: AppBar(
              backgroundColor: Constants.greyColor,
              title: TabBar(
                tabs: buildTabs(),
                controller: tabController,
                isScrollable: true,
              ),
              bottom: _appBarBottom()),
          body: (_sizeTween.evaluate(listenable) >= 10)
              ? buildTabBarView()
              : buildBodyView()),
    );
  }
}

Here is an example of the bug, I navigate to History Icon, then select Dehaze Icon. The page should be the one containing the dehaze Icon but it's displaying the Battery page.