当前位置:   article > 正文

Flutter开发之--初识Flutter

Flutter开发之--初识Flutter

概述

Flutter 是由Google公司研发的一种跨端开发技术,在2018年正式推出。Flutter自带Skia图形绘制引擎,采用自绘制的方式,不管是在Android还是IOS上,Flutter都统一使用Skia引擎进行绘制,因此两端的渲染过程完全一致,能够实现像素级别的双端一致性。

在执行效率方面,众所周知,不管是哪个跨端框架,执行效率通常都是低于原生的。但是Flutter的执行效率接近原生。原因有两个,一是Flutter采用的是Dart语言,支持多种编译方式,既能以JIT的方式编译,也能用AOT的方式编译,JIT主要用于开发的阶段,这种方式虽然运行效率低,但是可以热重载(Hot Reload)。当需要打包发布的时候,也就是Release模式,可以使用AOT的方式将Dart的代码编译成平台原生代码,运行时无需再通过解释器解释,执行效率接近原生。 二是渲染引擎的优势,Flutter采用集成的Skia引擎自己渲染UI,没有跨层带来的性能损耗。而跨层的意思就是绘制的任务需要经过native层,应用层等多个层级,比如在React Native中进行UI渲染的时候,Android端需要通过JS Bridg将绘制的任务从JavaScript引擎中从C/C++ 层转移到Java层,,这涉及到JNI的调用,所以会产生一定的性能开销。而Flutter的绘制没有跨层,所以不存在这些额外的性能损失。

在跨端方面,Flutter不仅能够跨移动端,而且可以运行在Web端和桌面端,跨端能力极强。代码复用方面,由于Flutter采用自渲染的方案,所以多端从运行时环境到底层渲染都完全一致,因此可以实现最大化的多端复用。

Flutter整体架构

在这里插入图片描述

如上图所示,Flutter 的整体架构分为3层,从上到下分别是,框架层(FrameWork), 引擎层(Engine)以及嵌入层(Embedder),接下来从下到上依次介绍各层

嵌入层

嵌入层是和设备操作系统离得最近的一层,在这一层会提供一系列的接口,因此在载有任何操作系统的设备上,只要实现了嵌入层提供的接口,就能让Flutter在该平台上运行,从而实现跨端的能力。原生系统在和Flutter嵌入层做对接的时候,需要向Flutter提供一个Surface用于UI的展示,并且还需要处理用户的输入手势,将用户的输入手势转换成Flutter支持的手势格式。除此之外,原生系统还需要向Flutter提供所需要的线程和消息队列以及一些原生能力的封装与导出。嵌入层的实现语言和平台有关,比如Androi
上使用C++和Java完成适配,IOS平台上使用Objective-C/Objective-C++完成适配

引擎层

引擎层由C/C++实现,在该层中包含了Dart运行时和Skia底层绘制库,分别用于执行Dart代码,底层布局,文本绘制等工作。引擎层还负责帧调度及UI的底层绘制工作,它提供了Flutter核心API的底层实现,包括图形绘制,文本布局,文件和网络I/O、可访问性支持,插件架构,以及Dart运行时和编译工具链。

框架层

框架层使用Dart语言实现了Flutter的应用层框架,在这一层中定义了一些Flutter框架中常用的最基础的类和Flutter的UI基础以及大量的UI组件。
在框架层中,自底向上又可以细分为Foundation层,动画绘制与手势层,渲染层,以及组件层。在Foundation层中定义了Flutter应用框架中最基础的类,比如AbstractNode抽象节点,ChangNotifier通知监听器,组件标识Key等。然后在动画、绘制、手势层中则是提供了Flutter的UI基础。然后在渲染层提供了布局能力,并且定义了RenderObject树的概念,通过这套机制可以确定UI组件在界面中的位置、大小、以及如何绘制。在组件层中饰项链响应式编程的开发模式以及组件化的开发模式。最后就是Flutter提供的这些组件整体可以分为两个组件库,分别是Material,对应Android 的设计风格,Cupertino,对应IOS的设计风格。

跑通demo尝鲜

编写Flutter项目建议使用MAC电脑,因为需要同时支持Android和IOS端的开发,所以Mac电脑是最佳选择,配置环境也会简单很多。

Flutter项目的目录介绍

在这里插入图片描述

Flutter demo项目的运行

在项目的lib/main.dart中输入如下代码:


class MyApp extends StatelessWidget{
  const MyApp({super.key});

  
  Widget build(BuildContext context) {
    // TODO: implement build
    return const Center(
      child: Text("你好,自定义组件===Flutter",
          style: TextStyle(color: Colors.red,fontSize: 30)),
    );
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

在命令行执行flutter doctor,得到如下图的结果:
在这里插入图片描述
如果结果中没有红叉,就表示环境OK
运行结果:

Android平台:
在这里插入图片描述
IOS平台:
在这里插入图片描述

总结

本文主要介绍了flutter的技术特点以及整体架构并且介绍了flutter架构中各层的工作,并且在Android和IOS平台上跑通了一个基本的Demo。大致看了这个Demo的代码后,发现和Android的Compose的开发很相似,所以可以将两者对比起来学习。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/494005
推荐阅读
相关标签
  

闽ICP备14008679号