Flutter面试之渲染流程

Flutter面试中必问的一个面试题就是渲染相关的话题。作为Google在2018年发布的一款跨平台UI框架,使用Dart作为其开发语言,底层使用Skia图形库进行视图渲染,渲染速度和用户体验堪比原生。

Flutter渲染流程

总的来说,Flutter中一帧的渲染可以分为三个过程:请求渲染、绘制和光栅化。

请求渲染阶段

Flutter中也是通过调用setState方法来通知刷新UI。

  1. 调用setState方法,将需要刷新的RenderObject加入dirtyList中;
  2. 调用window对象scheduleFrame函数,scheduleFrame函数是一个native函数,Dart层只是一个函数声明,具体逻辑是在C++层实现;
  3. C++层的scheduleFrame函数会调用Animator对象进行RequestFrame,最终会通过JNI调用回到Java层,调用Android系统的Choreographer监听下一个Vsync信号。
    对应的源码如下:
void setState(VoidCallback fn) {
   ...
    _element.markNeedsBuild(); //通过相应的element来实现更新,关于element,widget,renderOjbect这里不展开讨论
  }

  void markNeedsBuild() {
   ...
    if (dirty)
      return;
    _dirty = true;
    owner.scheduleBuildFor(this);
  }

   void scheduleBuildFor(Element element

相关推荐

  1. Flutter面试渲染流程

    2024-02-21 11:20:03       45 阅读
  2. Flutter面试事件分发机制

    2024-02-21 11:20:03       42 阅读
  3. Vue面试csr与ssr渲染的区别

    2024-02-21 11:20:03       52 阅读
  4. 浏览器渲染流程

    2024-02-21 11:20:03       26 阅读
  5. 老生常谈的页面渲染流程

    2024-02-21 11:20:03       25 阅读
  6. Flutter 启动流程解析

    2024-02-21 11:20:03       45 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-21 11:20:03       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-21 11:20:03       106 阅读
  3. 在Django里面运行非项目文件

    2024-02-21 11:20:03       87 阅读
  4. Python语言-面向对象

    2024-02-21 11:20:03       96 阅读

热门阅读

  1. bash shell实现简易进度条

    2024-02-21 11:20:03       56 阅读
  2. MySQL 的存储引擎(基本介绍)

    2024-02-21 11:20:03       57 阅读
  3. 数据权限设计思考

    2024-02-21 11:20:03       52 阅读
  4. .net 微服务 服务保护 自动重试 Polly

    2024-02-21 11:20:03       53 阅读
  5. C++ 中的单例模式singleton

    2024-02-21 11:20:03       47 阅读
  6. 设计模式----单例模式

    2024-02-21 11:20:03       45 阅读
  7. 指定截至频率的低通滤波器设计

    2024-02-21 11:20:03       49 阅读