第四十七回：MaterialApp Widget

我们在上一章回中介绍了Transform Widget相关的内容,本章回中将介绍 MaterialApp Widget.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在这里说的MaterialApp没有具体的物理形态，它主要用作App的入口。通过它可以快速搭建程序的框架，比如页面的路由，程序的主题等。如果有看官们做过Android开发肯定知道MaterialDesign,这是Google提出的一种设计风格，在此框架上搭建的App具有MaterialDesign风格。

使用方法

虽然我们看不到MaterialApp的物理形态，但是它仍然是一个Widget,它提供了相关的属性来控制App的设计风格，下面是一些常用的属性：

• title属性：主要用来控制App的标题，也可以在Scaffold组件的AppBar属性中设置；
• routes属性：主要用来控制App的路由，为App提供页面之间的导航功能；
• home属性：主要用来控制App主窗口中显示的内容，通常使用Scaffold组件对象给它赋值；
• theme属性：主要用来控制App的主题，比如文字大小和颜色等；

示例代码

class _ExMaterialAppState extends State<ExMaterialApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //如果MaterialApp有嵌套，那么每个都需要设置，特别是最外层的MaterialApp
      //外层设置后这里也要设置，不然不起作用，仍然显示Debug字样
      debugShowCheckedModeBanner: false,

      routes: ,//省略不写
      home: Scaffold(
        appBar: AppBar(
          title: Text("Example of Material App"),
          ),
        body: ElevatedButton(
          child: Text("Button"),
          onPressed: (){},
        ),
      ),
      theme: ThemeData(
        //用来控制主要的颜色，比如AppBar,button和默认颜色
        primarySwatch: Colors.deepPurple,
        //用来控制body体内的主要颜色
        scaffoldBackgroundColor: Colors.blueGrey,
      ),
    );
  }
}

我们在上面的代码中使用了上一个小节中介绍的常用属性，在代码的关键地方都添加了注释，方便大家理解代码的含义。编译并且运行上面的程序，可以看到一个App的界面，与以前介绍过的App界面相比，界面的整体风格相同，不同的地方是界面的主颜色由默认的蓝色变成了紫色，界面背景色也从默认的白色变成了灰色。我在这里就不演示程序的运行效果图了，建议大家自己动手去实践，真正体会一下界面之间的差异。

此外，我要介绍了一下debugShowCheckedModeBanner属性，它用来控制是否在界面右上角显示Debug文字，默认值是true,修改为false后就不会在界面上显示Debug文字。在Flutter中，App中的每个界面右上角都会显示这样的文字，刚开始运行Flutter时有点不习惯，不过换一种思路想：它是在告诉我们当前程序是Debug版本。心里也有平衡了。其实Flutter的设计者也是这么想的，因为在正式的Release版本中不会显示Debug文字。如果大家实在看不习惯就修改该属性的值。

看官们，关于MaterialApp Widget的内容就介绍到这里，欢迎大家在评论区交流与讨论!