flutter routes

逻辑玄冰探
• 阅读 3616

Flutter router
lib/routes.dart

import 'package:flutter/material.dart';
import 'package:flutter_sky/screens/home/index.dart';
import 'package:flutter_sky/screens/profile/index.dart';
class Routes{
    static final home = new Home();
    static final profile = new Profile();
    final routes = {
        '/': (context) => home,
        '/home': (context) => home,
        '/profile': (context) => profile
    };
    
    Routes(){
        runApp(new MaterialApp(
            title: 'flutter sky',
//            initialRoute: '/',
//            home: profile,
            routes: routes,
        )); 
    }
}

上面是一个简单的路由配置代码,假设现在的APP有2个页面:home, profile。我们拿这个例子来讲一下flutter的routes配置一些注意的点:
首先可以看到注掉的那2行代码,分别是MaterialApp的两个属性:initialRoute和home。

// 声明:以下讨论都是基于不考虑onGenerateRoute和onUnknownRoute的存在

initialRoute
是启动APP的初始页面,也就是用户看到的第一个页面。如果这个属性没有给值,那么会去寻找路由表里面的'/',或者MaterialApp的home属性。

'/'和MaterialApp的home属性
路由表(也就是我们上面代码里面定义的routes变量)里面的'/' 和MaterialApp的home属性,二者不能同时存在,但是必须有一个存在。

当initialRoute没有设置
或者MaterialApp的home属性都是定义了主页面,当initialRoute没有定义的时候,用户看到的就是'/'或者MaterialApp的home多对应的页面

当initialRoute设置了
当initialRoute和'/'或者MaterialApp的home属性同时存在的时候,initialRoute的优先级高于二者。意思就是如果initialRoute定义的页面和'/'或者MaterialApp的home设置的页面不同时,用户看到的是initialRoute定义的页面。

点赞
收藏
评论区
推荐文章
Stella981 Stella981
3年前
Flutter接入现有iOS工程(混编)、开发调试、打包发布精简教程
本教程是在xcode11.1、cocospod1.7.5、flutter1.10.15pre.115下完成的。    1.安装flutter    按照官网的教程,一步一步来,没什么好说的。https://flutterchina.club/setupmacos/(https://ww
Stella981 Stella981
3年前
Flutter学习之动态ListView
import'package:flutter/material.dart';voidmain(){runApp(listname(item:newList<String.generate(1000,(i)"genarate$i")));}
Stella981 Stella981
3年前
Flutter
在Flutter加载网页?也是有WebView的哦,和Android一样1.添加依赖dependencies:flutter\_webview\_plugin:^0.2.122.导入库import'import'package:flutter\_webview\_plugin/flutter\_webview\_plug
Stella981 Stella981
3年前
Flutter 页面入栈和出栈
Docs(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fdocs.flutter.io%2Fflutter%2Fwidgets%2FNavigatorclass.html)demoimport'package:flutter/material.dart';
Stella981 Stella981
3年前
Flutter中日期组件DatePicker及组件汉化
Flutter提供了DatePicker组件进行时间选择。日期组件及时间组件代码示例:import'package:flutter/material.dart';//第三方插件,需要提前配置import'package:date_format/date_format.dart';classDat
Stella981 Stella981
3年前
Flutter学习之重叠布局
1.两个元素的重叠布局可以使用stack组件import'package:flutter/material.dart';voidmain(){runApp(MyApp());}classMyAppextendsStatelessWidget{
Stella981 Stella981
3年前
Flutter Widget不刷新问题
import'package:flutter/material.dart';///温度显示okclassTemperatureIndicationextendsStatefulWidget{finalValueChanged<intvalueChanged;final
Stella981 Stella981
3年前
Flutter入门(四)
\TabBar(顶部导航)import'package:flutter/material.dart';classCategoryPageextendsStatefulWidget{CategoryPage({Keykey}):super(key:key);@o
Stella981 Stella981
3年前
Flutter BottomSheet底部弹窗效果
BottomSheet是一个从屏幕底部滑起的列表(以显示更多的内容)。你可以调用showBottomSheet()或showModalBottomSheet弹出import'package:flutter/material.dart';import'dart:async';classBottomSheetDem
Stella981 Stella981
3年前
Flutter 基础组件:文本、字体样式
//文本、字体样式import'package:flutter/material.dart';classTextFontStyleextendsStatelessWidget{//声明文本样式TextStyletextStyleconstT
Stella981 Stella981
3年前
34 Flutter仿京东商城项目 用户注册 注册流程 POST发送验证码 倒计时功能 验证验证码
加群_452892873_下载对应34课文件,运行方法,建好项目,直接替换lib目录以下列出的是本课涉及的文件。RegisterFirst.dartimport'package:flutter/material.dart';import'package:flutter_jdshop/services/ScreenA