Flutter 系列文章：Flutter MaterialApp 控件介绍

1、控件介绍

一个用于材料设计的容器组件，是咱们定义子控件的一个容器，它的构造函数里面虽然有多个参数，可是基本上大多数参数都是能够省略的。

2、使用方法

MaterialApp(
      title: 'TabBar', //用于为用户识别应用程序的单行描述
      theme: ThemeData(
        //应用各类 UI 所使用的主题颜色
        primarySwatch: Colors.red,
      ),
      color: Colors.red, //操做系统界面中用于应用程序的主要颜色,在Android上，这是应用程序切换器中应用程序使用的颜色。
      home: MaterialAppDemo(), //MaterialApp 显示的主界面
      routes: <String, WidgetBuilder>{
        // 应用的顶级导航表格，这个是多页面应用用来控制页面跳转的，相似于网页的网址
        "/MaterialApp": (BuildContext context) => TabBarView(),
      },
      initialRoute: '', //第一个显示的路由名字，默认值为 Window.defaultRouteName
      navigatorObservers: List<NavigatorObserver>(),
      debugShowMaterialGrid: false, //是否显示 纸墨设计 基础布局网格，用来调试 UI 的工具
// showPerformanceOverlay:true,//显示性能标签，https://flutter.io/debugging/#performanceoverlay
// showSemanticsDebugger: true,
// debugShowCheckedModeBanner: true,//性能调试工具
    )
  
复制代码

3、经常使用属性

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

title: 'MaterialApp',//用于为用户识别应用程序的单行描述
复制代码

2.定义应用所使用的主题颜色，在材料设计中定义了 primaryColor、accentColor、hintColor 等颜色值。能够经过这个来指定一个 ThemeData 定义应用中每一个控件的颜色。

theme: ThemeData(
    //应用各类 UI 所使用的主题颜色
    primarySwatch: Colors.red,
  ),

复制代码

三、定义主界面的显示控件，这个是一个 Widget 对象，用来定义当前应用打开的时候，所显示的界面。

home: MaterialAppDemo(), //MaterialApp 显示的主界面
 
 class MaterialAppDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material Appbar'),
      ),
      body: Center(
        child: Text('MaterialApp Demo'),
      ),
    );
  }
}

复制代码

四、定义页面跳转的路由规则，定义应用中页面跳转规则。 该对象是一个 Map<String, WidgetBuilder>。 当使用 Navigator.pushNamed 来路由的时候，会在 routes 查找路由名字，而后使用 对应的 WidgetBuilder 来构造一个带有页面切换动画的 MaterialPageRoute。若是应用只有一个界面，则不用设置这个属性，使用 home 设置这个界面便可。

routes: <String, WidgetBuilder>{
    // 应用的顶级导航表格，这个是多页面应用用来控制页面跳转的，相似于网页的网址
    "/MaterialApp": (BuildContext context) => TabBarView(),
  },

复制代码

五、一系列调试工具

debugShowMaterialGrid: false, //是否显示 材料设计 基础布局网格，用来调试 UI 的工具

复制代码

showPerformanceOverlay:
      true, // 显示性能标签，https://flutter.io/debugging/#performanceoverlay
  showSemanticsDebugger: true,
  debugShowCheckedModeBanner: true,//性能调试工具

复制代码

4、一个完整的例子

import 'dart:ui';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: 'MaterialApp', //用于为用户识别应用程序的单行描述
      theme: ThemeData(
        //应用各类 UI 所使用的主题颜色
        primarySwatch: Colors.red,
      ),
      color: Colors.red, //操做系统界面中用于应用程序的主要颜色,在Android上，这是应用程序切换器中应用程序使用的颜色。
      home: MaterialAppDemo(), //MaterialApp 显示的主界面
      routes: <String, WidgetBuilder>{
        // 应用的顶级导航表格，这个是多页面应用用来控制页面跳转的，相似于网页的网址
        "/MaterialApp": (BuildContext context) => TabBarView(),
      },
      initialRoute: '', //第一个显示的路由名字，默认值为 Window.defaultRouteName
      navigatorObservers: List<NavigatorObserver>(),
      debugShowMaterialGrid: false, //是否显示 材料设计 基础布局网格，用来调试 UI 的工具
// showPerformanceOverlay:
// true, // 显示性能标签，https://flutter.io/debugging/#performanceoverlay
// showSemanticsDebugger: true,
// debugShowCheckedModeBanner: true,//性能调试工具
    ));

class MaterialAppDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material Appbar'),
      ),
      body: Center(
        child: Text('MaterialApp Demo'),
      ),
    );
  }
}

复制代码