Flutter StatefulWidget的相关应用

我们最常见的交互就是按钮组件，chexkbox , radio等
我们今天就使用按钮完成一个简单的交互
点击按钮，数字加1

为了加深印象，我们先用无状态组件顶实现一个按钮，看看点击按钮会发生什么变化
无状态的代码实现

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('甜宠软妹'),
        centerTitle: true,
      ),
      body: StafulDemo(), //调用函数
    ));
  }
}

class StafulDemo extends StatelessWidget {
  int countNum = 0;
  //const StafulDemo({Key key}) : super(key: key);
//把代码抽离成无状态的
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text("${this.countNum}"),
        SizedBox(height: 10),
        RaisedButton(
            child: Text("button"),
            onPressed: () {
              this.countNum++;
              print(this.countNum);
            })
      ],
    );
  }
}

代码可以直接复制进main.dart去运行，我们会发现点击按钮，页面没有变化，但是我们的终端会有变化，这就是无状态组件产生的效果。而我们现在需要让它改变，所以就有了有状态组件
以下是代码实现

我想说一下，在之前的怎么运行文件的博客里面我提到了无状态的基本结构是可以快写的，
所以有状态的组件是一样的，输入sta就会有一个flutter widget with animation…按下enter就可以直接出现以下有状态的代码结构

class xxx extends StatefulWidget {
  @override
  _xxx createState() => _xxxState();
}

class _xxxxState extends State
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
    
    );
  }
}

此处的xxx是类名

具体的代码如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('甜宠软妹'),
        centerTitle: true,
      ),
      body: StafulDemo(), //调用函数
    ));
  }
}

class StafulDemo extends StatefulWidget {
  StafulDemo({Key key}) : super(key: key);
  _StafulDemoState createState() => _StafulDemoState();
}

class _StafulDemoState extends State {
  int countNum = 0;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Chip(
          label: Text("${this.countNum}"),
        ),
        SizedBox(height: 10),
        RaisedButton(
            child: Text("按钮"),
            onPressed: () {
              setState(() {
                this.countNum++;
              });
            })
      ],
    );
  }
}

当我们点击按钮时，上面的数字就会增加