iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >AndroidFlutter实现原理浅析
  • 818
分享到

AndroidFlutter实现原理浅析

AndroidFlutterAndroidFlutter实现原理 2022-11-13 14:11:01 818人浏览 薄情痞子
摘要

目录前言一.安卓原生界面绘制的流程原生绘制流程SurfaceView绘制流程二.Flutter上界面绘制的流程FlutterActivity中的流程FlutterView中的实现na

前言

flutter可以说是当下最流行的跨平台技术了,其最突出的

网上可以搜到的文章,大多数都是flutter的用法,即使介绍其实现原理的,也直接深入源码直接解读,造成只有一定功能的读者才能理解。

本文希望以最通俗易解的方式介绍flutter的实现原理,也许不会介绍的深入或者详细,但是一定能让读者知道flutter的基本实现原理。

本文基于flutter2.0的源码进行原理分析,3.0的源码有些许变动,但整体流程是一样的。

一.安卓原生界面绘制的流程

原生绘制流程

有另外的一个系列文章来讲原生的界面,为了方便读者阅读,本文会简略描述一下整个流程。

其主要流程是在每次sync的时候去执行测量(measure),布局(layout),绘制(draw)的流程。

而draw的时候时候,核心是利用canvas执行各种绘制命令,并且把这些命令转换为buffer记录,最终发送给WMS层,然后转交给SurfaceFlinger,由其做最终的合成和渲染。

SurfaceView绘制流程

另外也许你还听说过另外一种可以在子线程渲染的控件:surfaceView。我们的视频播放器,高频绘制的自定义View都是由其实现的。

其主要流程图如下:

其原理其实和第一种方式类似,区别就是在于少了measure,layout的流程。而是自己去计算坐标,然后直接进入draw的流程,通过canvas写入native的数据buffer内存中,最后统一发送给WMS进行进入渲染的流程。

而Flutter的实现原理,其实就和surfaceView类似。

二.Flutter上界面绘制的流程

flutter有混合开发和纯flutter开发两种。纯flutter使用的是FlutterActivity,而混合开发一般使用的是FlutterView。我们先看一下使用FlutterActivity的方式。

FlutterActivity中的流程

首先看一下FlutterActivity的实现,发现其核心流程都交给了FlutterActivityDelegate处理,所以我们直接看Delegate的onCreate方法:

public void onCreate(Bundle savedInstanceState) {
        ...
        this.flutterView = this.viewFactory.createFlutterView(this.activity);
        if (this.flutterView == null) {
            FlutterNativeView nativeView = this.viewFactory.createFlutterNativeView();
            this.flutterView = new FlutterView(this.activity, (AttributeSet)null, nativeView);
            this.flutterView.setLayoutParams(matchParent);
            this.activity.setContentView(this.flutterView);
            this.launchView = this.createLaunchView();
            if (this.launchView != null) {
                this.addLaunchView();
            }
        }
        ...
    }

主要流程就是创建一个flutterView,添加到contentView中,所以其实无论哪种方式,最终都是由flutterView来实现的。

FlutterView中的实现

首先我们看一下FlutterView类,发现其继承自SurfaceView,这也回应了我们上面的描述,其核心实现原理就是基于surfaceView实现的。

其构造方法如下:非核心代码已做了删减处理

public FlutterView(Context context, AttributeSet attrs, FlutterNativeView nativeView) {
            super(context, attrs);
            ...
            //创建在native层的处理对象,相关绘制逻辑其实都是在native层处理的,Java层只负责传入
            this.mNativeView = new FlutterNativeView(activity.getApplicationContext());
            //创建dart的解释器
            this.dartExecutor = this.mNativeView.getDartExecutor();
            //创建渲染对象
            this.flutterRenderer = new FlutterRenderer(this.mNativeView.getFlutterJNI());
            //native层的view对象进行绑定   
            this.mNativeView.attachViewAndActivity(this, activity);
            //由于是surfaceView,所以在surface创建好之后传入naitve
            this.mSurfaceCallback = new Callback() {
                public void surfaceCreated(SurfaceHolder holder) {
                    FlutterView.this.assertAttached();
                    FlutterView.this.mNativeView.getFlutterJNI().onSurfaceCreated(holder.getSurface());
                }
                public void surfaceChanged(SurfaceHolder holder, int fORMat, int width, int height) {
                    FlutterView.this.assertAttached();
                    FlutterView.this.mNativeView.getFlutterJNI().onSurfaceChanged(width, height);
                }
                public void surfaceDestroyed(SurfaceHolder holder) {
                    FlutterView.this.assertAttached();
                    FlutterView.this.mNativeView.getFlutterJNI().onSurfaceDestroyed();
                }
            };
            this.getHolder().addCallback(this.mSurfaceCallback);
            //
            this.MactivityLifecycleListeners = new ArrayList();
            this.mFirstFrameListeners = new ArrayList();
            this.navigationChannel = new NavigationChannel(this.dartExecutor);
            this.keyEventChannel = new KeyEventChannel(this.dartExecutor);
            this.lifecycleChannel = new LifecycleChannel(this.dartExecutor);
            this.localizationChannel = new LocalizationChannel(this.dartExecutor);
            this.platformChannel = new PlatformChannel(this.dartExecutor);
            this.systemChannel = new SystemChannel(this.dartExecutor);
            this.settingsChannel = new SettingsChannel(this.dartExecutor);
            final PlatformPlugin platformPlugin = new PlatformPlugin(activity, this.platformChannel);
            this.addActivityLifecycleListener(new ActivityLifecycleListener() {
                public void onPostResume() {
                    platformPlugin.updateSystemUiOverlays();
                }
            });
            this.mImm = (InputMethodManager)this.getContext().getSystemService("input_method");
            PlatformViewsController platformViewsController = this.mNativeView.getPluginReGIStry().getPlatformViewsController();
            this.mTextInputPlugin = new TextInputPlugin(this, this.dartExecutor, platformViewsController);
            this.AndroidKeyProcessor = new AndroidKeyProcessor(this.keyEventChannel, this.mTextInputPlugin);
            this.androidTouchProcessor = new AndroidTouchProcessor(this.flutterRenderer);
            this.mNativeView.getPluginRegistry().getPlatformViewsController().attachTextInputPlugin(this.mTextInputPlugin);
            this.sendLocalesToDart(this.getResources().getConfiguration());
            this.sendUserPlatformSettingsToDart();

其构造方法中,主要流程就是各种功能的初始化,以及完成surface和native的绑定。

我们可以看到下面这样代码,就是把surface传入了native层。

FlutterView.this.mNativeView.getFlutterJNI().onSurfaceCreated(holder.getSurface());

所以看到这里,我们可以做这样的推测了:

flutter原理其实就类似于surfaceView的实现。通过传递surface到native层,然后通过这个surface获取到canvas,写入渲染buffer,最终通知到WMS完成绘制的整个流程。

native流程

onSurfaceCreated的创建最终会走到native层platform_view_android_jni_impl.cpp中的SurfaceCreated()方法。

static void SurfaceCreated(JNIEnv* env,
                           jobject jcaller,
                           jlong shell_holder,
                           jobject jsurface) {
  // Note: This frame ensures that any local references used by
  // ANativeWindow_fromSurface are released immediately. This is needed as a
  // workaround for https://code.Google.com/p/android/issues/detail?id=68174
  fml::jni::ScopedJavaLocalFrame scoped_local_reference_frame(env);
  auto window = fml::MakeRefCounted<AndroidNativeWindow>(
      ANativeWindow_fromSurface(env, jsurface));
  ANDROID_SHELL_HOLDER->GetPlatformView()->NotifyCreated(std::move(window));
}

这里很简单,创建native层的Window对象,调用NotifyCreated方法继续传入。

走到platform_view.cc的NotifyCreated方法如下:

void PlatformViewAndroid::NotifyCreated(
    fml::RefPtr<AndroidNativeWindow> native_window) {
  if (android_surface_) {
    //1
    InstallFirstFrameCallback();
    ...
  }
  //2
  PlatformView::NotifyCreated();
}

该方法中主要做了两件事:

第一件:回调java的onFirstFrame方法;

第二件:启动渲染流程。

NotifyCreated中,主要是交给delegate_去处理:

void PlatformView::NotifyCreated() {
  std::unique_ptr<Surface> surface;
  ...
  delegate_.OnPlatformViewCreated(std::move(surface));
}

这个delegate_其实是shell对象,则会调用到shell.cc的OnPlatformViewCreated方法:

// |PlatformView::Delegate|
void Shell::OnPlatformViewCreated(std::unique_ptr<Surface> surface) {
  TRACE_EVENT0("flutter", "Shell::OnPlatformViewCreated");
  FML_DCHECK(is_setup_);
  FML_DCHECK(task_runners_.GetPlatformTaskRunner()->RunsTasksOnCurrentThread());
 
  ...
  //这里主要是一系列的判断,避免死
  const bool should_post_raster_task =
      !task_runners_.GetRasterTaskRunner()->RunsTasksOnCurrentThread();
 
  fml::AutoResetWaitableEvent latch;
  //UI线程执行,渲染的流程
  auto raster_task =
      fml::MakeCopyable([&waiting_for_first_frame = waiting_for_first_frame_,
                         rasterizer = rasterizer_->GetWeakPtr(),  //
                         surface = std::move(surface)]() mutable {
        if (rasterizer) {
          // Enables the thread merger which may be used by the external view
          // embedder.
          rasterizer->EnableThreadMergerIfNeeded();
          rasterizer->Setup(std::move(surface));
        }
 
        waiting_for_first_frame.store(true);
      });
  ...
    auto ui_task = [engine = engine_->GetWeakPtr()] {
    if (engine) {
      engine->OnOutputSurfaceCreated();
    }
  };
  ...
    //启动各种渲染的流程
    fml::TaskRunner::RunNowOrPostTask(task_runners_.GetIOTaskRunner(), io_task);
    latch.Wait();
  if (!should_post_raster_task) {
    // See comment on should_post_raster_task, in this case the raster_task
    // wasn't executed, and we just run it here as the platform thread
    // is the raster thread.
    raster_task();
  }
}

这个方法中,主要就是各种检查,包括一些锁机制的判断,最后通知engine启动去渲染surface了

三.总结

Flutter的简单实现原理

Flutter的简单实现原理其实就类似于surfaceView的实现。

surfaceView中往buffer中写入渲染数据是通过java层的canvas实现的,而在flutter中是通过native层实现。flutter就是在native层接收到surface,然后通过surface获取到native层的canvas,对buffer进行写入,最终通知到WMS完成绘制的整个流程。

当然,详细的原理还包含了事件流程是如何分发的,如何翻译dart成可执行的代码,如何解释编译的产物等等,由于篇幅限制,本篇就不详细展开了,后续会逐渐写文章进行原理分析。

Flutter的几个高频问题

1.为什么主要流程使用jni实现?用Java实现是否可以?

我的理解是其实java实现也是完全可以的,但是要知道flutter是跨平台的。如果用java的话,那么在安卓上是没问题的,但是如果在iOS势必又要用OC在写一套逻辑,这样造成重复的工作量。而使用C来编写,任意平台其实都是可以通用的,降低开发成本,而且更不容易出现差异。之前和蚂蚁金服antv(蚂蚁数据可视化团队)的朋友聊天时,他们也是类似的考虑,底层逻辑使用C实现,安卓/IOS/PC等只做上层的接口封装和兼容。

2.为什么使用dart而不使用其他语言?

这个我的理解是用JS应该也是可以的,或者说java也可以。但是又都不够好。

如果是用java的话,flutter的热部署功能就无法实现,java类加载机制有缓存,一旦加载就无法被替换。当然不是绝对的,可以通过替换classLoader的方式进行替换,类似于Tomcat的热部署。但如果这样,实现成本就会及其的高,而且性能不佳。

使用js的话,实现热部署肯定是没有问题,但问题就在于生产环境,其实更需要的是效率。JIT的编译方式效率肯定是比不过AOT的。

而dart同时支持AOT和JIT两种方式,自然是最优的选择。

到此这篇关于Android Flutter实现原理浅析的文章就介绍到这了,更多相关Android Flutter内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: AndroidFlutter实现原理浅析

本文链接: https://www.lsjlt.com/news/172320.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • AndroidFlutter实现原理浅析
    目录前言一.安卓原生界面绘制的流程原生绘制流程SurfaceView绘制流程二.Flutter上界面绘制的流程FlutterActivity中的流程FlutterView中的实现na...
    99+
    2022-11-13
    Android Flutter Android Flutter实现原理
  • Golangmap实现原理浅析
    目录map的声明map声明map使用的方式map遍历map切片map 排序map使用细节map的练习题map的声明 基本语法 var map变量名 map[keytype]value...
    99+
    2022-12-16
    Golang map Golang map实现原理
  • 浅析Spring的事务实现原理
    目录SQL事务实现简介编程式事务声明式事务注释事务属性源事务拦截器Bean工厂事务属性源指导事务多样性支持总结SQL事务实现简介 首先我们来了解下,最简单的事务是怎么实现的呢?以JD...
    99+
    2022-11-13
    Spring事务原理 Spring事务
  • 浅析Golang中map的实现原理
    Golang是一门支持面向对象编程的编程语言,它拥有高效的内存管理机制和灵活的语法特性,被广泛用于服务器端开发、网络编程、云计算等领域。在Golang中,map是一种非常重要的数据结构,它可以存储键值对,并提供快速的查找和插入操作。本文将介...
    99+
    2023-05-14
    go语言 Golang map
  • 深入浅析java 中HashMap的实现原理
    这篇文章将为大家详细讲解有关深入浅析java 中HashMap的实现原理,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。1. HashMap的数据结构数据结构中有数组和链表来实现对数据的存储,...
    99+
    2023-05-31
    java hashmap ava
  • 浅析Vue中Virtual DOM和Diff原理及实现
    目录0. 写在开头1. vdom2. Diff0. 写在开头 本文将秉承Talk is cheap, show me the code原则,做到文字最精简,一切交由代码说明! 1. ...
    99+
    2023-03-21
    Vue Virtual DOM Diff原理 Vue Virtual DOM Vue Diff
  • JavaScript中的浅拷贝和深拷贝原理与实现浅析
    目录前言什么是浅拷贝实现浅拷贝什么是深拷贝实现深拷贝前言 JavaScript 中的浅拷贝和深拷贝指的是在复制对象(包括对象、数组等)时,是否只复制对象的引用地址或者在复制时创建一个...
    99+
    2023-05-17
    JavaScript深拷贝与浅拷贝 JS深拷贝与浅拷贝
  • 浅谈Webpack4 plugins 实现原理
    目录前言认识实践出真知前言 在 wabpack 中核心功能除了 loader 应该就是 plugins 插件了,它是在webpack执行过程中会广播一系列事件,plugin 会监听...
    99+
    2024-04-02
  • 浅谈Vue插槽实现原理
    目录一、样例代码二、透过现象看本质三、实现原理四、父组件编译阶段五、父组件生成渲染方法六、父组件生成VNode七、子组件状态初始化八、子组件编译阶段九、子组件生成渲染方法十、使用技巧...
    99+
    2024-04-02
  • 浅谈React底层实现原理
    目录1. props,state与render函数关系,数据和页面如何实现互相联动?2. React中的虚拟DOM常规思路改良思路(仍使用DOM)React的思路深入理解虚拟DOM3...
    99+
    2024-04-02
  • 浅析Java中的SPI原理
    在面向对象的程序设计中,模块之间交互采用接口编程,通常情况下调用方不需要知道被调用方的内部实现细节,因为一旦涉及到了具体实现,如果需要换一种实现就需要修改代码,这违反了程序设计的&q...
    99+
    2024-04-02
  • AndroidFlutter实现弹幕效果
    目录前言通用弹幕实现方案ListView弹幕方案实现基本框架轮播滚动轮询算法点击事件前言 需求要点如下: 弹幕行数为3行,每条弹幕相互依靠但不存在重叠每条弹幕可交互点击跳转滚动速度恒...
    99+
    2024-04-02
  • Flutter软键盘的原理浅析
    Flutter页面在软键盘弹出的时候,可以设置 Scaffold 的 resizeToAvoidBottomInset 属性来设置软键盘的处理。 当这个值为true的时候,...
    99+
    2024-04-02
  • GolangWaitGroup实现原理解析
    原理解析 type WaitGroup struct { noCopy noCopy // 64-bit value: high 32 bits are counter,...
    99+
    2023-02-03
    Go WaitGroup Go WaitGroup实现原理
  • Gochannel实现原理分析
    目录channelchannel类型创建channelchannel操作发送接收关闭无缓冲的通道有缓冲的通道close()如何优雅的从通道循环取值单向通道通道遍历异步通道通道总结ch...
    99+
    2023-05-14
    Go channel Go channel实现原理
  • 深入浅出Golang中select的实现原理
    目录概述select实现原理执行流程case数据结构执行select循环总结概述 在go语言中,select语句就是用来监听和channel有关的IO操作,当IO操作发生时,触发相应...
    99+
    2024-04-02
  • Node.js OAuth 的原理与实现,深入浅出
    ...
    99+
    2024-04-02
  • 深入浅析HashMap的工作原理
    这篇文章给大家介绍深入浅析HashMap的工作原理,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。实际上,HashSet 和 HashMap 之间有很多相似之处,对于 HashSet 而言,系统采用 Hash 算法决定集...
    99+
    2023-05-31
    hashmap
  • 深入浅析Java中 JVM的原理
    这篇文章将为大家详细讲解有关深入浅析Java中 JVM的原理,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真...
    99+
    2023-05-31
    java jvm ava
  • 深入浅析ELK原理与简介
    为什么用到ELK: 一般我们需要进行日志分析场景:直接在日志文件中 grep、awk 就可以获得自己想要的信息。但在规模较大的场景中,此方法效率低下,面临问题包括日志量太大如何归档、...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作