MaterialApp - flutter布局篇-6

这个是有状态的widget,有以下参数
 this.navigatorKey, // 导航的key
    this.home, // 主页
    this.routes = const <String, WidgetBuilder>{},// 路由
    this.initialRoute,//初始路由
    this.onGenerateRoute,//生成路由
    this.onUnknownRoute,//位置路由
    this.navigatorObservers = const <NavigatorObserver>[],//导航的观察者
    this.builder,//widget的构建
    this.title = '',//设备用于识别用户的应用程序的单行描述。在Android上,标题显示在任务管理器的应用程序快照上方,当用户按下“最近的应用程序”按钮时会显示这些快照。 在iOS上,无法使用此值。 来自应用程序的`Info.plist`的`CFBundleDisplayName`在任何时候都会被引用,否则就会引用`CFBundleName`。要提供初始化的标题,可以用 onGenerateTitle。
    this.onGenerateTitle,//每次在WidgetsApp构建时都会重新生成
    this.color,//背景颜色
    this.theme,//主题,用ThemeData
    this.locale,//app语言支持
    this.localizationsDelegates,//多语言代理
    this.localeResolutionCallback,//
    this.supportedLocales = const <Locale>[Locale('en', 'US')],//支持的多语言
    this.debugShowMaterialGrid = false,//显示网格
    this.showPerformanceOverlay = false,//打开性能监控,覆盖在屏幕最上面
    this.checkerboardRasterCacheImages = false,
    this.checkerboardOffscreenLayers = false,
    this.showSemanticsDebugger = false,//打开一个覆盖图,显示框架报告的可访问性信息 显示边框
    this.debugShowCheckedModeBanner = true,//右上角显示一个debug的图标
大家可以新建一个项目,在main.dart文件里面就能看到这个东西啦
    * 如果home首页指定了,routes里面就不能有'/'的根路由了,会报错,/指定的根路由就多余了
       * 如果没有home指定具体的页面,那routes里面就傲有/来指定根路由
       * 路由的顺序按照下面的规则来:
       * 1、如果有home,就会从home进入
       * 2、如果没有home,有routes,并且routes指定了入口'/',就会从routes的/进入
       * 3、如果上面两个都没有,或者路由赵达不到,如果有 onGenerateRoute,就会进入生成的路由
       * 4、如果连上面的生成路由也没有,就会走到onUnknownRoute,不明所以的路由,比如网络连接失败,可以进入断网的页面

具体的用法看下下面的代码

1、home:主页面

home: Home(),

2、routes:路由
final routes = {
  '/Transform1': (BuildContext context) => new Transform1(),
  '/Scale1': (BuildContext context) => new Scale1(),
  '/Rotation1': (BuildContext context) => new Rotation1(),
  '/': (BuildContext context) => new Home(),
};
...
在build里面
routes: routes,

routes是一个对象,键是字符串,值是widgetbuilder,也就是widget
里面包含了页面的路由页面配置。

3、initialRoute: '/',初始路由

4、onGenerateRoute: 生成路由

有下面的用法

onGenerateRoute: (RouteSettings settings) {
        return new MaterialPageRoute<void>(
          settings: settings,
          builder: (BuildContext context) => Text('生成了路由'),
        );
onGenerateRoute: (RouteSettings settings) {
        return new MaterialPageRoute<void>(
          settings: settings,
          builder: (BuildContext context) => MaterialApp(
                // routes: <String, WidgetBuilder>{
                //   '/': (context) => Text('用MaterialApp生成了新的路由')
                // },
                routes: routes,
              ),
        );
      },

5、onUnknownRoute: 未知路由

 onUnknownRoute: (RouteSettings settings) => MaterialPageRoute<void>(
          settings: settings,
          builder: (BuildContext context) => Text('路由找不到了')),

6、navigatorObservers: 导航观察者

导航路由在跳转时的回调,比如 push,pop,remove,replace是,可以拿到当前路由和后面路由的信息。
route.settings.name可以拿到路由的名字

   navigatorObservers: <NavigatorObserver>[NewObserver()],


//导航的观察者
//继承NavigatorObserver
class NewObserver extends NavigatorObserver {
  @override
  void didPush(Route route, Route previousRoute) {
    // 当调用Navigator.push时回调
    super.didPush(route, previousRoute);
    //可通过route.settings获取路由相关内容
    print(route.settings);
    print(previousRoute);
  }

  @override
  void didPop(Route route, Route previousRoute) {
    // TODO: implement didPop
    // 当调用Navigator.pop时回调
    super.didPop(route, previousRoute);
    print(route);
    //route.currentResult获取返回内容
    print(previousRoute);
  }

  @override
  void didRemove(Route route, Route previousRoute) {
    // TODO: implement didRemove
    // 当调用Navigator.Remove时回调
    super.didRemove(route, previousRoute);
    print(route);
    print(previousRoute);
  }

7、builder: widget

这个是直接渲染这个builder,不会走路由,优先渲染这个里面的widget

builder: (BuildContext context, Widget w) => Text("生成新的view"),

8、title:任务管理器显示的标题

设备用于识别用户的应用程序的单行描述。在Android上,标题显示在任务管理器的应用程序快照上方,当用户按下“最近的应用程序”按钮时会显示这些快照。 在iOS上,无法使用此值。 来自应用程序的Info.plistCFBundleDisplayName在任何时候都会被引用,否则就会引用CFBundleName。要提供初始化的标题,可以用 onGenerateTitle。

9、onGenerateTitle: 生成任务管理器显示的标题

每次在WidgetsApp构建时都会重新生成

import 'dart:math';
...
Random a = Random(10);
...
在build的方法里面

onGenerateTitle: (BuildContext context) =>
          '${a.nextInt(100)}-随机标题', //生成app的name,不能反回空,返回的是字符串

10、 color: Colors.green,//任务管理器的标题背景颜色

11、 theme //主题

具体的用法如下


 theme: new ThemeData(
          primarySwatch: Colors.red, brightness: Brightness.light),

ThemeData单独拿一篇文章来给大家演示,演示更直观些。

11、 showPerformanceOverlay //打开性能监视,覆盖在屏幕最上面。

默认值是false

显示内容如下
        CPU 15.5fps 60.7ms/frame
        UI 0.5fps 2059.2ms/frame

12、 checkerboardRasterCacheImages

默认值是false

13、 checkerboardOffscreenLayers

默认值是false

14、 showSemanticsDebugger 打开一个覆盖图,显示框架报告的可访问性信息

默认值是false

15、 debugShowCheckedModeBanner 右上角显示一个debug的图标

默认值是false

16、 debugShowMaterialGrid 显示网格

默认值是false

17、 locale 支持的语言

18、 supportedLocales 支持的多国语言

多国的语言可以查看
https://github.com/Lizhooh/flutter-app-in-action/blob/f8f2e4c4bc34e5c46f8daba518cb404ac4ae6903/docs/%E7%AC%AC%E4%B8%89%E7%AB%A0/3.1.md



static final List<Locale> supportedLocales = [ const Locale('en', 'US'), const Locale('fi', 'FI'),
  ]; 

19、 localizationsDelegates 多语言代理

 static final List<LocalizationsDelegate> localizationsDelegates = [
     AppLocalizations.delegate,
     GlobalMaterialLocalizations.delegate,
     GlobalWidgetsLocalizations.delegate,
  ]; 

20、 localeResolutionCallback 多语言回调

 static Locale localeResolutionCallback(
      Locale locale, Iterable<Locale> supportedLocales) { for (var supportedLocale in supportedLocales) { if (supportedLocale.languageCode == locale.languageCode) { return supportedLocale;
      }
    } return supportedLocales.first;
  }

本博客所有文章如无特别注明均为原创。作者:flutter教程网复制或转载请以超链接形式注明转自 Flutter教程网
原文地址《MaterialApp - flutter布局篇-6
分享到:更多

相关推荐


Flutter教程网 官方QQ群:874592746

扫描下面二维码 加入Flutter教程网微信群:


发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)