因此我在main.dart文件中定义了以下路由:
routes: {
'/sign-in': (context) => BlocProvider(
lazy: false,
create: (_) => AuthCubit(),
child: const LandingPage(),
),
'/home': (context) => const HomeLandingPage(),
'/sign-up': (context) => const SignUpLandingPage(),
'/language-selection': (context) => const SelectionLanguageScreen(),
'/camera-page': (context) => CameraPage(),
'/web-add-page': (context) => const WebAddPage()
},
问题是,其中一些只是父屏幕的子部件。例如:'/web-add-page'位于'/home'内部以下是/home的子视图:
final screens = [ //screens is a List<Widget>
const WebAddPage(),
const WebUpdateProducts(),
const WebUpdateCategories(),
const WebUpdateStores(),
const WebUpdateUsers()
];
大问题是我不能使用导航器。Push()因为我没有导航到一个新的屏幕,我只是用一个子部件替换了“/home”的内容**(被视为一个屏幕)**它允许我保留导航栏和左列菜单,但不更新浏览器中的路线。当我输入/ Home时,url看起来像:localhost:4200/home,在我打开添加视图后,它应该更新为.../home/web-add-page或其他,但我找不到这样做的方法。
以下是整个文件:
class WebHomeView extends StatefulWidget {
const WebHomeView({Key? key}) : super(key: key);
@override
State<WebHomeView> createState() => _WebHomeViewState();
}
class _WebHomeViewState extends State<WebHomeView> {
final screens = [
const MainMenuWebPage(),
const WebTickets(),
const WebMovements(),
const WebOrders()
];
int _screenIndex = 0;
@override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) => HomeBloc(),
child: BlocConsumer<HomeBloc, HomeState>(
builder: (context, state) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).primaryColor,
title: const Text('Mercaditos Project',
style: TextStyle(fontSize: 20)),
actions: [
JustTheTooltip(
tailLength: 0,
preferredDirection: AxisDirection.down,
content: const Padding(
padding: EdgeInsets.all(5.0),
child: Text('Log Out'),
),
child: IconButton(
onPressed: () {
FirebaseAuth.instance.signOut();
},
icon: const Icon(
Icons.output,
size: 30,
)),
),
JustTheTooltip(
tailLength: 0,
preferredDirection: AxisDirection.down,
content: const Padding(
padding: EdgeInsets.all(5.0),
child: Text('Main Menu'),
),
child: Padding(
padding: const EdgeInsets.only(top: 10, bottom: 10),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
elevation: 0,
shape: const CircleBorder(),
primary: state.option == AppBarOptions.mainMenu
? Colors.grey.shade800
: Theme.of(context).primaryColor),
child: Icon(Icons.house,
color: Theme.of(context).backgroundColor),
onPressed: () {
setState(() {
_screenIndex = 0;
});
},
),
),
),
JustTheTooltip(
tailLength: 0,
preferredDirection: AxisDirection.down,
content: const Padding(
padding: EdgeInsets.all(5.0),
child: Text('Tickets'),
),
child: Padding(
padding: const EdgeInsets.only(top: 10, bottom: 10),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
elevation: 0,
shape: const CircleBorder(),
primary: state.option == AppBarOptions.tickets
? Colors.grey.shade800
: Theme.of(context).primaryColor),
child: Icon(Icons.receipt,
color: Theme.of(context).backgroundColor),
onPressed: () {
setState(() {
_screenIndex = 1;
});
},
),
),
),
JustTheTooltip(
tailLength: 0,
preferredDirection: AxisDirection.down,
content: const Padding(
padding: EdgeInsets.all(5.0),
child: Text('Movements'),
),
child: Padding(
padding: const EdgeInsets.only(top: 10, bottom: 10),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
elevation: 0,
shape: const CircleBorder(),
primary: state.option == AppBarOptions.movements
? Colors.grey.shade800
: Theme.of(context).primaryColor),
child: Icon(Icons.print_outlined,
color: Theme.of(context).backgroundColor),
onPressed: () {
setState(() {
_screenIndex = 2;
});
},
),
),
),
JustTheTooltip(
tailLength: 0,
preferredDirection: AxisDirection.down,
content: const Padding(
padding: EdgeInsets.all(5.0),
child: Text('Orders'),
),
child: Padding(
padding: const EdgeInsets.only(top: 10, bottom: 10),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
elevation: 0,
shape: const CircleBorder(),
primary: state.option == AppBarOptions.orders
? Colors.grey.shade800
: Theme.of(context).primaryColor),
child: Icon(Icons.assignment,
color: Theme.of(context).backgroundColor),
onPressed: () {
setState(() {
_screenIndex = 3;
});
},
),
),
),
context
.watch<AuthCubit>()
.state
.currentUSer
?.photoUrl
?.isEmpty ==
null
? const Padding(
padding: EdgeInsets.all(8.0),
child: CircleAvatar(
foregroundImage:
AssetImage("assets/userIcon.png")),
)
: Padding(
padding: const EdgeInsets.all(8.0),
child: CircleAvatar(
foregroundImage: NetworkImage(
'${context.watch<AuthCubit>().state.currentUSer?.photoUrl}')),
),
],
),
body: AnimatedSwitcher(
transitionBuilder:
(Widget child, Animation<double> animation) {
final inAnimation = Tween<Offset>(
begin: Offset(1.0, 0.0), end: Offset(0.0, 0.0))
.animate(animation);
final outAnimation = Tween<Offset>(
begin: Offset(-1.0, 0.0), end: Offset(0.0, 0.0))
.animate(animation);
if (child.key == ValueKey(screens[state.screenIndex])) {
return ClipRect(
child: SlideTransition(
position: inAnimation,
child: child,
),
);
} else {
return ClipRect(
child: SlideTransition(
position: outAnimation,
child: child,
),
);
}
},
duration: Duration(milliseconds: 100),
child: screens[_screenIndex])); // Need to update url here somehow according to routes defined in my main.dart`
},
listener: (context, state) {},
),
);
}
}
1条答案
按热度按时间20jt8wwn1#
推送到定义了命名路由的新页面时,请使用
Navigator.pushNamed(context, 'name_of_route_here');
。对你来说,我要的是:
如果您注意到的话,我有第二个命名路由
/home/...
,它允许URL以前缀/home
显示。要管理多个路由,您可以使用字符串列表:
然后您可以使用
Navigator.pushNamed(context, screens[i]);