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