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

2次阅读

共计 1999 个字符，预计需要花费 5 分钟才能阅读完成。

如果一个 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是可变的 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 的色彩都是不一样的。

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