flutter demo 代码分析

上次我们按照官方教程创建了默认demo，本次我们分析这个demo，分析的哪里有不对的地方，请大家指出，共同进步。
首先我们要明确，dart 中所有的东西都是类，flutter 中所有的东西都是 widget。
import 'package:flutter/material.dart';
引入 google material 的 dart 包，打开源码就会发现这个包里面引入了更多的 material 样式的 dart 包，如下所示：

export 'src/material/about.dart';
export 'src/material/animated_icons.dart';
export 'src/material/app.dart';
export 'src/material/app_bar.dart';
export 'src/material/arc.dart';
export 'src/material/back_button.dart';
export 'src/material/bottom_app_bar.dart';
export 'src/material/bottom_navigation_bar.dart';
export 'src/material/bottom_sheet.dart';
export 'src/material/button.dart';
export 'src/material/button_bar.dart';
export 'src/material/button_theme.dart';
export 'src/material/card.dart';
export 'src/material/checkbox.dart';
export 'src/material/checkbox_list_tile.dart';
export 'src/material/chip.dart';
export 'src/material/chip_theme.dart';
export 'src/material/circle_avatar.dart';
export 'src/material/colors.dart';
export 'src/material/constants.dart';

void main() => runApp(new MyApp());
dart 的初始化运行函数为 main() 这里使用了箭头函数，实际上等同于下面的代码：

void main(){
  return runApp(new MyApp());
}

其中 runApp()为 APP 中的入口函数，参数为名为 MyApp的类，下面我们会分析到。
class MyApp extends StatelessWidget {
这行定义了MyApp类，继承自名为StatelessWidget父类

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }

为了方便，我们把注释删掉，这是build函数，它覆盖了父类的build函数，参数是默认的BuildContext类型的context。函数返回是 MaterialApp类的实例，定义了APP中本页面的一些全局信息，3个命名参数：title、theme、 home，其中 theme 名为 ThemeData 皮肤类，可以在里面定义一些类似颜色之类的东西，没有深入研究。home 定义了本页面的显示区域，为名为 MyhomePage 的类，并传入title值。

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

以上代码定义了MyHomePage的类，继承自StatefulWidget类，MyHomePage():super()调用的父类的构造函数赋值并扩展了它，这里是指新加了 title 参数或者在类中叫做属性。
final String title;定义了 title

@override
  _MyHomePageState createState() => new _MyHomePageState();`

这里覆盖了父类中的 createState函数，用于实例化_MyHomePageState()类
下面一行
class _MyHomePageState extends State，定义了_MyHomePageState()类，该类继承自MyHomePage类。这里我也不懂，需要更深入的了解dart语言。
int _counter = 0;定义变量_counter，用于记录点击次数。

void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

这里定义了_incrementCounter 方法，注意一定要调用 setState 方法，这样 _counter 的改变才能被记录下来。

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), 
    );
  }

这段代码是demo中实现逻辑和显示的主要代码，复写父类的build函数，返回Scaffold（脚手架）组件，仔细分析就会发现，Scaffold实例中 中包含三个命名参数，分别是 appBar，body和floatingActionButton，找到Scaffold类的构造函数的代码就会发现，不止这几项，如下所示：

Key key,
    this.appBar,
    this.body,
    this.floatingActionButton,
    this.floatingActionButtonLocation,
    this.floatingActionButtonAnimator,
    this.persistentFooterButtons,
    this.drawer,
    this.endDrawer,
    this.bottomNavigationBar,
    this.backgroundColor,
    this.resizeToAvoidBottomPadding: true,
    this.primary: true,

看名称就能知道是干什么用的，每一个属性都是一个widget。

 appBar: new AppBar(
        title: new Text(widget.title),
      ),

定义appBar，是一个 AppBar类，一个命名参数，赋值为父类中的title，这里有一点不明白，为什么是使用widget类来获取，希望大牛指点。

body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),

body 为页面显示的主要部分，为一个垂直居中显示widget，子widget为一个 Column widget，mainAxisAlignment: MainAxisAlignment.center, 该行定义了布局方式为居中，Column 的子widget为一个List，包含两个 text widget，其中style定义了text的样式，具体没有深入分析这里。
下面

  floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), 

这段代码定义了浮动按钮，onPressed为点击事件的方法，每点击一次_counter 加1，tooltip 为长按提示，子widget为一个Icon类的实例，具体没有分析。
经过一番分析，感到 flutter 设计巧妙，功能完善，是值得学习的。
有什么问题，可以加群：531488521 交流。