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

Question

这是我的场景：

• 该应用程序有一个带有 5 个选项卡的选项卡栏
• 有些视图有详细视图

详细视图的实现：

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

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

基础视图

现在问题是： 当我返回基本视图时，选项卡栏上的索引是错误的。因此，选项卡栏指示您位于第一个视图，而您位于另一个视图。

我怎样才能解决这个问题？

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

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并使用带有命名路线的导航，因为它不会创建新屏幕。您可以阅读更多内容：https ://flutter.dev/docs/cookbook/navigation/named-routes