【Flutter】3.解读flutter新建项目生成的示例代码

左手的ㄟ右手 2021-12-14 10:31 336阅读 0赞

首先打开lib目录下的main.dart文件，在上一篇中对flutter目录文件进行了相关解释，flutter应用层是使用dart语言编写，最终会转换为机器码，生成了so文件，对于so文件，学习过android NDK开发的同学相信并不陌生，接下来我们分析一下main.dart文件中的内容

从整体上看，dart语言和java有不少相似的地方，dart是由google开发的一门编程语言，可以说相似度很高，阅读性相对来说较好，大体看来学习dart对于学过java的人来说难度并不大

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70][]

**1**.首先第一行import，这个和java中的import没有区别，都是导入其他文件的引用

这里有个关键方法main方法，我们知道程序运行的入口就是main方法，这里就是关键

在flutter中有一个runApp方法，此方法的参数是一个Widget对象，即从字面意思上来看是传入了一个控件，在这里就不得不说一下Flutter绘制界面的原理，简单抽象点来说你就当是一个全屏幕的画板，Flutter就是引擎，包装了很多widget，在程序运行时，将widget绘制出来。所以这里就能理解为什么在运行的时候就传入了一个Widget对象了

**2**.接着分析，看到的是 class MyApp extends StatelessWidget 这里创建了一个MyApp的类，该类继承了StatelessWidget，对于StatelessWidget你只需要知道他是一个widget，但它和StatefulWidget一样不会显示任何东西，只有RenderObject类才会真正的去绘制控件

StatelessWidget和StatefulWidget相比较，从字面意思上理解StatelessWidget是无状态小部件，而StatefulWidget是状态小部件，如果小部件内需要更新一些值，例如改变文字，改变图片，则使用有状态的小部件，否则使用无状态小部件

StatefulWidget需要实现createState方法，去创建一个State类，而State和 StatelessWidget一样，存在下面方法：

**Widget build(BuildContext context)**

**3**.MaterialApp了解android的人都应该知道Material Design是google的一种设计风格，那么它的作用就是创建一个Material Design风格的APP

接着分析MaterialApp中存在title字段，通过查看源码注释发现，它的作用是在android中，如果打开最近任务，此名称会显示出来，在IOS设备上没有效果

theme属性是APP的主题样式，它的字段类型是ThemeData，相当于android中的style，ThemeData下有很多参数，示例代码中用到了primarySwatch，它代表的是当前页面的主题色

home属性就是入口，指应用程序默认路由的小部件,用来定义当前应用打开的时候，所显示的界面

**4**.在MyHomePage类的构造方法中，有两个参数，其中Key是默认的参数，title是自定义的参数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 1][]

**5**.接下来看State中的代码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 2][]

在\_MyHomePageState类中定义了全局变量\_counter，并附初值0，同下创建了\_incrementCounter方法，用于\_counter值的累加，这里注意，改变\_counter的时候，使用了setState方法，这是State类中特有的方法，目的在于通知UI刷新，和原生android的Adapter刷新item有点类似，StatefulWidget的状态目的就体现在此处，接着往下看

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 3][]

**6**.Scaffold是一个有状态的小部件，它的作用是填充剩下的可用空间，通常它会占用整个窗口，若在此界面打开第三方输入法，Scaffold将会重建

此示例代码中，在Scaffold小部件中创建了三个元素，appBar顶部导航栏，和body内容区域，以及悬浮在右下角的floatingActionButton按钮

在appBar中设定了一个标题，body中使用了Center布局小部件，它只有一个子部件，且在它的父部件中会居中显示

Column是一个列布局部件，它需要有一堆子部件，这些部件按垂直的方法排列，mainAxisAlignment可以定义它的主轴对齐方式，在Column中有两个Text部件，重点在第二个Text上，它显示了\_counter变量的值，当我们调用setState去改变\_counter的值时，会刷新对应的界面显示

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70]: /images/20211214/7c886e51e7e844e59a2aae440a3b4a7c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 1]: /images/20211214/d8cb2eb52ab341728d48d00ed0f9bbd5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 2]: /images/20211214/e5c795149ecf4de9b7cfc4703ca96607.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 3]: /images/20211214/2b37315da7fe4f0cbd9216d339aa55ac.png