如何使用Navigator.push导航到特定的选项卡

Question

让我们假设我要导航到特定的选项卡，例如，到chatsoverview（）中定义的视图的标签'chats'。每个标签都不具有自己的脚手架/材料小部件。它直接返回streambuilder，因此Navigator.push无法直接工作？

Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () => Future.value(false),
      child: new Scaffold(
          appBar: AppBar(
              leading: Container(), 
              flexibleSpace: SafeArea(
                  child: new TabBar(indicatorWeight: 4.0,indicatorColor: Colors.white, controller: controller, tabs: <Tab>[
                new Tab(
                  text: 'Gruppen',
                  icon: Icon(Icons.group),
                ),
                new Tab(
                  text: 'Chats',
                  icon: Icon(Icons.chat_bubble),
                ),
                new Tab(
                  text: 'Einstellungen',
                  icon: Icon(Icons.settings),
                )
              ]))),
          body: new TabBarView(controller: controller, children: <Widget>[
            new first.GroupsOverview(),
            new second.ChatsOverview(),
            new third.Settings()
          ])),
    );
  }

Answer 1

要在选项卡之间切换，您不需要导航器。

按照您的定义-TabController

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

您可以简单地调用-controller.animateTo方法，例如- controller.animateTo(2, curve: ElasticInCurve());从任何地方转到第三张标签＆amp;同样到其他选项卡。

更新：如果您为塔巴尔视图定义了不同的类 - 然后需要通过类构造函数传递控制器。

body: new TabBarView(controller: controller, children: <Widget>[
          GroupsOverview(controller), // Pass the controller
          ChatsOverview(controller), // Pass the controller
          Settings(controller) // Pass the controller
        ])
class GroupsOverview extends StatelessWidget {
  TabController controller;  // ADD THIS
  GroupsOverview(this.controller);
  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        onPressed: () {
          controller.animateTo(1);
        },
        child: Text('Goto Chats'),
      ),
    );
  }
}
class ChatsOverview extends StatelessWidget {
  TabController controller;  // ADD THIS
  ChatsOverview(this.controller);
  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
          onPressed: () {
            controller.animateTo(2);
          },
          child: Text('Goto Einstellungen')),
    );
  }
}
class Settings extends StatelessWidget {
  TabController controller;  // ADD THIS
  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
          onPressed: () {
            controller.animateTo(0);
          },
          child: Text('Goto Gruppen')),
    );
  }
  Settings(this.controller);
}

Answer 2

要转到另一页的特定选项卡，然后您需要通过该选项卡的索引。

一个屏幕到TabBar屏幕：

onTap: () {
    Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => TabBarScreen(tabSelected: 1))
    );
},

和TabBar屏幕：

int tabSelected;
TabController _controller;
_TabBarScreenState(this.tabSelected);
  
@override
void initState() {
  print("Tab Selected ==== $tabSelected");
  _controller = new TabController(length: 2, vsync: this);
  _controller.index = tabSelected;
  super.initState();
}
@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: kBackgroundGray,
    body: DefaultTabController(
      initialIndex: tabSelected,
      length: 2,
    ),
  );
}

在此屏幕中，我只有两个选项卡，此代码正在打开第二个选项卡