Flutter中的MaterialApp应用组件简述

1. 概述

MaterialApp代表使用Material Design纸墨设计风格的应用，它包含了其所需的基本控件。在Flutter应用中，一个完整的项目是从MaterialApp这个组件开始的，即MaterialApp作为入口存在的。

2.MaterialApp的属性及说明

字段	描述	类型
navigatorKey	导航键	GlobalKey
home	主页（app运行时打开的首页面）	Widget
initialRoute	初始路由	String
routes	路由（内容为map健值对；key为路由名称，value为路由对应的页面。页面需要跳转时，可以通过Navigator.pushNamed(context, ‘rooteName’);来跳转）	Map
onGenerateRoute	生成路由	RouteFactory
onUnknownRoute	未知路由	RouteFactory
navigatorObservers	导航观察器	List
builder	建造者	TransitionBuilder
title	标题（应用的名字）	String
onGenerateTitle	生成标题	GenerateAppTitle
color	颜色(程序切换中应用图标背景的颜色，当应用图标背景为透明时)	Color
theme	主题	ThemeData
locale	地点(当前区域，如果为null则使用系统区域一般用于语言切换)	Locale
localizationsDelegates	本地化委托(本地化委托，用于更改Flutter Widget默认的提示语，按钮text等)	Iterable
localeResolutionCallback	区域分辨回调(当传入的是不支持的语种，可以根据这个回调，返回相近,并且支持的语种)	LocaleResolutionCallback
supportedLocales	支持区域，传入支持的语种数组	Iterable
debugShowMaterialGrid	调试显示材质网格（debug模式下是否显示材质网格，传入bool类型，使用就不写了）	bool
showPerformanceOverlay	显示性能叠加（当为true时应用程序顶部覆盖一层GPU和UI曲线图，可即时查看当前流畅度情况）	bool
checkerboardRasterCacheImages	棋盘格光栅缓存图像（当为true时，打开光栅缓存图像的棋盘格）	bool
checkerboardOffscreenLayers	棋盘格层（当为true时，打开呈现到屏幕位图的层的棋盘格）	bool
showSemanticsDebugger	显示语义调试器（当为true时，打开Widget边框，类似Android开发者模式中显示布局边界）	bool
debugShowCheckedModeBanner	调试显示检查模式横幅（当为true时，在debug模式下显示右上角的debug字样的横幅，false即为不显示）	bool

3.MaterialApp重要属性使用举例

下面是本人随便写的几句代码 ，目的是展示一下上述属性的基本用法。因为路由有关的内容较多，本文不展示路由的用法了，放在别的文章总结。除了路由以外的属性举例如下：

import 'package:flutter/material.dart';

void main() => runApp(MyMaterialApp());

GlobalKey navigatorKeyList = new GlobalKey(); //导航键状态集合

class MyMaterialApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MaterialAppDemo举例',
      color: Colors.brown,
      locale: new Locale('yy', 'zh'),
      navigatorKey: navigatorKeyList,
      //不显示右上角的debug字样的横幅
      debugShowCheckedModeBanner: false,
      //显示布局边界
      showSemanticsDebugger: true,
      //应用程序顶部覆盖一层GPU和UI曲线图，可即时查看当前流畅度情况
      showPerformanceOverlay:true,
      //打开呈现到屏幕位图的层的棋盘格
      checkerboardOffscreenLayers:true,
      //打开光栅缓存图像的棋盘格
      checkerboardRasterCacheImages:true,
      //debug模式下是否显示材质网格
      debugShowMaterialGrid:true,
      theme: ThemeData(
        primarySwatch: Colors.blue, //主题色
        primaryColor: Colors.red, //导航栏颜色
        canvasColor: Colors.yellow, //画布颜色
      ),
      home: ListViewDemo(),
    );
  }
}

class ListViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = "垂直的列表";
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: new AppBar(
          title: new Text(title),
        ),
        //添加基础列表
        body: new ListView(
          children: [
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('Phone'),
            ),
            ListTile(
              leading: Icon(Icons.airplay),
              title: Text('Airplay'),
            ),
          ],
        ),
      ),
    );
  }
}

屏幕展示截图