Question

假设我要导航到特定选项卡，例如“ Chats”选项卡，该视图在ChatsOverview（）中定义。每个选项卡没有自己的“脚手架/材料”小部件。它直接返回StreamBuilder，所以navigator.push不直接起作用吗？

return this.httpClient.get(url, { observe: 'response' });

Answer 1

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

如您所定义-TabController

TabController controller;

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

您可以轻松地从任何地方调用-controller.animateTo之类的controller.animateTo(2, curve: ElasticInCurve());方法，以转到第三个标签页，也可以转到其他标签页。

更新：如果您为TabBar View定义了不同的类，则需要将控制器与类构造函数一起传递。

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) => SearchScreen(tabSelected: 1))
    );
},

并在TabBar屏幕中：

int tabSelected;

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

在此屏幕中，我只有两个标签，此代码正在打开第二个标签

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

2 个答案: