iOS-Fluter StatelessWidget & StatefulWidget

WhiteMonkey
104 阅读2分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情

1、StatelessWidget

StatelessWidget 是一个相对较简单的Widget，重写了createElement()方法； 主要用途是开发一些不需要维护状态的场景，比如一些静态界面的展示，通常就使用StatelessWidget。由于不需要维护状态，所以StatelessWidget的界面描述和构建也都是在StatelessWidget类中进行。

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      onGenerateInitialRoutes: null,
      home: const MyHomePage(title: 'DouBan'),
    );
  }
}

如上，直接在构建StatelessWidget的时候构建起描述的UI。

2、StatefulWidget

和StatelessWidget 一样，也是继承于Widget并重写了，createElement()方法，不同的是返回的Element不同，另外，额外增加了一个createState()方法。

//源码
abstract class StatefulWidget extends Widget {
  const StatefulWidget({ Key key }) : super(key: key);
    
  @override
  StatefulElement createElement() => StatefulElement(this);
    
  @protected
  State createState();
}
  • StatefulElement 间接继承Element类，与StatefulWidget相对应。StatefulElement中可能会多次调用createState()来创建State，也就是会动态的去生成界面。
  • createState() 用于创建StatefulWidget 相对应的状态，在StatefulWidget生命周期中，可能会被调用多从，一个StatefulElement 对应一个State 实例。

3、State

State 和 StatefulWidget 也是一一对应的关系，State表示与其对应的StatefulWidget需要维护的状态，并且保存对应的状态信息。

  • 在StatefulWidget 构建是被创建，调用createState()方法；
  • 在Widget 生命周期中可以被改变，当需要改变时，调用，setState()方法通知Flutter进行状态修改，Flutter收到通知后会重新调用build方法进行构建绘制。
  • widget 表示与state 关联的StatefulWidget 实例，通常可以通过这个参数获取StatefulWidget中的一些数据，需要注意的是，这个是可变的，当state与之关联的StatefulWidget被改变后，widget会指向新的StatefulWidget实例。
  • context 绘制上下文

Flutter 中的四棵树

上面StatefulWidget 源码中可以看到，widget中 会创建一个Element。那么Flutter中的UI绘制时怎么完成的？顺带学习一下。

  • 每个Widget树会生成一个Element树，ELement树中的节点都是继承自Element。
  • 根据Element树可以生成Render树（渲染树），渲染树中的节点都继承自RenderObject类。
  • 根据Render树 可以生成Layer树，然后在屏幕上显示，Layer树中节点都继承自Layer类。

image.png 通过上图可以发现，Widget负责给开发者进行UI描述，ELement则负责将Widget描述传递给Render树进行渲染。最后呈现在Layer树上。

  • 需要注意的是：三棵树中，Widget和Element是一一对应的，但是并没有和RenderObject一一对应，粗浅的理解是：Widget树是客人，Render树是画笔，Element树是画家，Layer树则是最后的画。

本文引用wendux

avatar
文章
阅读
粉丝