10.Flutter学习之StatefulWidget有状态组件、页面绑定数据、改变数据

StatelessWidget

StatelessWidget：无状态的widget，适用于我们描述用户界面不依赖对象中的配置信息时。例如：使用ImaegView/UIImageView来显示Logo，Logo在运行时不会改变，所以可以使用StatelessWidget

StaefluWidget

如果遇到HTTP网络请求或者用户交互接受数据后动态更改UI，则必须使用StatefluWidget并告诉Flutter框架Widget的状态已经更新。

让我们用代码来比较一下有状态与无状态的区别吧！

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

class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('有状态与无状态对比'),
        ),
        body: HomePager(),
      ),
    );
  }

}

class HomePager extends StatelessWidget {
    int i=0;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('$i'),
          RaisedButton(
            child: Text('点击增加次数'),
            onPressed: (){
              this.i++;
              print('${i}');
            },
          ),
        ],
      ),
    );
  }
}

当我们点击按钮是，你会发现Text的文本并没有发生改变。

我们看一下日志，看看数值到底有没有发生改变。

我们可以清楚的看到，数据改变了，但是无法改变页面的数据。
接下来我们看一下有状态的是否能够发生改变 。

StatefulWidget

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

class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('有状态与无状态对比'),
        ),
        body: HomePager(),
      ),
    );
  }

}

//有状态组件。必须继承自StatefulWidget，
class HomePager extends StatefulWidget {

  @override
  State createState() {
    return _HomePagerWidget();
  }

}

class _HomePagerWidget extends State {
  int count=0;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Chip(//一个标签的控件
              label:Text( '${count}')
             ),
          RaisedButton(//Button
            child: Text('点击进行数据+1'),
            onPressed: (){    //Button的点击事件
              setState(() {//是StatelessWidget所没有的方法，用于更新页面状态
                this.count++;
              });
            },
          ),
        ],
      ),
    );
  }

}
``
从图中我们可以看到页面数据发生了改变。
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020022917594591.gif#pic_center)
### demo
我们进行点击一个button，然后我们的`ListView`条目进行增加
```dart
main()=>runApp(MyApp());

class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('有状态与无状态对比'),
        ),
        body: HomePager(),
      ),
    );
  }

}

//有状态组件。必须继承自StatefulWidget，
class HomePager extends StatefulWidget {

  @override
  State createState() {
    return _HomePagerWidget();
  }

}

class _HomePagerWidget extends State {
  List list=new List();

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Column(
          children: this.list.map((value){
            return ListTile(
              title: value,
            );
          }).toList(),
        ),
        SizedBox(
          height: 10,
        ),
        RaisedButton(
          child: Text('点击进行条目+1'),
          onPressed: (){
            setState(() {
              list.add(Text('新增数据1'));
              list.add(Text('新增数据2'));
            });
          }
        )
      ],
    );
  }

}