一、页面实现(类似Activity):
1.继承StatelessWidget方式(无状态):
class 界面类名 extends StatelessWidget {
const 界面类名({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return 布局类或容器类Widget(
... //省略具体页面布局
);
}
}
2.继承StatefulWidget方式(有状态):
class 界面类名 extends StatefulWidget {
const 界面类名({Key? key}) : super(key: key);
@override
自定义State类 createState() => 自定义State类();
}
//自定义State类
class 自定义State类 extends State<CounterWidget> {
@override
Widget build(BuildContext context) {
return 布局类或容器类Widget(
... //省略具体页面布局
);
}
}
二、页面跳转:
1.普通方式打开/退出页面:
(1)打开页面:
Navigator.push(
context,
//MaterialPageRoute配置要打开的页面、过渡动画等
MaterialPageRoute(
builder: (context) {
return X页Widget(); //要打开的X页Widget
},
settings: ..., //路由界面的配置信息,如路由界面名称
maintainState: true, //true是一直保存内存中,false是路由无用时释放资源
fullscreenDialog: false //新路由页面是否为全屏的模态对话框
),
);
(2)退出页面:
Navigator.pop(context); //没有返回值
Navigator.pop(context, "返回值"); //有返回值
2.命名路由方式打开/退出页面:
(1)注册页面路由:
MaterialApp(
..., //省略其他
initialRoute:"/", //"/"的路由作为APP的首页
..., //省略其他
routes:{ //注册路由表
"/":(context) => 首页Widget(), //注册首页路由
"X页路由名":(context) => X页Widget(), //注册X页路由
... //省略其他页路由
}
);
(2)通过路由id打开新界面:
Navigator.pushNamed(context, "X页路由名"); //无参
Navigator.of(context).pushNamed("X页路由名", arguments: "参数值"); //带参
(3)页面中获取传参:
class X页 extends StatelessWidget {
@override
Widget build(BuildContext context) {
var 参数值 = ModalRoute.of(context).settings.arguments; //获取参数值
}
}
3.路由钩子(打开新界面时拦截):
MaterialApp(
... //省略
onGenerateRoute:(settings) { //路由表中没有注册的页面会触发onGenerateRoute
return MaterialPageRoute(builder: (context) {
//例:加条件判断是否已登录,未登录跳登录页
return 登录页Widget(settings.arguments);
}
});
);
4.路由钩子(跳转时拦截):
MaterialApp(
... //省略
unknownRoute:(settings) { //路由名匹配不到时触发unknownRoute
return MaterialPageRoute(builder: (context) => return 错误页Widget();
});
);
三、页面布局摘要: