Flutter TabBar/TabBarView 显示错误 child

Question

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

使用代码：

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 和 select 索引 2 处的小部件转到小部件，稍后我移动到底部导航栏中的另一个小部件，然后我 return 到上一个带有 defaultTabController 的小部件。 selected 选项卡是索引 0 处的选项卡，但 TabBarView 显示索引 2 处的小部件。

你知道如何用tab和widget一样的方式初始化索引吗？

Answer 1

您必须保存最后一个标签索引，一旦您重定向到标签视图屏幕，然后通过 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);

Flutter TabBar/TabBarView 显示错误 child

Flutter TabBar/TabBarView showing wrong child

tabbar

flutter