Android:手把手带你入门跨平台UI开发框架Flutter

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/carson_ho/article/details/97233628

前言

  • Flutter 作为Google出品的一个新兴的跨平台移动客户端UI开发框架,正在被越来越多的开发者和组织使用,包括阿里的咸鱼、腾讯的微信等。
    示意图

  • 今天,我将献上一份 《全面 & 详细的Flutter学习指南》,希望你们会喜欢。

示意图


目录

示意图


1. 简介

  • 定义:一款Google出品&开源的移动客户端UI开发框架(SDK)
  • 作用:用一套代码同时在Android、iOS上快速构建高质量、高性能的原生用户界面
  • 开发语言:Dart语言(高开发效率、高性能等)

2. 特点

  • Flutter的主要特点包括:使用自身的高性能渲染引擎进行渲染 & Dart编程语言语言
  • 具体介绍如下:

2.1 高性能渲染引擎

  • Flutter进行UI绘制时,使用的是自带的高性能渲染引擎进行绘制渲染(不使用WebView & 原生控件)
  • 好处:保证在Android和iOS上UI的一致性 & 避免对原生控件依赖而带来的限制和维护成本。
  • 组成:C、C ++、Dart、Skia(2D渲染引擎),具体描述如下:

示意图

特别注意:

  • Flutter依靠Flutter Engine虚拟机在iOS和Android上运行
  • Flutter Engine使用C/C++编写 = 低延迟输入 + 高帧速率
  • 开发人员可通过Flutter框架和API在内部进行交互

下面,简单介绍一下Flutter的2D渲染引擎:Skia
示意图

2.2 Dart语言

  • 介绍Dart语言前先介绍两个概念:JIT和AOT。程序主要有两种运行方式:静态编译 & 动态编译,具体如下:
    示意图

特别注意:

  • JIT 和 AOT指的是程序运行方式,和编程语言并非强关联的。
  • 有些语言可以以JIT方式 & AOT方式一起运行,如Java,它可在第一次执行时编译成中间字节码、然后在之后执行时可以直接执行字节码
  • 通常区分是否为AOT的标准就是看代码在执行之前是否需要编译,只要需要编译,无论其编译产物是字节码还是机器码,都属于AOT

Dart语言的特点

  • Dart语言具备开发效率高、高性能 & 类型安全的特点
  • 具体如下:
    示意图

3. 原理解析

3.1 框架结构

  • Flutter框架主要分为两层:FrameWork层、Engine层,如下图所示:
    示意图

  • 说明:开发时,主要基于Framework层;运行时,则是运行在 Engine上。每层的具体介绍如下:
    示意图

3.2 原理概述

  • 开发时,主要基于Framework层;运行时,则是运行在 Engine上

  • Engine是Flutter的独立虚拟机,由它适配 & 提供跨平台支持;因为其存在,Flutter不使用移动端系统的原生控件, 而是使用自己 Engine 来绘制 Widget (Flutter的显示单元); Dart 代码是通过 AOT 编译为平台的原生代码,所以 Flutter可直接与平台通信,不需要JS引擎的桥接。

  • 同时 Flutter 唯一要求系统提供的是 canvas,以实现UI的绘制。
    示意图

  • 编译时,具体如下:
    示意图

3.3 关于widget

Flutter理念:“一切皆为Widget”,Widget是Flutter应用程序用户界面的基本构建块,具备以下特点:

  • 属于具有一致性的统一对象模型,与其他将视图、控制器、布局和其他属性分离的框架不同。更新widget时更加高效
  • 不可变的,仅支持一帧,且每一帧上不会直接更新,要更新而必须使用Widget的状态。无状态和有状态Widget 的核心特性相同,每一帧都会重新构建;
  • 有一个State对象,用于跨帧存储状态数据 & 恢复

4. 特点

  • Flutter具备跨平台、开发效率高 & 高性能的特点
  • 具体说明如下:

4.1 跨平台 & 开发效率高

Flutter通过使用上述所述的自身渲染引擎、原理框架 & Widget运行,使用一套代码即可同时构建iOS和Android应用,从而实现跨平台的特性,最终提高开发的效率

4.2 高性能

  • 原因1:通过其自带的高性能渲染引擎进行渲染
  • 原因2:Dart语言本身的语言特性
  • 原因3:编译过程特点,具体如下:
    示意图

5. 对比

  • 跨平台开发的本质是为了:增加代码复用、减少不同平台差异适配的工作量 & 提高开发效率。
  • 目前主流的跨平台开发框架有:React-Native、Weex和本文提及的Flutter。下面,我先简单介绍React-Native和Weex,再进行三者的对比。

示意图

5.1 React-Native

  • 简介
    由Facebook出品,采用了JavaScript语言、JSCore引擎和通过原生渲染的跨平台框架

  • 实现原理
    通过编写JavaScript语言代码,通过 React Native 的中间层来调用 Native端的组件,最终实现相应的功能。JS端中所写控件的作用类似 Map中的key 值,对应着Native端的对应控件(如 Android 中 标签对应 ViewGroup 控件)。JS端会通过多个key 组合成Dom,最后交由Native端进行解析,最终渲染出Native端的控件。
    示意图

  • 实现框架
    React Native的架构主要由三层实现。其中最重要的是由C++ 实现的中间适配层,此处最主要封装了JavaScriptCore用于执行JS的解析,最终实现了JS端与原生端的双向通信交互。而React Native运行在JavaScriptCore中。(在iOS上直接使用内置的javascriptcore、在Android则使用webkit.org官方开源的jsc.so

示意图

5.2 Weex

  • 简介
    由Alibaba出品,采用了JavaScript语言、JS V8引擎和通过原生渲染的跨平台框架

  • 实现原理
    与React-Native类似,JS端会通过多个key组合成Dom,最后交由Native端进行解析,最终渲染出Native端的控件,但区别在于:Weex是可以跨三端的 = Android、iOS、Web,其原因在于在开发过程中,代码模式、编译过程、模板组件、数据绑定、生命周期等上层语法是一致,不同的是Web端和Native端对Virtual DOM 执行的解析方法有所区别。
    示意图

  • 实现框架
    weex的架构主要分为三部分,具体如下:
    示意图

5.3 三者对比

示意图

注:对于性能的对比,从理论上来说Flutter应该是最接近原生性能 & 最好的,但就目前实际应用&体验中并没具备很明显的差异化,后续需进行进一步的验证。


6. 学习方式 & 资料

  • 官网:https://flutter.dev/
    快速入门 & 学习最好的方式是:阅读Flutter官网的资源,同时官网也是了解最新Flutter发展动态的地方
  • Flutter中文网社区:https://flutterchina.club
    目前Flutter最大的中文资源社区,提供了:Flutter官网文档翻译、开源项目 & 案例等学习资源
  • StackOverflow:https://stackoverflow.com/
    活跃度最高的Flutter问答社区,Flutter开发团队的成员也经常会在上面回答问题
  • 源码:https://flutter.dev/docs/development/tools/sdk/releases
    Flutter SDK的源码具备以下特点:开源、示例 & 详细注释,Gallery是Flutter官方示例APP,其源码在Flutter源码“examples”目录下

7. 总结

  • 本文全面介绍了Flutter入门学习知识,接下来推出的文章,我将继续讲解Flutter的相关知识,包括使用语法、实战等,感兴趣的读者可以继续关注我的博客哦:Carson_Ho的Android博客

请帮顶 / 评论点赞!因为你们的赞同/鼓励是我写作的最大动力!

参考文章:
https://flutterchina.club/
https://juejin.im/post/5ad6b8db6fb9a028c42eb90a
https://book.flutterchina.club/chapter1/flutter_intro.html
https://juejin.im/post/5afd77466fb9a07aab2a12da
https://www.jianshu.com/p/7e0bd4708ba7
https://juejin.im/post/5b3c8a4be51d4519935860d5

展开阅读全文

google移动应用程序开发框架 Flutter

10-09

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。rn 2018年2月27日,在2018世界移动大会上,Google发布了Flutter的第一个Beta版本。Flutter是Google用以帮助开发者在Ios和Android两个平台开发高质量原生应用的全新移动UI框架。rn 其实我第一次听说Flutter是在收到谷歌开发者公众号的推送里,当时读完了那篇文章觉得Flutter的优点确实比较突出:rn 热重载(Hot Reload),作为一个菜鸟安卓开发者,能热重载真的太舒服了,利用Android Studio直接一个ctrl+s就可以保存并重载,模拟器立马就可以看见效果,就这一点比原生安卓制作简直不知道高到哪里去了。rn 一切皆为Widget的理念,对于Flutter来说,手机应用里的所有东西都是Widget,通过可组合的空间集合、丰富的动画库以及分层课扩展的架构实现了富有感染力的灵活界面设计。rn 借助可移植的GPU加速的渲染引擎以及高性能本地代码运行时以达到跨平台设备的高质量用户体验。 这段介绍是直接抄下来的,虽然我并不知道什么叫可移植的GPU加速的渲染引擎,但是最终结果就是利用Flutter构建的应用在运行效率上会和原生应用差不多。rn酷安上有一个Flutter的演示Demo,Flutter Gallery。rn 如果经常逛酷安的一定会发现这个画廊的演示Demo的图标和另一个演示Demo的图标是一样的,Google Fuchsia OS Preview,这个应用的是传闻的Google正在研发的新一代操作系统,所以个人认为,Flutter的存在可能不仅仅是实现在安卓和IOS上的运行,更是为了日后丰富Fuchsia这个新系统的软件生态而存在的。rnFlutter的核心内容:rn 接下来我想写一下我自己通过这两天的接触对于Flutter的核心内容也就是上面好处的第二点的理解。rn一切都是控件(Widget)rn 在Flutter中,每个应用程序都是Widget,这点和其他的应用框架不一样,Flutter的对象模型是统一的,也就是控件。rn 控件是基于构图形成层次结构,每个控件嵌套在其中,并从其父代继承属性,没有单独的“应用程序”对象,只有根控件。rn您可以通过告知框架用另一个控件替换层次结构中的控件来响应事件,比如用户交互,然后框架会对比新的控件和旧的控件,并有效的更新用户界面,即更新有变化的控件。rn 也就是说,在Flutter中,一个应用就是有许许多多的Widget组合而成的。 论坛

没有更多推荐了,返回首页