Happy Flutter-StatefulWidget

Dart基本语法学的差不多了以后就可以开始学习Flutter了，就像OC学完了就可以开发iOS一样，触类旁通，Flutter开发需要掌握的基本技能无外乎也是那几个东西，界面布局，网络请求，数据加载，第三方库的使用，学会这些基本可以完成一些简单的Flutter模块的开发了，写文章是为了记录，学习语言最主要的还是得多敲多练，在实战中磨炼才是王道。

StatefulWidget

这次的demo也是一个计数器，理解一下StatefulWidget相关知识点，看效果图：

计数器

功能很简单，点加号和减号当前计数会改变，下面有段文字是从widget传进来的内容，下面是代码：

import 'package:flutter/material.dart';

main(List args) {
  return runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('计数器')
        ),
        body: MyContent('从Widget传进来的内容'),
      ),
    );
  }
}

class MyContent extends StatefulWidget {

  String des;

  MyContent(this.des);

  @override
  _MyContentState createState() => _MyContentState();
}

class _MyContentState extends State {

  var _count = 0;
  
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              RaisedButton(
                color: Colors.amber,
                child: Text('+'),
                onPressed: () {
                  setState(() {
                    _count++;
                  });
                }
              ),
              RaisedButton(
                child: Text('-'),
                color: Colors.yellowAccent,
                onPressed: () {
                  setState(() {
                    _count--;
                  });
                }
              )
            ],
          ),
          SizedBox(height: 8),
          Text('当前计数$_count',
            style: TextStyle(fontSize: 18)
          ),
          Text(this.widget.des)
        ],
      ),
    );
  }
}

整体结构：

最下面是一个Center，他可以让子widget居中，Center里面放了一个Column，Column第一行是一个Row，Row里面放了两个Text，一个”+“，一个”-“，第二行和第三行都是两个Text，整个结构简单的不能再简单了。

包含的知识点：

1. Column和Row都有一个主轴和交叉轴的概念，一开始他们两个主轴的对齐方式Column是顶部对齐，Row是左对齐，这个我没看文档，我是看程序效果，说错了别喷我，效果是这样的：

   
   
   初始对齐方式
   
   

   加号和减号是放在Row当中，可以看到他两个是靠左对齐，整体这个Column里面的三行都是挨着顶部，可以看出来是顶部对齐。

2. Column和Row可以设置主轴的对齐方式，这个主轴和交叉轴是Flex布局的核心，Row主轴其实就是水平方向，Column主轴就是垂直方向，交叉轴就是和主轴交叉的方向，通过mainAxisAlignment这个属性可以设置主轴的对齐方式，同样的，通过CrossAxisAlignment这个属性可以设置交叉轴的对齐方式。
3. RaisedButton是一个按钮Widget，这个只是Button的其中一个，具体有啥高级特性还没用到，这个地方主要用到的是他的一个点击事件，接收一个匿名函数作为响应的事件回调函数，类型是void Function() onPressed。
4. StatefulWidget和StatelessWidget不同的地方在于他多了一个State createState()方法，这个方法会返回一个State类型的Widget，State里面有个build方法，关于这个方法有几个介绍：

Describes the part of the user interface represented by this widget.
The framework calls this method in a number of different situations. For example:
After calling [initState].
After calling [didUpdateWidget].
After receiving a call to [setState].
After a dependency of this [State] object changes (e.g., an [InheritedWidget] referenced by the previous [build] changes).
After calling [deactivate] and then reinserting the [State] object into the tree at another location.

build方法返回的Widget也是用户界面展示的一部分，这个方法有很多场景可以触发，在这个例子中是通过setState这个方法来触发的，在‘+’和‘-’按钮的回调里执行了setState方法，让build方法重新执行，刷新界面，展示数据的改变。在这个例子中是count这个变量改变了，在变量和方法前面加''代表是私有的，_count值的改变都会在下一次的build方法中被更新展现。

5. 在MyContent中还有一个String des;变量，这个地方编译器其实是有一个警告的，它说这个des变量应该定义成final的，因为StatefulWidget和StatelessWidget都继承自Widget，Widget这个类的定义外面有一个@immutable的注解，也就是说这个类中定义的变量都应该是不可变的，如下图：
   
   Widget定义

这个des变量是定义在Widget中的，但是我在State类中可以直接通过this.widget.des直接获取到这个变量，也就是说State和Widget之间系统为我们提供了一层引用关系，可以让我们方便的使用Widget中的变量，这个绑定关系后面在讲到Flutter中的三课树的时候再具体分析。

6. 最后一个点就是比较经典的可能面试也会喜欢问到的问题，为啥StatefulWidget的build方法要放在State中还不是放在Widget里，这边第一个可以看到因为你Widget里定义的变量都是final的，都不能改变何来数据的刷新，这是我自己的理解，还有几个是coderwhy的理解，放在这里，不记得原话是啥意思了，后面再慢慢悟吧。

为什么Flutter在设计的时候StatefulWidget的build方法放在State中
1.build出来的Widget是需要依赖State中的变量(状态/数据)
2.在Flutter的运行过程中Widget是不断的销毁和创建的，当我们自己的状态发生改变时，并不希望重新状态一个新的State。

参考资料：
Flutter教程