美文网首页
flutter 使用命名的路由传递

flutter 使用命名的路由传递

作者: 别看后面有人 | 来源:发表于2023-07-25 15:50 被阅读0次

    全是学习和搬砖,只为记录部分代码,写项目的时候可以翻看一下
    注意事项:使用命名路由的话body部分不能和routes同时存在,可以把body部分放在根部路由 "/"下面
    另外如果有带参数的路由的话需要onGenerateRoute获取路由,
    pageContentBuilder中的参数arguments 必须和routes中写的一致,不一致会报如图错误*

    void main(){
      runApp(MyApp());
    }
    
    
    class MyApp extends StatelessWidget {
    
      MyApp({Key? key});
      Map routes={
        "/":(context)=>RouteNameDemo(),
        "/page":(context)=>DemoPage(),
        "/two":(context,{arguments})=>TwoRoute2(args: arguments,)
      };
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: "命名路由",
          // routes: {
          //   "/":(context)=>RouteNameDemo(),
          //   "/page":(context)=>DemoPage(),
          //   "/two":(context,{args})=>TwoRoute2(args: args,)
          // },
          initialRoute: "/",
          onGenerateRoute: (RouteSettings settings){
            //统一处理
            final String? name=settings.name;
            final Function? pageContentBuilder=routes[name];
            if(pageContentBuilder!=null){
              if(settings.arguments!=null){
                final Route route=MaterialPageRoute(builder: (context)
                =>pageContentBuilder(context,arguments:settings.arguments)
                );
                return route;
              }else{
                final Route route=MaterialPageRoute(builder: (context)=>
                pageContentBuilder(context)
                );
                return route;
              }
            }
            return null;
          },
        );
      }
    }
    
    class RouteNameDemo extends StatelessWidget {
      const RouteNameDemo({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text("命名路由"),
          ),
          body: ListView(
            children: [
              TextButton(
                onPressed: (){
                  Navigator.of(context).pushNamed("/page");
                },
                child: Text("跳转"),
              ),
    
              TextButton(
                onPressed: () async {
                 await Navigator.of(context).pushNamed("/two",arguments: {
                    "name":"张三",
                    "name1":"张三1",
                    "name2":"张三2",
                    "name3":"张三3",
    
                  });
                },
                child: Text("跳转带参数"),
              )
            ],
          )
        );
      }
    }
    
    9d265b20f014c8bf9d4a477068f9dba9.jpg

    接收页面的代码:

    class TwoRoute2 extends StatelessWidget {
      final Map args;
      const TwoRoute2({Key? key, required this.args});
    
      List<Widget> _getListData(){
        List<Widget> data=[];
        for(String str in args.values.toList()){
          data.add(ListTile(
            title: Text(str),
          ));
        }
    
        return data;
      }
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text("第二个页面"),
          ),
          body: Scaffold(
            appBar: AppBar(
              title: const Text("路由"),
            ),
            body: ListView(
              children:_getListData(),
            ),
          )
        );
      }
    }
    
    
    

    相关文章

      网友评论

          本文标题:flutter 使用命名的路由传递

          本文链接:https://www.haomeiwen.com/subject/jarhpdtx.html