[英]How to make a Bottom Navigation bar, with nested navigation, and Scaffold for each page?
I have a BottomNavigation bar, and I have Nested navigation for it, but I also need a Scaffold for every new page in the Top level screen.我有一个 BottomNavigation 栏,我有它的嵌套导航,但我还需要为顶级屏幕中的每个新页面提供一个脚手架。 I get that nested Scaffold is not recommended and I also have a resizeToAvoidBottomInset
problem when I use nested Scaffolds.我知道不推荐使用嵌套脚手架,并且在使用嵌套脚手架时我也遇到了resizeToAvoidBottomInset
问题。
@override
Widget build(BuildContext context) {
Widget child;
if (tabItem == "Home") {
child = const Home();
} else if (tabItem == 'screen2') {
child = Screen2();
} else if (tabItem == 'screen3') {
child = const Screen3();
} else if (tabItem == 'screen4') {
child = const Screen4(0);
} else if (tabItem == 'Screen5') {
child= Screen5();
} else {
child = const Home();
}
return Navigator(
key: navigatorKey,
onGenerateRoute: (routeSettings) {
return MaterialPageRoute(builder: (context) => child);
},
);
}
This is my code for doing this这是我这样做的代码
class CustomerHomeScreen extends StatefulWidget {
const CustomerHomeScreen({Key? key}) : super(key: key);
@override
State<CustomerHomeScreen> createState() => _CustomerHomeScreenState();
}
class _CustomerHomeScreenState extends State<CustomerHomeScreen> {
int _selectedIndex=0;
final List _tabs=[
const HomeScreen(), //You can create all these classes with Statefull widgets
const Screen1(),
const Screen2(),
const Screen3(),
const Screen4(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: _tabs[_selectedIndex],
bottomNavigationBar: BottomNavigationBar(
selectedItemColor: Colors.black,
unselectedItemColor: Colors.red,
currentIndex: _selectedIndex,
// type: BottomNavigationBarType.fixed,
selectedLabelStyle: const TextStyle(fontWeight: FontWeight.w600),
items: [
const BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
const BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Screen1'),
const BottomNavigationBarItem(icon: Icon(Icons.shop), label: 'Screen2'),
BottomNavigationBarItem(icon: Icon(Icons.shopping_cart)), label: 'Screen3'),
const BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Screen4,'),
],
onTap: (index){
setState(() {
_selectedIndex=index;
});
}
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.