从零开始学Flutter--Widget

Widget的概念

在面向对象的语言中有一句话叫 一切皆对象，而在Flutter中有一种说法是 一切皆Widget

Widget是描述一个UI元素的配置数据的对象，不仅仅是一个控件，包含对一个UI元素的样式或者事件等描述

Widget的createElement函数

Widget与Elemen的关系
从上面的概念中其实可以看出，widget只是配置信息，他不是真正呈现的对象，真正显示出来的是Elemen，一个widget可以对应多个Elemen，也就是说Elemen可以随便选择需要的widget，两个Elemen对象选择一个widget他们就展示出来的样式是一样的

StatelessWidget 和 StatefulWidget

StatelessWidget 一种无状态改变的widget，当描述的用户界面部分不依赖于对象本身中的配置信息以及widget的BuildContext 时，无状态widget非常有用，反过来就是StatefulWidget

通俗的讲就是如果一个UI元素是一个不会改变的文本元素（这里可以是任何UI元素），就用StatelessWidget ，如果这个UI元素会改变他的包括Text属性等状态，就用StatefulWidget，也可以这样说 StatefulWidget包含StatelessWidget，但是StatelessWidget是不能达到StatefulWidget的效果的。

AboutDialog, CircleAvatar和 Text 都是StatelessWidget的子类。
Checkbox, Radio, Slider, InkWell, Form, 和 TextField 都是有状态的widget，也是StatefulWidget的子类。

其中从这两个类的子类就可以大致看出这两个类的的区别

举个例子

继承StatelessWidget

class PageDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: Text("举个例子"),
      ),
      body: new Center(
        child: Text("我继承StatelessWidget，状态不会改变"),
      ),
    );
  }
}

效果图就不截了，当我们继承StatelessWidget之后，只需要实现 build 函数，我们没有办法再去修改他的状态

继承StatefulWidget

class PageOne extends StatefulWidget {
  @override
  State createState() {
    // TODO: implement createState
    return new TextSatte();
  }
}

class TextState extends State {
  var _count = 0;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: Text("举个例子"),
      ),
      body: new Stack(
        children: [
          new Align(
            child: Text("我继承StatefulWidget$_count"),
          ),
          new Align(
            alignment: new FractionalOffset(0.5, 1),
            child: new MaterialButton(
              onPressed: () {
                setState(() {
                  _count++;
                });
              },
              child: Text("改变状态"),
            ),
          )
        ],
      ),
    );
  }
}

继承StatefulWidget 之后，他让我们必须去实现createState函数，返回一个State，然后我们继承 State 自己写一个TextState，在我们去改变UI元素状态的时候，我们调用了一个 setState 系统函数，然后达到了改变UI元素状态的效果，这是继承 StatelessWidget 做不到的

总结
这里我们学习了widget的含义，知道了他的两个子类StatelessWidget 和StatefulWidget 的区别，其实有一些不好判断是否需要改变状态的UI元素，可以都用StatefulWidget来做，后面确定不需要修改之后可以再修改成StatelessWidget，熟能生巧之后，以后打代码就更加得心应手了。