Flutter StatelessWidget无状态组件，StatefulWidget有状态组件，页面上绑定数据，改变页面数据

 

Flutter中自定义有状态组件

实现Flutter APP时，我们使用Widgets构建UI，这些widgets有两种类型，stateful和stateless，由于整个APP全部使用widget构建，所以在构建每个widget时，都需要判断使用哪种状态

在Flutter中自定义组件其中就是一个类，这个类需要继承 StatelessWidget / StatefulWidget

StatelessWidget 是无状态组件，状态不可变的widget
StatefulWidget 是有状态组件，持有的状态可能在widget生命周期改变。通俗的讲：如果我们想改变页面中的数据的话这个时候就需要用到StatefulWidget

StatelessWidget

StatelessWidget最简单直观的就是读源码，如果打开Text widget源码，我们会发现这个部件没有状况可以被改变。

通过构造方法吧text widget初始化，然后用properties构建要被显示的内容，父widget实际上控制着这些窗口部件的显示状态。在text widget中，父部件传入的属性，如文本。对齐方式，方向等会被其用作配置。

当我们创建自己的widget的时候，什么时候用stateles部件。

可能创建一个自定义的进度控件，这个控件使用初始化的属性来展示给用户，这样就不需要持有任何状态，因为父部件会控件其是否显示，这样父部件就管理了这个widget本身是否显示的状态了。

注意： 如果无状态Widget里面有子Widget，并且子Widget是有状态的，则子Widget的内容是可以通过setState来更改的。无状态Widget影响的仅仅是自己的无状态的，不回影响他的父Widget和子Widget。

无状态Widget Coding

//无状态Button
class MyButton extends StatelessWidget{
  String text;
  MyButton(String text){
    this.text = text;
  }
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text(this.text),
      textColor: Theme.of(context).accentColor,
      onPressed: (){
      },
    );
  }
}

StatefulWidget

stateful 表示 有状态的  ，Stateful 是动态的，他们允许我们创建一个能动随时间改变内容的widget，并且不赖于其初始化时被传入的静态状态，可以随着永恒的输入，各种形式的异步回包或其他形式的状态变化而变化。

StatefulWidget可以读取源码，比如Image Widget，我们会发现这个部件可以状态改变的。

coding

//继承可变状态，自身widget管理自己状态
class HomePage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _HomePageState();
  }

}
//继承State类
class _HomePageState extends State<HomePage>{
  int count = 0;
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Chip(
            label: Text("${this.count}"),
          ),
          RaisedButton(
            child: Text("增加"),
            onPressed: (){
              //通过setState更新展示内容
              setState(() {
                this.count++;
              });
            },
          )
        ],
      ),
    );
  }
}

另外一个案例

class HomePage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _HomePageState();
  }

}

class _HomePageState extends State<HomePage>{
  int count = 0;
  List<String> mData = [
    "水波纹颜色",
    "扩散纹颜色",
    "阴森深度",
    "禁用时....",
  ];
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Column(
            children: mData.map((value){
              return Text(value);
            }).toList(),
          ),
          RaisedButton(
            child: Text("增加"),
            onPressed: (){
              setState(() {
                //this.count++;
                addListData();
              });
            },
          )
        ],
      ),
    );
  }
  void addListData(){
    mData.add("addListData");
  }
}

注意：

第一步：继承StatefulWidget实现他的createState方法，这个方法需要返回State对象。

第二步：继承State<返回的对象> ，需要实现build对象。返回状态widget

第三步：通过setState进行改变