如何改变flutter WEB网址编程?

li9yvcax  于 2022-11-30  发布在  Flutter
关注(0)|答案(1)|浏览(99)

因此我在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) {},
      ),
    );
  }
}
20jt8wwn

20jt8wwn1#

推送到定义了命名路由的新页面时,请使用Navigator.pushNamed(context, 'name_of_route_here');
对你来说,我要的是:

initialRoute: '/home',
      routes: {
        '/home': (context) => const MyHomePage(title: 'Flutter Demo Home Page'),
        '/home/second': (context) => const MyHomePage(title: "s",),
      },

如果您注意到的话,我有第二个命名路由/home/...,它允许URL以前缀/home显示。
要管理多个路由,您可以使用字符串列表:

final screens  = [  //screens is a List<Strings> 
      const '/home/web-add-page', 
      const '/home/web-update-products', 
      const '/home/web-update-cat', 
      const '/home/web-update-stores', 
      const '/home/web-update-users' 
    ];

然后您可以使用Navigator.pushNamed(context, screens[i]);

相关问题