Flutter工程解析篇 + 工程代码部分解析记录

在上一篇咱们搭建flutter环境以后，而且建立了一个HelloFlutter咱们的第一个demo，接下来让咱们看一看flutter的工程目录以及建立项目运行代码的部分解析。

首先工程目录以下：

主要分为四个部分，第一个部分是Android，第二个部分是iOS，第三个部分是相似build.gradle的配置文件pubspec.yaml，第四个部分是lib文件夹，里面存放咱们编写的基于dart语言的源代码，前两个部分不会涉及到，咱们主要是写dart来实现跨平台。

那咱们接下来看一下lib下面有一个main.dart的文件，打开以后以下：

首先看

void main() => runApp(MyApp());

这是程序的入口函数，进来首先会调用runApp方法，这里用到了=>箭头函数和以下格式相似：

main(){
  return new MyApp();
}

Dart中的箭头函数，跟kotlin很像。

其实=> runApp(MyApp()); 等同于

{
  return new MyApp();

}

那说到这里就要说一下dart的匿名函数和=>箭头函数是怎么声明的，说白了匿名的含义就是没有名字的函数，格式以下：

([[Type] param1[, …]]) {
  codeBlock;
};

其实上面若是用箭头函数来表示，以下：

([[Type] param1[, …]]) => codeBlock;

因此｛codeBlock｝等同于 =>codeBlock，举个例子：

var list = ['apples', 'bananas', 'oranges'];
list.forEach((item) {
  print('${list.indexOf(item)}: $item');
});

箭头函数以下：

list.forEach((item) => print('${list.indexOf(item)}: $item'));

上面的示例定义了一个具备无类型参数的匿名函数item，该函数被list中的每一个item调用，输出一个字符串，该字符串包含指定索引处的值。

接着说main函数返回一个widget，MyApp就是咱们要展现的启动界面。

这里的MyApp类中返回了一个MaterialApp widget，MaterialApp能够理解为ui的风格，Android上就是这种风格的UI. ios上咱们可使用CupertinoApp。这个能够本身修改尝试在MaterialApp中咱们能够配置主题颜色，控件的样式等等。

这里至关于Android中的Application类， StatelessWidget表示无状态控件。

MaterialApp代表app的风格是Material Design风格的，这里咱们能够配置app的主题相关属性好比颜色，

按钮风格等等，相似于Android中的style文件。

主题相关配置，这里咱们能够配合app总体的主题样式，好比总体颜色，控件默认的样式等。

这个地方就相似于Android中的style文件配置，主要就是主题的配置。

home指定了启动后显示的页面，相似于咱们在AndroidManifest中配置启动页面，也就是Android里面的MainActivity。

接下来咱们看一下MyHomePage这个类

StatefulWidget是一个有状态的控件，若是你的页面须要更新ui，那么该页面就要继承自StatefulWidget，因此这个类基本上是必需要继承的，

跟Android咱们要继承activity的意义差很少，若是只是一个纯展现的页面，只须要继承自StatelessWidget便可，也就是一些静态页面
MyHomePage在上面已经被指定为启动页面，该页面有一个计数的逻辑，会更新ui，因此须要继承自StatefulWidget。

这里咱们看一下它的构造函数的格式跟Java不同吧，这是dart语言特有的可选参数，举个例子：

//◦可选的命名参数, 定义函数时，使用{param1, param2, …}，用于指定命名参数。例如
//设置[bold]和[hidden]标志
void enableFlags({bool bold, bool hidden}) {
  // ...
  print(bold.toString()+"、"+hidden.toString());
}
//这里能够随便改变传入参数的顺序
enableFlags(bold: true, hidden: false);

咱们能够随意更改传参的顺序。

还有一种可选的位置参数，举个例子：、

//◦可选的位置参数，用[]它们标记为可选的位置参数：
String say(String from, String msg, [String device]) {
  var result = '$from says $msg';
  if (device != null) {
    result = '$result with a $device';
  }
  print(result);
  return result;
}
//能够传也能够不传，至关于Java重载
say('Bob', 'Howdy'); //结果是： Bob says Howdy
say('Bob', 'Howdy', 'smoke signal'); //结果是：Bob says Howdy with a smoke signal

这里就看到了，咱们能够传也能够不传，我的感受跟Java的 重载相似。

接着说，全部继承自StatefulWidget的控件都要重写createState()这个方法，能够理解为指定该页面的状态是由谁来控制的，

在Dart中下划线开头声明的变量和方法，其默认访问权限就是私有的， 相似于java中用private关键字修饰,只能在类的内部访问。

这里咱们须要指出的是咱们须要_MyHomePageState这个类的对象来控制这个界面，因此咱们重写createState()这个方法，而且返回了_MyHomePageState对象，而且你们有注意到么，这里用到了箭头函数，咱们以前说的，因此这里若是不用箭头函数的话能够以下代替：

@override
_MyHomePageState createState() {
  return _MyHomePageState();
}

看到这里是否是以为这不就是Java的方法重写而且return么，其实箭头函数后面指向的就是咱们要rerun的代码。

State是一个状态对象，<>里面是表示该状态是跟谁绑定的，咱们修改状态时就是在该类中进行编写。

咱们主要看一下build方法：

Scaffold能够看做是Material Design中的一个模板，看源码发现它继承自StatefulWidget，包含了appBar,body,drawer等控件。

appBar 至关于Android中的ToolBar。

其实看起来就是return一个Scaffold对象，这个对象的实例化须要咱们传入一些参数，传参数的格式跟Java不同而已，咱们须要传递appBar、body、floatingActionButton这个浮动按钮，而后每一个参数也是个对象，咱们看代码很容易看到好比appBar须要传递title这个参数便可，这个title也是一个对象Text，它也须要一个参数widget.title，这里的widget实际上就是MyHomePage。

建议初学flutter的同窗仍是不要急着先弄工程，先把dart语言的基本api的使用弄清楚了，再来敲代码就会快不少了。