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

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

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

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

代码实例：

Dart 复制代码

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"页面

Dart 复制代码

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）：

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