提问人:Mohammad Bilal Akbar 提问时间:12/2/2022 更新时间:12/2/2022 访问量:106
如何在其他类 flutter 中将 main 的命名路由传递给 BottomNavigationBar?
How to pass named routes of main to BottomNavigationBar in other class flutter?
问:
我的 main.dart 屏幕调用 SplashScreen,然后 SplashScreen 调用 BottomNavigationScreen。我在 widgetOptions 中手动调用 _widgetOptions.elementAt(_selectedIndex) 的所有屏幕。
我不想手动调用所有屏幕。相反,我想使用main.dart文件中定义的命名路由来调用屏幕。如何将命名路由传递给我定义 BottomNavigatioBar 的另一个类?
如何在 main 以外的类中添加 BottomNavigationBar 并调用命名路由而不是手动调用类?
main.dart
import 'package:flutter/material.dart';
import 'package:form_data_api/screens/all_articles_screen.dart';
import 'package:form_data_api/screens/article_detail_screen.dart';
import 'package:form_data_api/screens/user_profile_screen.dart';
// import 'package:form_data_api/screens/all_children_screen.dart';
// import 'package:form_data_api/screens/child_detail_screen.dart';
// import 'package:form_data_api/screens/user_profile_screen.dart';
import 'screens/all_children_screen.dart';
import 'screens/bottom_navigation_screen.dart';
import 'screens/child_detail_screen.dart';
import 'splash_screen.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: '/splashScreen',
routes: {
// When navigating to the "/" route, build the FirstScreen widget.
'/splashScreen': (_) => const SplashScreen(),
// When navigating to the "/second" route, build the SecondScreen widget.
'/bottomNavigationScreen': (_) => const BottomNavigationScreen(),
'/userProfileScreen': (_) => const UserProfileScreen(),
'/allChildrenScreen': (_) => const AllChildrenScreen(),
'/childDetailScreen': (context) => const ChildDetailScreen(childName: '', childId: '',),
'/allArticleScreen': (context) => const AllArticleScreen(),
'/articleDetailScreen': (context) => const ArticleDetailScreen(articleName: '', articleId: '',),
},
// home: SplashScreen(),
);
}
}
bottom_navigation_screen.飞镖
import 'package:flutter/material.dart';
import 'all_articles_screen.dart';
import 'all_children_screen.dart';
import 'user_profile_screen.dart';
class BottomNavigationScreen extends StatefulWidget {
const BottomNavigationScreen({super.key});
@override
State<BottomNavigationScreen> createState() => _BottomNavigationScreenState();
}
class _BottomNavigationScreenState extends State<BottomNavigationScreen> {
int _selectedIndex = 0;
// static const TextStyle optionStyle =
// TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
UserProfileScreen(),
AllChildrenScreen(),
AllArticleScreen(),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: IndexedStack(
index: _selectedIndex,
children: _widgetOptions,
),
// body: Center(
// child: _widgetOptions.elementAt(_selectedIndex),
// ),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.blue[50],
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Children',
),
BottomNavigationBarItem(
icon: Icon(Icons.article),
label: 'Articles',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.blue,
onTap: _onItemTapped,
),
);
}
}
我的 main.dart 屏幕调用 SplashScreen,然后 SplashScreen 调用 BottomNavigationScreen。我在 widgetOptions 中手动调用 _widgetOptions.elementAt(_selectedIndex) 的所有屏幕。
我不想手动调用所有屏幕。相反,我想使用main.dart文件中定义的命名路由来调用屏幕。如何将命名路由传递给我定义 BottomNavigatioBar 的另一个类?
答:
0赞
Amit Bahadur
12/2/2022
#1
使用这个
onTap: (index){
switch(index){
case 0:
Navigator.pushNamed(context, "/userProfileScreen");
break;
case 1:
Navigator.pushNamed(context, "/allChildrenScreen");
break;
case 2:
Navigator.pushNamed(context, "/childDetailScreen");
break;
case 3:
Navigator.pushNamed(context, "/allArticleScreen");
break;
...etc
}
},
评论
0赞
Mohammad Bilal Akbar
12/2/2022
body: IndexedStack( index: _selectedIndex, children: _widgetOptions, ),
0赞
Mohammad Bilal Akbar
12/2/2022
如何通过 children 中 main 中定义的路由导入屏幕:_widgetOptions?
0赞
Amit Bahadur
12/3/2022
然后@MohammadBilalAkbar使用这个 Navigator.pushNamed(context, AppRoute.userProfileScreen);
0赞
yaman hafez
12/2/2022
#2
你好,兄弟,你好吗?非常容易,您应该创建这个类类
这是您的材料应用程序
return MaterialApp(
initialRoute: '/splashScreen',
routes: {
// When navigating to the "/" route, build the FirstScreen widget.
AppRoute.splashScreen: (_) => const SplashScreen(),
// When navigating to the "/second" route, build the SecondScreen widget.
AppRoute.bottomNavigationScreen: (_) => const
BottomNavigationScreen(),
.......
},
// home: SplashScreen(),
);
以及您应该创建的这个 AppRoute 类
Class AppRoute{
static const String splashScreen = '/splash-screen';
static const String bottomNavigationScreen = '/bottom-navigation-bar-screen';
....
}
之后,当您想调用该页面时;
Navigator.pushNamed(context, AppRoute.splashScreen);
我会帮助你的
评论
0赞
Mohammad Bilal Akbar
12/2/2022
如何通过 children 中 main 中定义的路由导入屏幕:_widgetOptions?
0赞
yaman hafez
12/2/2022
如果在孩子中你不能,因为这个小部件没有路由
评论