第四十七回：MaterialApp Widget

最新推荐文章于 2025-12-03 23:16:53 发布

原创最新推荐文章于 2025-12-03 23:16:53 发布 · 450 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #flutter #MaterialApp #Material Design

一起Talk Flutter吧专栏收录该内容

961 篇文章

订阅专栏

文章介绍了MaterialAppWidget在Flutter中的作用，作为App的入口，它用于构建程序框架，包括页面路由和主题设置。MaterialApp的属性如title、routes、home和theme分别用于控制标题、导航、主页内容和应用主题。示例代码展示了如何自定义App的主颜色和背景色，并通过debugShowCheckedModeBanner属性控制Debug标志的显示。

我们在上一章回中介绍了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的内容就介绍到这里，欢迎大家在评论区交流与讨论!