Flutter第十七节-----路由管理(3)

一.路由管理-动态路由与高级控制

●场景：更复杂的场景，如需根据参数动态生成页面，或实现路由拦截，可以使用onGenerateRoute和onUnknownRoute。

●onGenerateRoute:允许你根据RouteSettings(包含路由名称和参数)动态创建不同的Route

代码实例：

import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; void main(List<String> args) { runApp(Mainpage()); } class Mainpage extends StatelessWidget { const Mainpage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( initialRoute: "/goodsList", routes: {"/goodsList": (context) => GoodsList()}, onGenerateRoute: (settings) { print(settings.name); if (settings.name == "/cardList") { bool isLogin = true; if (isLogin) { return MaterialPageRoute(builder: (context) => cardList()); } else { return MaterialPageRoute(builder: (context) => Loginpage()); } } }, ); } } class GoodsList extends StatefulWidget { GoodsList({Key? key}) : super(key: key); @override _GoodsListState createState() => _GoodsListState(); } class _GoodsListState extends State<GoodsList> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("商品列表")), body: Center( child: TextButton( onPressed: () { Navigator.pushNamed(context, "/cardList"); }, child: Text('加入购物车'), ), ), ); } } class cardList extends StatefulWidget { cardList({Key? key}) : super(key: key); @override _cardListState createState() => _cardListState(); } class _cardListState extends State<cardList> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("购物车列表")), body: Center( child: TextButton(onPressed: () {}, child: Text('去支付')), ), ); } } class Loginpage extends StatefulWidget { Loginpage({Key? key}) : super(key: key); @override _LoginpageState createState() => _LoginpageState(); } class _LoginpageState extends State<Loginpage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("登录页面")), body: Center( child: TextButton(onPressed: () {}, child: Text('去登录')), ), ); } }

==========》

当isLogin为false时：

==========》

二.404页面

●onUnknownRoute:：跳转一个未在路由表中注册、也未在onGenerateRoute中处理的路由，会调用此回调。通常显示"404"页面

import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; void main(List<String> args) { runApp(Mainpage()); } class Mainpage extends StatelessWidget { const Mainpage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( initialRoute: "/goodsList", routes: {"/goodsList": (context) => GoodsList()}, onGenerateRoute: (settings) { print(settings.name); if (settings.name == "/cardList") { bool isLogin = false; if (isLogin) { return MaterialPageRoute(builder: (context) => cardList()); } else { return MaterialPageRoute(builder: (context) => Loginpage()); } } }, onUnknownRoute: (settings) { return MaterialPageRoute(builder: (context) => NotFound()); }, ); } } class GoodsList extends StatefulWidget { GoodsList({Key? key}) : super(key: key); @override _GoodsListState createState() => _GoodsListState(); } class _GoodsListState extends State<GoodsList> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("商品列表")), body: Center( child: TextButton( onPressed: () { Navigator.pushNamed(context, "/abc"); }, child: Text('加入购物车'), ), ), ); } } class cardList extends StatefulWidget { cardList({Key? key}) : super(key: key); @override _cardListState createState() => _cardListState(); } class _cardListState extends State<cardList> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("购物车列表")), body: Center( child: TextButton(onPressed: () {}, child: Text('去支付')), ), ); } } class Loginpage extends StatefulWidget { Loginpage({Key? key}) : super(key: key); @override _LoginpageState createState() => _LoginpageState(); } class _LoginpageState extends State<Loginpage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("登录页面")), body: Center( child: TextButton(onPressed: () {}, child: Text('去登录')), ), ); } } class NotFound extends StatefulWidget { NotFound({Key? key}) : super(key: key); @override _NotFoundState createState() => _NotFoundState(); } class _NotFoundState extends State<NotFound> { @override Widget build(BuildContext context) { return Container( child: Center( child: Image.asset("lib/image/1.png", width: 300, height: 400), ), ); } }

现在我们点击按钮跳转到了一个随便写的不存在的地址abc当中，则会加载我们的图片（正常业务中图片显示404）：

============》