初识Flutter

简介: 本节向读者介绍什么是Flutter,移动端跨平台技术的对比,以及Flutter的整体架构

认识Flutter

官方介绍:Flutter是谷歌推出的的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。

Flutter 是一款移动程序sdk,包含框架、控件和一些工具,可以用一套代码同时构建Android和iOS应用,并且性能可以达到原生应用一样的性能(平滑,自然的滑动效果)

Flutter特点

跨平台
现在Flutter至少可以跨4种平台(Linux、Android、IOS,MacOS、windows)甚至支持嵌入式开发。到目前为止,Flutter算是支持平台最多的框架了,具有良好的跨平台性,减少了开发成本。
高性能
基于最底层Skia的图形库去渲染,不需要与原生平台之间频繁的通信,所以性能更好,平滑而自然的滑动效果和平台感知,为用户带来全新的体验。
Flutter采用120fps(每秒传输帧数)的超高性能GPU渲染技术,而ReactNative只能达到60fps
统一的UI
Flutter提供了丰富的内置UI组件(包含许多核心的widget 滚动、导航、图标、字体),保证不同平台的统一。

移动端的跨平台技术对比

H5技术:

采用Html+Javascript技术,比如目前流行的框架Vue,React、Angular都是通过构建网页实现跨平台功能。
缺点:渲染效率低,用户体验差。同时网页调用设备硬件相关API困难。

React Native(RN):

也是使用javascript 语言进行跨平台App开发。但是和H5相比,它是在js运行时编译成各个平台的native代码。也就是通过js代码调用原生的组件,实现相应的功能,支持热部署。
缺点:渲染方法还是调用各平台的原生控件,框架本身需要处理大量平台的逻辑,随着系统版本变化和API变换,开发者也需要处理不同平台的差异,增加了维护成本,性能方面比H5有很大的提高,但还是会存在丢帧、白屏的问题。

Flutter:

使与之前采用的js语言不通,Flutter才用Dart语言,所以编译时不需要js引擎。将代码编译成原生代码,并且直接在各个平台中使用其高效渲染引擎Skia(Goole的一个2D图像处理函数库,支持跨平台。)进行渲染,不需要调用平台相关控件。完美的解决了不同平台的性能问题,实现一套代码跨平台。
特点:高效渲染, 丰富的视图组件,由于其渲染不依赖各平台组件,所以运行在不同的平台效果是一致的,并且支持热部署。

Dart

一种面向对象编程的强类型语言,语法像javascript+java的结合体。
在Flutter中使用Dart消除了对JavaScript桥层的需要,提高了性能。

Flutter总体架构

Flutter架构分为两层:
flutter.jpg
Flutter是基于Framework开发,运行在Engine上

Engine:

引擎部分,使用c++实现可以最大限制的发挥性能。是连接框架和系统的桥梁

  • Skia 图像处理函数库(其已作为Google Chrome,Chrome OS,Android, Mozilla Firefox, Firefox OS等其他众多产品的图形引擎)
  • Dart DartVm虚拟机
  • Text 在这表示纹理将图片、文本渲染到页面。

Framework:

框架部分,使用Dart语言,该层提供了一系列基础库,用于处理动画、手势

  • Foundation 基础 接口层
  • Animation 动画
  • Painting 绘制
  • Gestures 手势触碰
  • Rendering 渲染,依赖于Dart UI层
  • Widgets 借鉴React Native 一切皆为组件的理念(带状态 无状态)
  • UI 层
    Material 风格——Goole设计风格(Vue、Angular Bootstrap都有Material规范)也是Android的默认风格。

Cupertino风格—— IOS设计风格


云顶云(yundingyun.com)是国内首批专注于云计算与大数据服务的提供商,致力于“让云计算更简单”。做为阿里云五星授权服务中心,云顶云致力于为企业和政府提供方案咨询、架构设计、部署实施、系统定制、运维托管、技术培训等全方位“4S”级公有云、私有云定制化服务。

相关文章
|
4月前
Flutter中的OverflowBox、SizedOverflowBox,详细介绍
Flutter中的OverflowBox、SizedOverflowBox,详细介绍 在Flutter中,当一个widget的大小超出了其父widget的大小时,通常会发生溢出现象。为了解决这个问题,Flutter提供了两个widget:OverflowBox和SizedOverflowBox。
|
10月前
|
Dart UED
Flutter之ElevatedButton详解
Flutter之ElevatedButton详解
flutter系列之:使用SliverList和SliverGird
在上一篇文章我们讲解SliverAppBar的时候有提到过,Sliver的组件一般都用在CustomScrollView中。除了SliverAppBar之外,我们还可以为CustomScrollView添加List或者Grid来实现更加复杂的组合效果。 今天要向大家介绍的就是SliverList和SliverGird。
flutter系列之:使用SliverList和SliverGird
|
容器
Flutter | Sliver 系列
Flutter | Sliver 系列
使用 Flutter LinearGradient
使用 Flutter LinearGradient
349 0
使用 Flutter LinearGradient
|
Android开发 iOS开发
使用 Flutter SystemChrome
使用 Flutter SystemChrome
287 0
|
监控 JavaScript 前端开发
使用 Flutter Navigator2.0 最舒服的姿势
使用 Flutter Navigator2.0 最舒服的姿势
236 0
使用 Flutter Navigator2.0 最舒服的姿势
Flutter之 ImageWidger
Flutter之 ImageWidger
160 0
Flutter之 ImageWidger