Flutter 如何在下一页隐藏 Cupertino 底部导航栏
Flutter how to hide Cupertino bottom navigation bar at next page
我目前正在处理一个需要使用 Cupertino 小部件构建的项目。一切都很好,直到我尝试不在下一页显示底部导航栏,但底部导航栏仍然从上一页开始。下面是我的示例代码。
class PageOne extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoTabScaffold(
tabBar: CupertinoTabBar(
items: [
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.person), label: 'Person'),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.mail), label: 'Mail'),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.flag), label: 'Flag'),
],
),
tabBuilder: (context, index) {
return CupertinoTabView(
routes: {
'p2': (context) => PageTwo(),
},
builder: (context) {
return CupertinoPageScaffold(
backgroundColor: Colors.white,
child: Center(
child: Column(
children: [
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, 'p2');
},
child: Text('Next Page'),
),
],
),
));
},
);
},
);
}
}
class PageTwo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
color: Colors.white,
child: Column(children: [
Text('Page 2'),
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Back'),
),
]),
),
);
}
}
找到解决方案。
第一个解决方案。
只需更换
Navigator.pushNamed(context,'p2');
至
Navigator.of(context, rootNavigator: true).pushNamed('p2');
第二种解决方案
如果不需要使用 CupertinoTabView,请将其从 tabBuilder 中移除
tabBuilder: (context, index) {
return CupertinoPageScaffold(
backgroundColor: Colors.white,
child: Center(
child: Column(
children: [
SizedBox(
height: 50.0,
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, 'p2');
},
child: Text('Next Page'),
),
],
),
),
);
},
重要:必须为 class CupertinoApp
设置路由
Navigator.of(context, rootNavigator: true).pushReplacement(MaterialPageRoute(builder: (context) => YourScreen()));
我目前正在处理一个需要使用 Cupertino 小部件构建的项目。一切都很好,直到我尝试不在下一页显示底部导航栏,但底部导航栏仍然从上一页开始。下面是我的示例代码。
class PageOne extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoTabScaffold(
tabBar: CupertinoTabBar(
items: [
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.person), label: 'Person'),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.mail), label: 'Mail'),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.flag), label: 'Flag'),
],
),
tabBuilder: (context, index) {
return CupertinoTabView(
routes: {
'p2': (context) => PageTwo(),
},
builder: (context) {
return CupertinoPageScaffold(
backgroundColor: Colors.white,
child: Center(
child: Column(
children: [
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, 'p2');
},
child: Text('Next Page'),
),
],
),
));
},
);
},
);
}
}
class PageTwo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
color: Colors.white,
child: Column(children: [
Text('Page 2'),
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Back'),
),
]),
),
);
}
}
找到解决方案。
第一个解决方案。
只需更换
Navigator.pushNamed(context,'p2');
至
Navigator.of(context, rootNavigator: true).pushNamed('p2');
第二种解决方案
如果不需要使用 CupertinoTabView,请将其从 tabBuilder 中移除
tabBuilder: (context, index) {
return CupertinoPageScaffold(
backgroundColor: Colors.white,
child: Center(
child: Column(
children: [
SizedBox(
height: 50.0,
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, 'p2');
},
child: Text('Next Page'),
),
],
),
),
);
},
重要:必须为 class CupertinoApp
设置路由Navigator.of(context, rootNavigator: true).pushReplacement(MaterialPageRoute(builder: (context) => YourScreen()));