MaterialApp 详解

MaterialApp 代表使用纸墨设计(Material Design)风格的应用。里面包含了纸墨设计风格应用所需要的基本控件。

MaterialApp 主要属性如下:

  • title : 在任务管理窗口中所显示的应用名字
  • theme : 应用各种 UI 所使用的主题颜色
  • color : 应用的主要颜色值(primary color),也就是安卓任务管理窗口中所显示的应用颜色
  • home : 应用默认所显示的界面 Widget
  • routes : 应用的顶级导航表格,这个是多页面应用用来控制页面跳转的,类似于网页的网址
  • initialRoute :第一个显示的路由名字,默认值为 Navigator.defaultRouteName
  • onGenerateRoute : 生成路由的回调函数,当导航的命名路由的时候,会使用这个来生成界面
  • onLocaleChanged : 当系统修改语言的时候,会触发这个回调
  • navigatorObservers : 应用 Navigator 的监听器
  • debugShowMaterialGrid : 是否显示 纸墨设计 基础布局网格,用来调试 UI 的工具
  • showPerformanceOverlay : 显示性能标签
  • debugShowCheckedModeBanner :是否显示右上角DEBUG标签 (调试开关)
  • checkerboardRasterCacheImages :检查缓存的图像开关,检测在界面重绘时频繁闪烁的图像(调试开关)
  • showSemanticsDebugger :是否打开Widget边框,类似Android开发者模式中显示布局边界(调试开关)

下面将介绍重要的几个属性。

title

这个和启动图标名字是不一样的,和当前 Activity 的名字也是不一样的。 这个 Title 是用来定义任务管理窗口界面所看到应用名字的。在原生 Android 系统中点击圆圈 Home 按钮右边的方块按钮就会打开多任务切换窗口。

theme

定义应用所使用的主题颜色,在纸墨设计中定义了 primaryColor、accentColor、hintColor 等颜色值。可以通过这个来指定一个 ThemeData 定义应用中每个控件的颜色。

home

这个是一个 Widget 对象,用来定义当前应用打开的时候,所显示的界面。

color

定义系统中该应用的主要颜色

routes

定义应用中页面跳转规则。 该对象是一个 Map<String, WidgetBuilder>。

当使用 Navigator.pushNamed 来路由的时候,会在 routes 查找路由名字,然后使用 对应的 WidgetBuilder 来构造一个带有页面切换动画的 MaterialPageRoute。如果应用只有一个界面,则不用设置这个属性,使用 home 设置这个界面即可。

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


class  MyApp  extends  StatelessWidget  {

  final  Map<String,  WidgetBuilder>  _routes  =  <String,  WidgetBuilder>{

    Navigator.defaultRouteName :  (context)  => new  MyHomePage(title:  'Flutter Demo Home Page') //默认路由

  };

  // This widget is the root of your application.

  @override

  Widget build(BuildContext context)  {

    return  new  MaterialApp(

      title:  'Flutter App',

      debugShowMaterialGrid:  true,

      routes:  _routes,  // 使用 _routes 中定义的 默认路由来替代 home

      //home: new MyHomePage(title: 'Flutter Demo Home Page'),  //去掉这里的注释,则需要将_routes里面的默认路由删掉

    );

  }
}

修改了 title、home 被注释了使用 routes 来替代。

如果所查找的路由在 routes 中不存在,则会通过 onGenerateRoute 来查找。

initialRoute

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

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

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

onGenerateRoute

路由回调函数,在打开命名路由的时候可能会被调用,之所以说可能,是因为当调用Navigator.pushNamed(...)打开命名路由时,如果指定的路有名在路由表中已注册,则回调用路由表中的builder函数来生成路由组建;如果路由表中没有注册,则会调用onGenerateRoute来生成路由。
假设我们需要开发一个电商APP,当用户没有登录的时候可以查看碘伏、商品等信息,但是交易记录、购物车、用户个人信息等页面需要登录后才能查看。就可以在onGenerateRoute回调中进行统一的权限控制:

MaterialApp(
      ... //省略无关代码
      onGenerateRoute: (RouteSettings settings){
          return MaterialPageRoute(settings: settings, builder: (BuildContext context) {
              String routeName = settings.name;
              //如果访问的路由页需要登录,但当前未登录,则这里直接返回登录页路由,引导用户登录;其他情况下则是正常打开路由
        });
      },
    );
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342