Question

我正在使用Flutter应用程序。我有一个带六个孩子的底吧。其中两个是TabBar屏幕，但我有一个问题。每当我更改TabBar / TabBarView中选定的选项卡，并移至底部栏导航中的其他屏幕，并使用Tabs返回到上一个屏幕时，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

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

让我们使用TabBarView代替DefaultTabController的{{1}}

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(),
        )
    )
}

Flutter TabBar / TabBarView显示错误的孩子

1 个答案: