该应用程序包含TabBar和BottomNavigationBar。当我试图在标签栏视图中导航时,它会全屏导航。
这是我试图得到的结果时,点击按钮-Expected Result
但我得到了这个Current Output
在这里我附上了代码-
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Traveler"),
bottom: new TabBar(controller: _controller, tabs: <Tab>[
new Tab(text: "NEW"),
new Tab(text: "HOTELS"),
new Tab(text: "FOOD"),
new Tab(text: "FUN"),
]),
),
body: new TabBarView(
controller: _controller,
children: <Widget>[
new NewPage(_index),
new HotelsPage(_index),
new FoodPage(_index),
new FunPage(_index),
],
),
bottomNavigationBar: new BottomNavigationBar(
currentIndex: _index,
onTap: (int _index) {
setState(() {
this._index = _index;
});
},
items: <BottomNavigationBarItem>[
new BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text("Home"),
),
new BottomNavigationBarItem(
icon: new Icon(Icons.favorite),
title: new Text("Favorites"),
),
]),
);
}
}
class NewPage extends StatelessWidget {
final int index;
NewPage(this.index);
@override
Widget build(BuildContext context) {
return new Center(
child: RaisedButton(
onPressed: (){
Navigator.push(context,MaterialPageRoute(builder: (context)=>InsideTabViewPage()), );
},
child: new Text('NewPage, index: $index')),
);
}
}
2条答案
按热度按时间vuktfyat1#
您可以通过创建一个新的
Navigator
小部件来实现这一点,该小部件位于主应用程序导航器下的某个位置,下面是测试示例:
结果是:
You can read more about nested navigation in Navigator 1.0 API here
pkbketx92#
这个问题的一个好的解决方案是使用来自pub.dev的go_router包,这是一个很棒的路由包,它是一个flutter favorite包
它专门解决了你所问的嵌套路由问题,通过实现他们称之为shell路由的东西,你基本上可以将你的应用程序的一些路由定义为拥有一个shell,这个shell可以是任何东西,比如在你的例子中,一个带有bottomNavigationBar的Scaffold,
当调用这样的路由时,导航将在该shell中发生(在导航期间该shell保持原位),使用独立于应用程序的根导航器的另一个导航器