软硬交互代码示例_Flutter从0到1--项目工程结构与示例源码解析

flutter面世已经有一些时间了，经过一段时间的探索，基本上可以确定可以用于正式项目开发中。

本系列文章基于最新发布的flutter 1.2版本，开发工具为Android Studio，这是flutter从0到1的第一篇「工程目录结构解析」。

创建工程

打开Android Studio，选择Start a new Flutter project。
见到如下图的窗口，选择 Flutter Application。
点击next继续。

看见如下图窗口后，填写基本的工程信息。
如项目名称、Flutter sdk 路径、项目存放路径、以及描述信息。
然后点击next继续。

下图所示的窗口弹出后，填写报名信息。
以及一些额外的配置选项，如生成示例代码，支持kotlinswift等。
我们这里选择默认。
点击finish完成创建。

成功创建一个Flutter工程后，整体结构如下。

项目结构解析说明

从图中看，整个Flutter工程结构很简单，我们重点关注以下几个部分：

• android文件夹
  这里存放的是android平台的相关代码，和原生android项目结构一致，生成的默认代码和以前不一样，主要是与Flutter交互的代码。
• ios文件夹
  这里存放的是ios平台的相关代码。
• lib文件夹
  存放flutter相关代码。
  也是本篇文章重点介绍的部分。
• test文件夹
  用于存放测试代码
• pubspec.yaml文件
  Flutter相关的代码开发均在lib目录下，整个Flutter工程配置文件都在pubspec.yaml中配置，可以配置第三方的依赖、Flutter设置、资源文件等。

示例代码解析说明

我们打开lib文件夹，默认生成的只有main.dart一个文件，里面就是示例代码，下面将详细说明整个示例代码。

main方法表示入口函数，runApp函数接受给定的Widget，并使其成为widget树的根。在Flutter中，一切皆widget，可以说一切试图界面都是由各种widget堆叠出来的。

上面的写法，是dart语言的箭头函数，dart感觉就像是java与js的结合体，不能理解的同学可以看看下面的等同写法。

在main函数中调用了MyApp类，接着看一下MyApp的代码：

这里MyApp继承了StatelessWidget，重写了build方法，是构建一个MaterialApp widget返回。MaterialApp是一个方便的Widget，它封装了应用程序实现Material Design所需要的一些Widget。

示例代码中，使用了MaterialApp的三个属性，分别解释一下：

• title:在任务管理窗口中所显示的应用名字
• theme: 定义应用所使用的主题颜色，其中定义了 primaryColor、accentColor、hintColor 等颜色值。通过指定一个 ThemeData 定义应用中每个控件的颜色。
• home:指定一个 Widget 对象，用来定义当前应用打开的时候，所显示的界面。 类似于我们在AndroidManifest中配置启动页面

home属性指定了MyHomePage类，下面看一下代码：

MyHomePage中createState方法，返回了_MyHomePageState，表明该页面的状态由_MyHomePageState这个类来控制，具体看一下_MyHomePageState类的代码

State是一个状态对象，<>里面是表示该状态是跟谁绑定的。所以_MyHomePageState绑定了MyHomePage。

其中定义了一个私有变量_counter，然后定义了一个方法_incrementCounter，其内部实现变量_counter自增1 。

build方法中，实现了一个Scaffold，Scaffold组件是Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。

由代码中，我们可以看到，他定义了顶部appBar、body、floatingActionButton，分别表示顶部导航栏、内容、浮动按钮。

body中定义了一个竖布局，包含两个Text,用于显示文本，其中有一个文本的值与变量_counter绑定。

floatingActionButton的主要作用就是调用_incrementCounter方法, onPressed属性就表示触摸点击回调。

关于widget

在编写一个Flutter应用程序时，通常都会创建widget，它的主要功能就是实现一个build函数，用以构建一个widget实例。

这些widget是无状态的StatelessWidget或是有状态的StatefulWidget，具体的选择取决于您的widget是否需要管理一些状态。

通俗的讲就是，StatefulWidget是一个有状态的控件，如果页面需要更新ui，动态展示数据，那么该页面就要继承自StatefulWidget，如果只是一个纯展示的页面，只需要继承自StatelessWidget即可，StatelessWidget子类中的字段往往都会定义为"final"类型。

「文：黄豆豆」
「源：公众号：走漏点风声」