乐趣区

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

Statelesswidget

如果一个 Widget 从初始化到应用再到销毁,整个过程中都不须要批改其 UI 的款式,例如纯展现页面,咱们就用 Statelesswidget。常见的Statelesswidget 有:TextIconImageIconDialog等。能够看到这些往往都是一些展现类的,不须要扭转其状态的控件。
应用 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 对象,而后咱们又定义了一个 ContainerContainer 的初始化参数 color 的值是 _randomColor() 的返回值。而后咱们在 FloatingActionButtononPressed的办法中调用一下 setState 办法,这个时候 Flutter 会从新绘制 StatefulWidgetDemoPage,所以每次点击按钮,咱们能够看到Container 的色彩都是不一样的。

一切都是 Widget

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

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

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


退出移动版