头图

【Flutter 2-4】FlutterUI布局和Widget——Statelesswidget与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查看,并且可以下载下来运行并体验。


公众号

一生只有一个职业:学生

29 声望
6 粉丝
0 条评论
推荐阅读
【Flutter 3-5】Flutter进阶教程——在Flutter中使用Lottie动画
在移动开发中总是需要展示一些动画特效,作为程序员的我们并不是很擅长用代码做动画,即便是有些动画可以实现,在跨平台的过程中也会因为API的差异性导致动画在各个平台中展示的有差异。所以为了释放程序员的双手...

弗拉德阅读 4.7k

封面图
Flutter 让你的Dialog脱胎换骨吧!(Attach,Dialog,Loading,Toast)
4.0版本做了重大调整,迁移请参照: SmartDialog 3.x 迁移 4.0本文内容已更新,文中内容及其代码皆为4.0用法前言Q:你一生中闻过最臭的东西,是什么?A:我那早已腐烂的梦。兄弟萌!!!我又来了!这次,我能自信...

小呆呆6662阅读 2.3k

封面图
Flutter 这一年:2022 亮点时刻
2022 年,我们非常兴奋的看到 Flutter 社区持续发展壮大,也因此让更多人体验到了令人难以置信的体验。每天有超过 1000 款使用 Flutter 的新移动应用发布到 App Store 和 Google Play,Web 平台和桌面应用程序数...

Flutter阅读 1.1k

个推支持小程序消息推送,助力开发者实现用户高触达、高转化
随着小程序技术和应用场景的不断完善,越来越多的开发者搭建了小程序平台,为用户带来更“轻量”的服务。在小程序用户迅猛增长的同时,开发者对于小程序用户精细化触达的需求也愈加强烈。近日,个推消息推送上线了...

个推阅读 1.1k

封面图
远程 | 开源项目 AppFlowy | 招 Flutter / Rust 实习生
AppFlowy Inc 成立于 2022年1月,是一家初创开源软件厂商,我们致力打造一款无代码应用搭建协同办公类软件,同时提供安全可靠、开放灵活的解决方案。企业或个人能够在 AppFlowy 上轻松搭建贴合自己需求的应用,从...

annieappflowy阅读 948

Flutter异常监控 - 壹 | 从Zone说起
如果你正需要处理Flutter异常捕获,那么恭喜你,找对地了,这里从根源上给你准备了Flutter异常捕获需要是所有知识和原理,让你更深刻认识Flutter Zone概念。

听蝉阅读 908

大年初四,Flutter Forward 中国社区直播活动与你不见不散
之前我们预告过,2023 年 1 月 25 日 (年初四),Flutter 团队将在肯尼亚首都内罗毕举办 Flutter Forward 大会,并同时开启线上直播。本次活动将为展示最新的 Flutter 技术更新,包括一个主题演讲,以及多个技术演...

Flutter阅读 905

一生只有一个职业:学生

29 声望
6 粉丝
宣传栏