flutter佈局-6-MaterialApp

劉成發表於2018-11-08
FlutterAPP

示例 github：flutterlayout https://github.com/LiuC520/flutterlayout

MaterialApp

連載：flutter佈局-1-column

連載：flutter佈局-2-row

連載：flutter佈局-3-center

連載：flutter佈局-4-container

連載：[flutter佈局-5-Matrix4矩陣變換

這個是有狀態的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.plist的CFBundleDisplayName在任何時候都會被引用，否則就會引用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 支援的多國語言

多國的語言可以檢視 github.com/Lizhooh/flu…

 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;
  }
複製程式碼

相關文章