[英]how to navigate using BottomNavigationBar and also with ElevatedButton press in Flutter
I am using BottomNavigationBar
in Flutter, what I wanted is to navigate between pages by clicking on BottomNavigationBarItem
normally.我在 Flutter 中使用BottomNavigationBar
,我想要的是通过正常单击BottomNavigationBarItem
在页面之间导航。 And at the same time, navigate to other pages but in the same BottomNavigationBarItem
.同时,导航到其他页面,但在同一个BottomNavigationBarItem
中。 let me explain more by this example that I found Here让我通过我在这里找到的这个例子来解释更多
Saying that my BottomNavigationBar
has two BottomNavigationBarItem
: Call
, and Message
.说我的BottomNavigationBar
有两个BottomNavigationBarItem
: Call
和Message
。 And Call
can navigate (using a Elevatedbotton
click for example) to Page1
and Page2
, while Message
can navigate (by Elevatedbotton
click) to Page3
and page4
. Call
可以导航(例如使用Elevatedbotton
点击)到Page1
和Page2
,而Message
可以导航(通过Elevatedbotton
点击)到Page3
和page4
。
Like this:像这样:
Call称呼
-Page1 -第1页
-Page2 -第2页
Message信息
-Page3 -第3页
-Page4 -第4页
This solution solved 50% of my problem, what I can do now is to navigate from Call
to page1
and page2
always with keeping BottomNavigationBar
alive, now it still remains the second part, which is clicking on another BottomNavigationBarItem
in order to navigate to Message这个解决方案解决了我 50% 的问题,我现在可以做的是从Call
导航到page1
和page2
始终保持BottomNavigationBar
活动,现在它仍然是第二部分,即单击另一个BottomNavigationBarItem
以导航到 Message
You try this way.你试试这个方法。
class App extends StatefulWidget {
// This widget is the root of your application.
@override
_AppState createState() => _AppState();
}
class _AppState extends State<App> {
int _selectedIndex = 0;
final GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();
Route<dynamic> generateRoute(RouteSettings settings) {
switch (settings.name) {
case 'Site':
return MaterialPageRoute(builder: (context) => SiteScreen());
default:
return MaterialPageRoute(builder: (context) => Home());
}
}
void _onItemTapped(int index) {
switch (index) {
case 1:
_navigatorKey.currentState!
.pushNamedAndRemoveUntil("Site", (route) => false);
break;
default:
_navigatorKey.currentState!
.pushNamedAndRemoveUntil("Home", (route) => false);
}
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.black,
toolbarHeight: 0,
),
body: Navigator(key: _navigatorKey, onGenerateRoute: generateRoute),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite_border),
label: 'Site',
),
],
showSelectedLabels: true,
showUnselectedLabels: false,
currentIndex: _selectedIndex,
selectedItemColor: Colors.white,
unselectedItemColor: Color(0xFF9e9e9e),
iconSize: 20,
backgroundColor: KBlackColor,
onTap: _onItemTapped,
),
);
}
}
class Home extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
child: Column(children: [
TextButton(
onPressed: () {
MaterialPageRoute(builder: (context) => SubHome())
},
child: Text('Click'),
)
]),
);
}
}
class SubHome extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
child: Column(children: [
Text('SubHome')
]),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.