从详细视图返回时，Flutter TabBar 重置索引

Question

这是我的场景：

该应用有一个包含 5 个标签的标签栏
有些视图有详细视图

详细视图的实现：

onTap: () => Navigator.push(context,
          MaterialPageRoute(builder: (context) => RPlanDetail(lesson))),

（RPlanDetail 是详细视图，lesson 是传递的数据）

基本观点

现在问题来了： 当我 return 到基本视图时，标签栏上的索引是错误的。所以标签栏表示你在第一个视图，而你在另一个视图。

我该如何解决这个问题？

如果您需要更多信息，请告诉我。
感谢您的帮助！

Answer 1

我有一个代码演示如下：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: TabBarDemo(),
    ),
  );
}

class TabBarDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return TabBarDemoState();
  }
}

class TabBarDemoState extends State<TabBarDemo> with TickerProviderStateMixin {
  static int _index = 0;
  TabController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TabController(
        initialIndex: TabBarDemoState._index, length: 3, vsync: this);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _controller,
          tabs: [
            Tab(icon: Icon(Icons.directions_car)),
            Tab(icon: Icon(Icons.directions_transit)),
            Tab(icon: Icon(Icons.directions_bike)),
          ],
          onTap: (int index) {
            TabBarDemoState._index = index;
          },
        ),
        title: Text('Tabs Demo'),
      ),
      body: TabBarView(
        controller: _controller,
        children: [
          Center(
            child: FlatButton(
              color: Colors.red,
              child: Text("Go to Detail page"),
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (ct) => DetailPage(TabBarDemoState._index)));
              },
            ),
          ),
          Center(
            child: FlatButton(
              color: Colors.red,
              child: Text("Go to Detail page"),
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (ct) => DetailPage(TabBarDemoState._index)));
              },
            ),
          ),
          Center(
            child: FlatButton(
              color: Colors.red,
              child: Text("Go to Detail page"),
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (ct) => DetailPage(TabBarDemoState._index)));
              },
            ),
          ),
        ],
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  DetailPage(this.index);
  final int index;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text("Detail page $index"),
      ),
    );
  }
}

希望对您有所帮助。但我建议您将 Navigator.push 替换为 Navigator.pushName 并使用 Navigate with named routes，因为它不会创建新屏幕。您可以阅读更多：https://flutter.dev/docs/cookbook/navigation/named-routes

Answer 2

设置标签控制器里面 'initState();'

切勿将 Tab Controller 放入 'build(BuildContext context)'

 @override
 void initState() {
 super.initState();
 _tabController = new TabController(length: 3, vsync: this);
 }

从详细视图返回时，Flutter TabBar 重置索引

Flutter TabBar resets index when returning from detail view

tabs

android

ios

flutter