Flutter之旅
上QQ阅读APP看书,第一时间看更新

1.1.2 入口文件及MyApp分析

当你运行初始项目后,可以看到下页所示的界面。从Android开发者的角度来看,它是由Toolbar、TextView、FloatingActionButton组成的界面。但打开布局边界查看时,发现并非如此,而是整个页面只是一个布局,这是为什么呢?

如果是第一次遇见它,对它一无所知,你会如何去分析?当初我是这么做的:既然已经有界面,那么界面上的文字一定会存在于代码中,这便是突破点。用AndroidStudio的全局搜索功能“Find in Path”(Edit→Find→Find in Path)锁定界面上的“Home Page”关键字,发现线索在main.dart里:

由下面代码的第一行可以看出是导入包,使用import关键字引入flutter包中的material.dart文件。在第二行看到main函数,很自然地想到程序的入口,再根据面向对象的思想来看:runApp函数中传入的是一个MyApp对象,作为main函数的执行体,所以具有追寻价值的是MyApp。

一开始接触箭头你可能有点不适应,但以后你会对它爱不释手。它是Dart中函数的一种简化书写,当函数体只有一行语句时,可以简写。下面的代码,左侧等价于右侧:

下面是关于MyApp的代码,可以看出MyApp是一个继承自StatelessWidget的类,并重写了build方法,返回Widget对象。既然如此,MaterialApp必然是一个Widget对象,而本文件中并未定义该类,所以必然在上面引入的包中,这是基本的逻辑分析。


class MyApp extends StatelessWidget {
  @override //这个组件是你应用的根组件
  Widget build(BuildContext context) {
    return MaterialApp( title: 'Flutter Demo',
      theme: ThemeData(// 这是你应用的主题
        primarySwatch: Colors.blue, ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    ); 
 }
}

虽然是不同的语言,但是面向对象的思想是不变的。即使是在一个新的领域,也总能找出你的技能匹配点。所以可以进行最基本的逻辑推理来认识未知事物,这是面临新环境时很有用的技巧。去推理和思考,就很容易将新旧知识进行关联,也更容易掌握它。

当运行应用时,你将会看到应用有一个蓝色的toolbar(下图左)。之后,不退出应用,尝试将上面代码的primarySwatch改成Colors.green,再进行热启动(在控制台里输入r,或直接在IDE中保存你的修改),可以看到计数器没有归零,你的应用没有重新启动,但toolbar变成了绿色(下图右)。