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

57 阅读 0 评论 38 点赞

我是靠谱客的博主土豪棒球，最近开发中收集的这篇文章主要介绍软硬交互代码示例_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属性就表示触摸点击回调。