我是 Flutter 开发的新手。我已经阅读了多个教程来了解底部导航栏。
我已经尝试过这些教程，但无法达到我的要求。
我遵循的教程：
- https://codewithandrea.com/articles/multiple-navigators-bottom-navigation-bar/ https://codewithandrea.com/articles/multiple-navigators-bottom-navigation-bar/
- https://medium.com/flutter/getting-to-the-bottom-of-navigation-in-flutter-b3e440b9386 https://medium.com/flutter/getting-to-the-bottom-of-navigation-in-flutter-b3e440b9386
- https://medium.com/@theboringdeveloper/common-bottom-navigation-bar-flutter-e3693305d2d https://medium.com/@theboringdeveloper/common-bottom-navigation-bar-flutter-e3693305d2d
我个人喜欢第一个教程，因为有嵌套路由。
信息：
我的底部导航有 3 个选项卡：主页、日历、个人资料。
Home选项卡有一个屏幕：Screen2. Calendar有一个屏幕：Screen3. Profile有一个屏幕：Screen4
Problem:
我的底部导航栏保留了屏幕的状态（这很好）。
主屏幕有一个打开的按钮Screen2。当用户单击时，它会推动 Screen2。当用户单击日历（选项卡）时，用户会看到日历屏幕。现在，用户再次单击“主页”按钮（选项卡），用户将看到 Screen2。因为它是那条路线（家）的一部分。他应该只看到主屏幕。
我只想重置它。基本上主屏幕应该推送主屏幕并弹出主页的所有子项。当选项卡切换时。
Code:
主程序.dart
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MainScreen(),
);
}
}
主屏幕.dart
class MainScreen extends StatefulWidget {
MainScreen({Key key}) : super(key: key);
@override
_MainScreenState createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
int _selectedIndex = 0;
List<GlobalKey<NavigatorState>> _navigatorKeys = [
GlobalKey<NavigatorState>(),
GlobalKey<NavigatorState>(),
GlobalKey<NavigatorState>()
];
List<Widget> _widgetOptions = <Widget>[
HomePage(),
CalendarPage(),
ProfilePage(),
];
Map<String, WidgetBuilder> _routeBuilders(BuildContext context, int index) {
return {
'/': (context) {
return [
HomePage(),
CalendarPage(),
ProfilePage(),
].elementAt(index);
},
};
}
Widget _buildOffstageNavigator(int index) {
var routeBuilders = _routeBuilders(context, index);
return Offstage(
offstage: _selectedIndex != index,
child: Navigator(
key: _navigatorKeys[index],
onGenerateRoute: (routeSettings) {
return MaterialPageRoute(
builder: (context) => routeBuilders[routeSettings.name](context),
);
},
),
);
}
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async {
final isFirstRouteInCurrentTab =
!await _navigatorKeys[_selectedIndex].currentState.maybePop();
// let system handle back button if we're on the first route
return isFirstRouteInCurrentTab;
},
child: Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: Stack(
children: [
_buildOffstageNavigator(0),
_buildOffstageNavigator(1),
_buildOffstageNavigator(2),
],
),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
showSelectedLabels: false,
showUnselectedLabels: false,
items: [
BottomNavigationBarItem(
icon: Icon(
Feather.home,
color: Colors.grey[300],
),
label: 'HOME',
activeIcon: Icon(
Feather.home,
color: Colors.purple[300],
),
),
BottomNavigationBarItem(
icon: Icon(
FontAwesome.calendar,
color: Colors.grey[300],
),
label: 'CALENDAR',
activeIcon: Icon(
FontAwesome.calendar,
color: Colors.purple[300],
),
),
BottomNavigationBarItem(
icon: Icon(
EvilIcons.user,
color: Colors.grey[300],
size: 36,
),
label: 'PROFILE',
activeIcon: Icon(
EvilIcons.user,
color: Colors.purple[300],
size: 36,
),
),
],
onTap: (index) {
setState(() {
_selectedIndex = index;
});
},
),
),
);
}
}
主页.dart
class HomePage extends StatefulWidget {
HomePage();
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.lightBlueAccent,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
child: Text(
'Screen 1',
style: TextStyle(color: Colors.white, fontSize: 20),
),
margin: EdgeInsets.all(16),
),
FlatButton(
onPressed: () {
// Navigator.push(context, MaterialPageRoute(
// builder: (context) => Screen2()
// ));
Navigator.push(context, PageRouteBuilder(pageBuilder: (_,__,___) => Screen2()));
},
child: Text('Go to next screen'),
color: Colors.white,
),
],
));
}
}
日历页.dart
class CalendarPage extends StatefulWidget {
CalendarPage({Key key}) : super(key: key);
@override
_CalendarPageState createState() => _CalendarPageState();
}
class _CalendarPageState extends State<CalendarPage> {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
child: Center(
child: FlatButton(
onPressed: (){
Navigator.push(context, MaterialPageRoute(
builder: (context) => Screen3()
));
},
child: Text('Go to next screen'),
color: Colors.white,
),
),
);
}
}
如果有人能给我指出方向，我将非常感激。提前致谢。
要求:
有选项卡，每个选项卡都有各自的屏幕（ScreenX-> ScreenY-> ScreenN）。当切换选项卡时，它应该弹出选项卡的所有子选项卡。我希望这是可以理解的（抱歉，我的英语不好）。
我在这里缺少什么？
