flutter - 如何使用 navigator.push 导航到特定选项卡

Question

假设我想导航到特定选项卡，例如导航到“聊天”选项卡，该 View 在 ChatsOverview() 中定义。每个选项卡都没有自己的脚手架/ Material 小部件。直接返回一个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

要在选项卡之间切换，您不需要 Navigator。

如您所定义 - TabController

TabController controller;

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

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

更新:如果您为 TabBar View 定义了不同的类 - 则需要使用类构造函数传递 Controller 。

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);
}