Flutter 页面跳转和数据传值 pop回指定页面(路由实践)

flutter搭建app 感觉相对简化了很多，布局核心就是万事皆widget，在之前我们不管是iOS 安卓原生 还是rn 我们在页面跳转和回转，我们都要对页面进行管理，从iOS 到安卓 到rn  路由被强调话了，web前端的一些重要设计思想被借鉴，同事web也借鉴了原生移动的思想，好了说正事了，flutter的路由，你可以自己封装，设计路由，但是Google为我们设计了好的控件，这里用的比较多的就是MaterialApp，它也是个widget,需要强调的一点是它要被放在最里层，之后就是将你的其他页面控件交给他管理。好了我们看看核心代码，在代码里面详解。

首先我们需要添加我们页面：

//一般来说MaterialApp 这个是放到程序的入口，可以理解先把他放进栈底
class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      //有home属性的话就从Home入口进去，没有添加'/'代表入口,后面标准写法'/'+你设置的页面标签名字
      routes: <String,WidgetBuilder>{
        "/":(BuildContext context)=>new MyHomePage(),
        "/home":(BuildContext context)=>new Home(),
        "/Login":(BuildContext context)=>new LoginVc(),
        "/scan":(BuildContext context)=>new ScanCodeVc(),
      },
    );
  }
}

我们看下页面跳转指定页面代码

//跳转指定页面，参数放在arguments中，通常是以map形势传过去
Navigator.pushNamed(context, '/scan',arguments:{'data':'hahahaha'});



//页面 接收参数代码
class ScanCodeVc extends StatefulWidget{
  // 名字必须一致（注意这样是获取不到参数，当时不是知道是怎么回事应该在build通过context拿到arguments）
  final String data;
   
  const HLScanCodeVc({Key key, this.data}) : super(key: key);
    .......
     

  @override
  Widget build(BuildContext context) {
    Map arguments = ModalRoute.of(context).settings.arguments;
    var uid = arguments['data'];  
    .........
    }

}

pop回指定的页面

//这里直接返回到root页面 文档上说会一直pop页面知道遇到指定的页面为止
//这种用到的地方还是挺多的比如 A-->B--->c--->d  d页面完成直接返回A,bc就直接pop出栈
Navigator.popUntil(context,  ModalRoute.withName('/'));

如果你只设计下一级的页面跳转和返回，你也不需要将页面提前放到路由上面，你可以这样做

//直接push
Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
  return new LoginVc();
 }));


//直接pop 只能返回上一级
Navigator.pop(context,"返回");

最后说说我遇到的坑吧 在编译的时候有时你会报什么[ ,未识别的错误，但是开发环境并没有提示有什么错误，一编译就报错，这种我停止编译，关闭模拟器，然后清理一下，奇迹可以运行了，怀疑是缓存的原因吧。