Statelesswidget

如果一个Widget从初始化到应用再到销毁，整个过程中都不须要批改其UI的款式，例如纯展现页面，咱们就用Statelesswidget。常见的Statelesswidget有：Text、Icon、ImageIcon、Dialog等。能够看到这些往往都是一些展现类的，不须要扭转其状态的控件。
应用Statelesswidget更轻量，更节俭内存资源。初始化Statelesswidget的时候不会附带一些动静更新UI的办法，这样也会晋升咱们软件的性能。

须要留神的是：
在iOS开发中，初始化一个Label并命名为la，扭转它的文字内容，会调用la.text = @"new text"，咱们能够了解为Label不是Statelesswidget的，因为它的text属性被扭转了。那Flutter的Text为什么又是Statelesswidget的呢？因为Flutter中所有Widget都是 “配置文件”，当咱们批改文本之后，Flutter会帮忙咱们从新初始化一个Text，而不是批改以后的Text对象，这是与原生开发不一样的中央。

Statefulwidget

Statefulwidget是可变的Widget，在咱们的开发中会大量应用Statefulwidget。它实现了一个setState办法，当咱们调用这个办法的时候，该Statefulwidget会被从新渲染，留神是从新被渲染，而不是部分更新。
当咱们调用setState时，Flutter在收到该音讯后，会从新调用其build办法从新构建这个widget，从而达到更新UI的目标。

来看如下代码：

class StatefulWidgetDemoPage extends StatefulWidget {  @override  _StatefulWidgetDemoPageState createState() => _StatefulWidgetDemoPageState();}class _StatefulWidgetDemoPageState extends State<StatefulWidgetDemoPage> {  @override  Widget build(BuildContext context) {    return Scaffold(      floatingActionButton: FloatingActionButton(        onPressed: () {          setState(() {});        },        child: Icon(Icons.add),      ),      appBar: AppBar(        title: Text("StatefuleWidget Demo"),        centerTitle: true,        backgroundColor: Colors.blue,      ),      body: Column(        children: [          Container(            width: 100,            height: 100,            margin: EdgeInsets.all(10),            /// 色彩一个随机值            color: _randomColor(),          ),        ],      ),    );  }  /// 获取一个随机的色彩值  _randomColor() {    return Color.fromARGB(255, Random().nextInt(255), Random().nextInt(255),        Random().nextInt(255));  }}

咱们定义了一个生成随机色彩的办法_randomColor()，它会返回一个Color对象，而后咱们又定义了一个Container，Container的初始化参数color的值是_randomColor()的返回值。而后咱们在FloatingActionButton的onPressed的办法中调用一下setState办法，这个时候Flutter会从新绘制StatefulWidgetDemoPage，所以每次点击按钮，咱们能够看到Container的色彩都是不一样的。

一切都是Widget

在Flutter中咱们看到的UI元素都是由Widget生成的，包含手势，在Flutter中也是Widget。Widget并不是咱们看到的UI元素，咱们理论看到的UI元素叫Element，Widget是Element的配置数据。
咱们写了大量的Widget经Flutter解决渲染生成了Element来展现在手机屏幕上。所以当咱们调用setState办法的时候，咱们只是更新了配置数据，Flutter按照更新后的配置数据来生成新的Element来达到渲染UI的目标。

留神
一个 Widget能够对应多个Elememt对象，这等同与一个配置文件能够生成多个实例对象一样。

想体验以上的示例的运行成果，能够到我的Github仓库我的项目flutter_app->lib->routes->statefulwidget_page.dart查看，并且能够下载下来运行并体验。