关于dart:Flutter-24FlutterUI布局和WidgetStatelesswidget与Statefulwidget

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查看，并且能够下载下来运行并体验。