[移动开发]Flutter路由

一.MaterialApp中‘initialRoute’和home的区别

1.先看一下我的路由定义

final routes = {
  '/': (context) => WelcomePage(),
  '/welcomePage': (context) => WelcomePage1(),

};
// 固定写法
var onGenerateRoute = (RouteSettings settings) {
  //统一处理
  final String name = settings.name!;
  final Function pageContentBuilder = routes[name]!;
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
          builder: (context) =>
              pageContentBuilder(context, arguments: settings.arguments));
      return route;
    } else {
      final Route route =
          MaterialPageRoute(builder: (context) => pageContentBuilder(context));
      return route;
    }
  }
};

2.main中加载路由代码

MaterialApp(
        builder: (context, widget) {
          return MediaQuery(
            ///设置文字大小不随系统设置改变
            data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
            child: widget!,
          );
        },
        //去掉debug字样
        debugShowCheckedModeBanner: true,
        //初始化路由
        initialRoute: '/welcomePage',
        // home: WelcomePage(),
        //命名路由
        onGenerateRoute: onGenerateRoute,
        navigatorObservers: [
          MyApp.routeObserver, // 路由监听
        ],
      )

3.在使用'initialRoute'进行初始化页面需要注意在路由定义中要定义'/'为名字的路由要不然会一直报错 ，这种方式需要定义根目录

4.使用'initialRoute'加载页面在加载‘/welcomePage’的时候也会将你的根目录放到栈内《有兴趣的人小伙伴可以试试》

5.使用'home'加载就是我们认为的那种，先加载第一个页面在加载第二页面

6.记录一下自己遇到问题哪里写的不对欢迎指正