MaterialApp 详解

作者: 高思阳 | 来源:发表于2020-08-25 18:02 被阅读0次

    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;
                  //如果访问的路由页需要登录,但当前未登录,则这里直接返回登录页路由,引导用户登录;其他情况下则是正常打开路由
            });
          },
        );
    

    相关文章

      网友评论

        本文标题:MaterialApp 详解

        本文链接:https://www.haomeiwen.com/subject/laezjktx.html