Flutter TabBar/TabBarView 显示错误的 child

Question

我正在开发一个 flutter 应用程序。我有一个有六个 child 的底部栏。其中两个是 TabBar 屏幕，但我对它们有疑问。每当我在 TabBar/TabBarView 中更改选定的选项卡并移动到底部栏导航中的其他屏幕并返回到带有选项卡的上一个屏幕时，TabBarView 会显示最后选择的选项卡。

附代码:

return SafeArea(

  child: DefaultTabController(
      length: 4,
      initialIndex: 0,
      key: widget.key,
      child: Scaffold(
        //backgroundColor: Colors.white,
        appBar: ColoredTabBar(
          color: Theme.of(context).primaryColorLight,
          tabBar: TabBar(
            unselectedLabelStyle: TextStyle(fontSize: textSize*0.8),
            indicator: BoxDecoration(
              borderRadius: BorderRadius.only(topLeft: Radius.circular(00),topRight: Radius.circular(00)),
              color: Theme.of(context).primaryColor,
              //border: Border.all(),
            ),
            //isScrollable: true,
            labelStyle: TextStyle(fontSize: textSize),
            unselectedLabelColor: Theme.of(context).textTheme.body1.color,
            labelColor: Theme.of(context).unselectedWidgetColor,




            tabs: [
              Tab(text: "Paquetes"),
              Tab(text: "Micro"),
              Tab(text: "Recargas"),
              Tab(text: "A la medida"),
            ],
          ),
          mywalletResponse: widget.wallet,
          numero: widget.defaultNumber,
          onPressed: widget.onPressed,
          onTap: widget.onTap,


        ),
        body:  TabBarView(
          //controller: _tabController2,
          key: widget.key,
          children: [
            CombosScreen(),
            MicroScreen(),
            RecargasScreen(),
            CustomScreen(), // tercera pagina: notificaciones
          ],
        ),
      )))     
;

ColoredTabBar 小部件是:

    class ColoredTabBar extends Container implements PreferredSizeWidget{
  ColoredTabBar({@required this.color, @required this.tabBar, @required this.mywalletResponse, @required this.numero, @required this.onTap, @required this.onPressed});

  final Color color;
  final TabBar tabBar;
  final WalletResponse mywalletResponse;
  final String numero;
  final VoidCallback onTap;
  final VoidCallback onPressed;





  @override
  Size get preferredSize => Size.fromHeight(103.0);

  @override
  Widget build(BuildContext context) => Container(

      color: color,
      child: Column(
        children: <Widget>[
          Header(number: numero, walletModel: mywalletResponse, onTap: onTap, onPressed: onPressed,),
          tabBar,
        ],
      )

  );
}

因此，例如，我转到带有 defaultTabController 的小部件并选择索引 2 处的小部件，稍后我移动到底部导航栏中的另一个小部件，然后我返回到带有 defaultTabController 的前一个小部件。所选选项卡是索引 0 处的选项卡，但 TabBarView 显示索引 2 处的小部件。

你知道如何用标签和小部件相同的方式初始化索引吗？

Answer 1

您必须保存最后一个标签索引，一旦您重定向到标签 View 屏幕，然后通过 TabController 重新设置标签索引的值。

让我们使用 TabBarView 而不是 DefaultTabController，它与 TabController 一起工作

class _Page {
  _Page({this.widget});
  final Widget widget;
}

List<_Page> _allPages;

class Home extends StatefulWidget {

    @override
    _HomeState createState() => new _HomeState();


    changeTabIndex(int index) {
        _HomeState()._controller.animateTo(index);
    }
}

class _HomeState extends State<Home> with TickerProviderStateMixin {

    TabController _controller;
    _HomeState();

    @override
    void initState() {
        super.initState();

        _allPages = <_Page>[
            _Page(widget: CombosScreen()),
            _Page(widget: MicroScreen()),
            _Page(widget: RecargasScreen()),
            _Page(widget: CustomScreen()),
        ];

        _controller = TabController(vsync: this, length: 4);
        _controller.addListener(_handleTabSelection);
    }

    _handleTabSelection() { // <--- Save your tab index
        if(_controller.indexIsChanging) {
            // Save your tab index here
            // You can use static variable or BloC state
        }
    }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: TabBarView(
            controller: _controller,
            children: _allPages.map<Widget>((_Page page){
              return SafeArea(
                child: Container(
                    key: ObjectKey(page.widget),
                    child: page.widget
                ),
              );
            }).toList(),
        )
    )
}

然后就调用

Home.changeTabIndex(yourLastTabIndex);