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

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: <Widget>[
          Text('$i'),
          RaisedButton(
            child: Text('点击增加次数'),
            onPressed: (){
              this.i++;
              print('${i}');
            },
          ),
        ],
      ),
    );
  }
}

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<StatefulWidget> createState() {
    return _HomePagerWidget();
  }

}

class _HomePagerWidget extends State<HomePager> {
  int count=0;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          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<StatefulWidget> createState() {
    return _HomePagerWidget();
  }

}

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

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        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'));
            });
          }
        )
      ],
    );
  }

}