Flutter 渲染树

柔情只为你懂 2022-10-30 04:27 180阅读 0赞

### 文章目录 ###

*  基础知识
 *   *  Widget
     *  RenderObject
     *  Element
     *  WidgetTree
     *  ElementTree
     *  RenderTree
     *  简单抽象关系图
     *  绘制极简流程
     *   *  \`StatefulWidget\`绘制
         *  \`StatelessWidget\`绘制
     *  小结
 *  Widget的key
 *   *  GlobalKey和LocalKey的区别
     *   *  \`LocalKey\`
         *  \`GlobalKey\`
 *  参考

# 基础知识 #

`Flutter`中我们往往会听到如下几个类:

1.  `Widget`
2.  `Element`
3.  `RenderObject`

我们来分别讨论下他们的作用：

## Widget ##

用于描绘你的视图长什么，相当于一个建造楼房的蓝图。  
内部存在函数用于生成`Element`和`RenderObject`.

class Widget{
        
      
     //生成Element
     Element createElement();
     
    }

//Widget自类生成渲染器对象
    class RenderObjectWidget extends Widget {
        
    	RenderObject createRenderObject(BuildContext context);
    }

## RenderObject ##

将`Widget`设计绘制到屏幕中，再往下便是底层绘制引擎，这个对象被`Element`持有引用。

## Element ##

持有`Widget`和`RenderObject`，决定`Widget`描绘的层次与提高绘制性能。可以简单理解这个类用`RenderObject`来渲染所关联的`Widget`，并且内部有优化机制决定是否更新渲染。

## WidgetTree ##

`Flutter`视图由一个个`Widget`组合而来得到最终的渲染蓝图。

如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70]

## ElementTree ##

每一个`Widget`会生成对应的`Element`，最后这些生成的`Element`也会形成一个树。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 1]

## RenderTree ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 2]

> Tip: 部分Widget没有RenderObject对象，而是来自子树的。读者可自行深入

## 简单抽象关系图 ##

`Element`会持有两个对象的引用:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 4]

如果`Widget`是`StatefulWidget` 那么`Element`还会持有对应的`State`类

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 5]

## 绘制极简流程 ##

### `StatefulWidget`绘制 ###

`StatefulWidget`绘制设计蓝图是位于`State`类的`build`函数返回。

class MyStateWidget extends StatefulWidget {
        
      @override
      _MyStateWidgetState createState() => _MyStateWidgetState();
    }
    class _MyStateWidgetState extends State<MyStateWidget> {
        
      //决定绘制的蓝图
      @override
      Widget build(BuildContext context) {
        
        return Container();
      }
    }

绘制教程：

`StatefulWidget`系统会调用`createElement`生成一个`Element`  
![在这里插入图片描述][20210217151811446.png]  
![在这里插入图片描述][20210217151824121.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 6]

class StatefulElement extends ComponentElement {
        
     @override
      Widget build() => _state.build(this);
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 8]

> tip: 以上顺序笔者并没有严格阅读源码，可能存在错误请注意！！ - -其实是不想看

### `StatelessWidget`绘制 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 10]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 11]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 12]

## 小结 ##

我们的`StatelessWidget`和`StatefulWidget`中的`build`函数的返回的上下文就是`element`.

`StatelessWidget`自己的build函数返回视图的配置信息给`Render`对象进行绘制。

`StatefulWidget` 使用状态类state的build返回的视图配置给`Render`对象进行绘制

# Widget的key #

`Widget`存一个属性`key`，在构造时可以传入。默认`null`.  
`key`主要的作用的是用来判断当 `WidgetTree`发生了移动删除后，`ElementTree`对应的`Element`是否需要更新对`Widget`的引用,或移动某个`Element`在`WidgetTree`的位置，以及是否销毁重建。具体可以看 参考1

## GlobalKey和LocalKey的区别 ##

> 仅讨论StatefulWidget

### `LocalKey` ###

当两个Widget在同一个父级时且做一次交换位置，那么`element`不会删除重建，只会根据状态更新引用或者交换ElementTree的元素位置，如果两个Widget不属于同一个父级那么会删除`Element`节点重建。

如下例子：

点击按钮交换两个Widget的位置（`UniqueKey`是`LocalKey`子类）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 13]

import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    
    import 'UniqueColorGenerator.dart';
    
    void main() => runApp(new MaterialApp(home: PositionedTiles()));
    
    class PositionedTiles extends StatefulWidget {
        
      @override
      State<StatefulWidget> createState() => PositionedTilesState();
    }
    
    class PositionedTilesState extends State<PositionedTiles> {
        
    
      List<Widget> tiles = [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [StatefulColorfulTile(key: UniqueKey())],
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [StatefulColorfulTile(key: UniqueKey())],
          ),
        ),
      ];
    
      @override
      Widget build(BuildContext context) {
        
        return Scaffold(
          body: Row(children: tiles),
          floatingActionButton: FloatingActionButton(
              child: Icon(Icons.sentiment_very_satisfied), onPressed: swapTiles),
        );
      }
    
      swapTiles() {
        
        setState(() {
        
          tiles.insert(1, tiles.removeAt(0));
        });
      }
    }
    
    
    class StatelessColorfulTile extends StatelessWidget {
        
      Color myColor = UniqueColorGenerator.getColor();
    
      @override
      Widget build(BuildContext context) {
        
        debugPrint(
            "StatelessColorfulTile ${this.hashCode} 重新build element ${context.hashCode} ${this.createElement() == context}");
    
        return Container(
            margin: EdgeInsets.only(top: 50),
            color: myColor,
            child: Padding(padding: EdgeInsets.all(70.0)));
      }
    }
    
    class StatefulColorfulTile extends StatefulWidget {
        
      StatefulColorfulTile({
        Key key}) : super(key: key); // NEW CONSTRUCTOR
    
      @override
      ColorfulTileState createState() {
        
        debugPrint(
            "StatefulColorfulTile ${this.hashCode} 重新createState");
       return ColorfulTileState();
      }
    }
    
    
    class ColorfulTileState extends State<StatefulColorfulTile> {
        
      Color myColor;
    
      @override
      void initState() {
        
        super.initState();
        myColor = UniqueColorGenerator.getColor();
      }
    
      @override
      Widget build(BuildContext context) {
        
        debugPrint(
            "ColorfulTileState ${this.hashCode} 重新build element ${context.hashCode}   widget: ${widget.hashCode}");
    //
        return Container(
            color: myColor,
            child: Padding(
              padding: EdgeInsets.all(70.0),
            ));
      }
    }

多次点击按钮的日志:

flutter: StatefulColorfulTile 731559728 重新createState
    flutter: ColorfulTileState 940397615 重新build element 202   widget: 731559728
    flutter: StatefulColorfulTile 318147042 重新createState
    flutter: ColorfulTileState 967144222 重新build element 206   widget: 318147042
    flutter: StatefulColorfulTile 318147042 重新createState
    flutter: ColorfulTileState 54916526 重新build element 210   widget: 318147042
    flutter: StatefulColorfulTile 731559728 重新createState
    flutter: ColorfulTileState 734210995 重新build element 214   widget: 731559728

可见element被多次创建

--------------------

### `GlobalKey` ###

不论两个`Widget`是否是同一个父级，当`Widget`交换位置的时候,`Element`都会复用。  
我们把上述代码做下简单修改：

List<Widget> tiles = [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [StatefulColorfulTile(key: GlobalKey())],
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [StatefulColorfulTile(key: GlobalKey())],
          ),
        ),
      ];

多次点击：

flutter: ColorfulTileState 11684886 重新build element 117   widget: 470363955
    flutter: ColorfulTileState 11684886 重新build element 117   widget: 470363955
    flutter: ColorfulTileState 291476133 重新build element 111   widget: 1022701588
    flutter: ColorfulTileState 11684886 重新build element 117   widget: 470363955
    flutter: ColorfulTileState 291476133 重新build element 111   widget: 1022701588
    flutter: ColorfulTileState 291476133 重新build element 111   widget: 1022701588
    flutter: ColorfulTileState 11684886 重新build element 117   widget: 470363955

可见element 没有创建新的，而是移动的了位置

# 参考 #

[1. Keys! What are they good for?][1. Keys_ What are they good for]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70]: /images/20221024/e6350369b10346d492fbd6f5d2ed4ba7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 1]: /images/20221024/0ab9b9cca6f94d43ad347ce0bd927dc3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 2]: /images/20221024/87cb27ee6c254203abae99d876f701b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 3]: /images/20221024/ab914ac2218946d09c0f848c50589a73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 4]: /images/20221024/2935356b7f1c42cda0b5dd29dd05066e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 5]: /images/20221024/5cac9f83358d44bebd368be63115a1d3.png
[20210217151811446.png]: /images/20221024/e48ce3909a4c4fe996d10eebb9807e91.png
[20210217151824121.png]: /images/20221024/73f3ffa181804edf9331e06f1bafb616.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 6]: /images/20221024/a84805c4f40e4e478da611af236c7089.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 7]: /images/20221024/2226e57e32b641afbb76eee324abc86a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 8]: /images/20221024/4620a797ad994e8bbe25212135dfafed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 9]: /images/20221024/fc892f13a1444ec5804b0253f757c538.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 10]: /images/20221024/d22431c092ea462ca2da57ebef5aafd2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 11]: /images/20221024/548c5c1789aa4e1fb942cab3d28cef01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 12]: /images/20221024/9d9c67f1a42846fbb99e768351bd730b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmYW5taW5neWlx_size_16_color_FFFFFF_t_70 13]: /images/20221024/70211f8263d14eb3a693af1555d5be0f.png
[1. Keys_ What are they good for]: https://medium.com/flutter/keys-what-are-they-good-for-13cb51742e7d