Google为什么以Fullter作为原生突破口

最新推荐文章于 2023-06-29 13:59:12 发布
最新推荐文章于 2023-06-29 13:59:12 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： 07 Flutter 文章标签： Flutter google
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hongxue8888/article/details/95042232
版权

前言

在 Google I/O ’17 上，Google 向我们介绍了 Flutter —— ⼀款新的⽤于创建移动应⽤的开源库。

正如你所想的那样，Flutter 是能够帮助创建拥有漂亮 UI 界⾯的跨平台移动应⽤解决⽅案。Flutter 的界⾯设计与 web 应⽤类似，因此，你能够从 Flutter 上找到像使⽤ HTML/CSS 那样熟悉的感觉。

Google 表⽰：
Flutter 将会帮你更容易，更快速的开发出界⾯美观的移动应⽤。听起来很美好，但是⾸先要说的是，我对其他跨平台解决⽅案，诸如  Xamarin，PhoneGap，Ionic，React Native 等并不是很认可。 ⼤家都知道，这些解决⽅案互有利弊，很难选择。虽然我并不确定 Flutter是否会与它们有所不同，但是我很期待。

Flutter 在 Android 前端开发上具有很多特⾊，很有吸引⼒。

Android的前生今世

Android系统作为全球第一大系统，基于Java开发的移动端有着诸多的性能优势

2018年前 H5的性能瓶颈和RN的停更 导致业界对跨平台开发失去信心。直到2018年10月Google推出首个Flutter跨平台解决方案，打破整个移动开发的方向

为什么Flutter成为Android方向标？

  • 跨平台性: Flutter基于图像绘制引擎进行渲染，在不同平台下绘制效果是绝对一致的，能做到真正的跨平台，一处写 处处运行

  • 性能优异性: 不同于H5通过DOM渲染 和RN映射组件，Flutter直接基于native进行绘制。性能上完全超过原生

  • 热重载性:Android原生开发 会遇到 编译-打包-安装 三部曲。开发效率迟迟得不到提升。热重载技术在Flutter内完美体现

Flutter详情介绍

  • Dart语法编译: Dart 是一种强类型、跨平台的客户端开发语言。具有专门为客户端优化、高生产力、快速高效、可移植易学的风格。Dart主要由Google负责开发和维护

  • Flutter插件: Flutter使用的Dart语言无法直接调用Android系统提供的Java接口，这时就需要使用插件来实现中转。Flutter官方提供了丰富的原生接口封装

Flutter系统架构

Flutter分为三大部分：

  1. 由Dart语言负责的Framwork层

  2. Dart语法执行器

  3. Skia图像处理引擎

在这里插入图片描述

Sika图像处理引擎

  • 2005年Skia图像处理引擎成立，用来展示Chrome 火狐 和其他Google自家的产品使用

  • 2007年 第一个Android系统问世，于是Google开发者将Skia移植到Android平台

  • Skia作为一个2D的图形系统，包括绘图，渲染，显示图片都是用Skia完成

原生开发会接触到Skia吗？
在这里插入图片描述

Skia引擎详解

疑问：是真的吗？ 我只接触过Bitmap，原来Bitmap下面还有很多奥秘

源码验证----创建Bitmap开始

在这里插入图片描述

图：图片源码追踪

在这里插入图片描述

图：控件源码追踪

Skia引擎与Flutter有什么关系呢？

除了通过xml方式定义布局 或者继承View 显示在Android屏幕外还有没有方法呢？

如何显示

为什么Flutter会实现三大特性（跨平台，性能高，热重载）

1 跨平台技术

Android图像引擎 Skia
IOS图像引擎 JPEG

2 性能比原生高

在这里插入图片描述

渲染流程 ：
在这里插入图片描述

图：渲染流程

React渲染与Flutter渲染相同点
在这里插入图片描述
React渲染与Flutter渲染不同点 ：

  • 绘制树: ReactNative基于ReactShadow的链式结构在内存中形成一个虚拟的Dom树，Flutter是通过引擎实现不同图层的渲染方式

  • 机制不一样: ReactNative最终被反射成原生控件，而Flutter是底层通过引擎直接渲染，不存在映射的说法

Flutter渲染
在Flutter界面渲染过程分为三个阶段：布局、绘制、合成，布局和绘制在Flutter框架中完成
合成则交由引擎负责。

在这里插入图片描述

傅晨明
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter 新一代图形渲染器 Impeller
jh1988abc的专栏
04-22 2874
flutter 为彻底解决着色器jank问题，决定重构着色器，新的渲染框架Impeller
Flutter正在被悄悄放弃？浅析Flutter的未来
m0_64420071的博客
07-26 1万+
不论是什么时代的开发技术，解决的问题无非就是性能，开发效率以及热更新。而这前两者Flutter已经接近完美解决了，至于热更新相信随着后面不断的更新迭代，会有越来越优秀的解决方案。
Flutter 内嵌原生组件 for android
06-22
Flutter 内嵌原生组件 for android Flutter 内嵌原生组件 for android 文档地址 https://blog.csdn.net/nicepainkiller/article/details/125403744 文档地址 https://blog.csdn.net/nicepainkiller/article/details/125403744 文档地址 https://blog.csdn.net/nicepainkiller/article/details/125403744
flutter框架的特性
np918的博客
07-25 420
快速开发 flutter的热重载可以使得我们更快捷方便的试验，重构UI，添加特性和修复不过。在仿真器、模拟器和ios、android硬件上体验亚秒级的重载，而不会丢失状态。 绚丽UI 通过flutter内建的漂亮的质感设计和Cupertino小工具、丰富的动画API，平滑的自燃滚动和平台感知，让用户感到满意。 响应式 通过flutter的现代响应式框架和丰富的平台布局和基础组件轻松构建的用户界面。...
Flutter（二）第一个Flutter应用
Sir的专栏
02-27 739
Flutter 中是通过 Widget 嵌套 Widget 的方式来构建UI和进行实践处理的，所以记住，Flutter 中万物皆为Widget一个 StatefulWidget 类会对应一个 State 类，State表示与其对应的 StatefulWidget 要维护的状态当State被改变时，可以手动调用其setState()方法通知Flutter 框架状态发生改变，Flutter 框架在收到消息后，会重新调用其build方法重新构建 widget 树，从而达到更新UI的目的。
flutter 简介 flutter 能为我们做什么
最新发布
半身风雪
06-29 7078
陆陆续续已经写了60多篇的flutter 的文章了，本篇文章就来说说我对flutter 的简单看法Flutter是一种由谷歌开发的开源用户界面（UI）工具包，用于在多个平台上构建高性能、美观和流畅的移动应用程序。它使用Dart编程语言，并提供丰富的UI组件和工具，可以快速构建现代化的应用程序界面。总的来说，Flutter具有跨平台、响应式UI、热重载、自绘引擎、丰富的UI组件、开发效率、强大的社区支持和优秀的性能等特点和优势，使开发人员能够更轻松、高效地构建漂亮、流畅和高性能的应用程序。
Flutter 安装教程 + 运行教程（附带SDK下载）
李小城的博客
03-07 1万+
Flutter - 极速构建漂亮的原生应用 Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。 快速开发 富有表现力和灵活的UI 原生性能 1. 工具和相关文档 1.1 相关工具 Windows 7 或更高系统...
Flutter 开发环境搭建——windows版
足各路
03-02 561
fullter 运行时报错
flutter安装终极教程
qq_43652113的博客
10-18 9974
flutter环境配置安装终极教程 环境安装流程 java环境 flutter sdk android SDK androidstudio dart sdk vscode 除了最后一个vscode是可选，其他几个是必须安装，缺一个都跑不起来。我们主要梳理一下下载安装这些东西中存在的坑。 一.java环境配置 ​ 我们第一步需要先配置java环境，没配的看看，看过的已经可以去下面了。 首先第一步下jdk，传送门：https://www.oracle.com/java/technologies/j
Flutter 与原生交互 - android版
03-29
原生与Flutter数据交互，主要就是构建好通道机制  Flutter 与原生交互使用Platform Channel。Flutter定义了三种不同类型的Channel，它们分别是： BasicMessageChannel：用于传递字符串和半结构化的信息（双向...
flutter与原生之间的channel交互
01-20
flutter与ios/swift、android/kotlin之间的message_channel、method_channel、event_channel交互，包括flutter调起android、ios原生界面
flutter 内嵌 IOS 原生界面
08-24
flutter 内嵌 IOS 原生界面 flutter 内嵌 IOS 原生界面 文档地址： https://johns.blog.csdn.net/article/details/125420308 文档地址： https://johns.blog.csdn.net/article/details/125420308
flutter_bluetooth:Flutter引发原生android蓝牙api
03-16
蓝牙 Flutter启动原生蓝牙api实现检测蓝牙状态和打开蓝牙 具体的代码分析请到学习 要是这份代码给你一些帮助，请给我一个Star，编写不易
fullter 常用方法
weixin_33912638的博客
08-13 985
为什么80%的码农都做不了架构师？>>> ...
[译]在 Flutter 中解析复杂的 JSON
weixin_34221112的博客
07-29 1441
原文地址：Parsing complex JSON in Flutter 原文作者：Poojã Bhaumik 译文出自：掘金翻译计划 本文永久链接：github.com/xitu/gold-m… 译者：DateBro 校对者：LeviDing 我必须承认，在 Flutter/Dart 中使用 JSON 后，我一直想念 gson 的 Android 世界。当我开始使用 Flutter 中...
Flutter简介
weixin_46046603的博客
03-26 6798
一、Flutter简介🔥 Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的，可以用一套代码同时构建Android和iOS应用，性能可以达到原生应用一样的性能。 一句话总结就是：Flutter是一个跨平台、高性能的移动UI框架 🔴跨平台 Flutter使用自己的高性能渲染引擎来绘制 Widget([ˈwɪdʒɪt])，这
Flutter框架详解
热门推荐
rd_w_csdn的博客
07-19 2万+
关于Flutter框架的原理与优劣，一文通透。
fullter 二次封装 下拉刷新 上拉加载更多
唐僧的专栏
12-23 1264
使用到的插件 pull_to_refresh | Flutter Packagea widget provided to the flutter scroll component drop-down refresh and pull up load.https://pub.flutter-io.cn/packages/pull_to_refresh #下拉刷新 pull_to_refresh: ^2.0.0 大致效果： 在这里我们对 pull_to_refresh 进行了两次..
Flutter Cupertino风格组件
hongxue8888的博客
07-09 5652
文章目录1. 概述2 CupertinoActivityIndicator组件3 CupertinoAlertDialog4 CupertinoButton5 Cupertino导航组件5.1 CupertinoTabScaffold5.2 CupertinoTabBar5.3 CupertinoTabView5.4 CupertinoPageScaffold5.5 CupertinoNaviga...
flutter集成原生sdk
05-31
Flutter 是一个跨平台的移动应用开发框架，它可以让开发者使用一套代码同时开发 iOS 和 Android 应用。而在某些情况下，我们可能需要集成原生 SDK 实现一些功能。本文将介绍如何在 Flutter 中集成原生 SDK。 首先，我们需要在 Flutter 中创建一个平台通道（Platform Channel）来实现 Flutter 和原生代码的通信。 1.创建一个平台通道 在 Flutter 中，平台通道定义了 Dart 代码和原生代码之间的通信方式。我们可以通过 MethodChannel、EventChannel 或 BasicMessageChannel 等方式来创建平台通道。 以 MethodChannel 为例，我们可以在 Flutter 中创建一个 MethodChannel： ``` final MethodChannel platformChannel = MethodChannel('com.example.platform_channel'); ``` 这里的 com.example.platform_channel 是一个字符串，用来标识 Flutter 和原生代码之间的通道。 2.在原生代码中实现方法 在原生代码中，我们需要实现与 Flutter 中定义的 MethodChannel 对应的方法。例如，我们可以在 Android 中创建一个名为 MyPlugin 的类来实现这个方法： ``` public class MyPlugin implements MethodCallHandler { private static final String CHANNEL = "com.example.platform_channel"; public static void registerWith(Registrar registrar) { final MethodChannel channel = new MethodChannel(registrar.messenger(), CHANNEL); channel.setMethodCallHandler(new MyPlugin()); } @Override public void onMethodCall(MethodCall call, Result result) { if (call.method.equals("getDeviceInfo")) { String deviceInfo = getDeviceInfo(); result.success(deviceInfo); } else { result.notImplemented(); } } private String getDeviceInfo() { // 获取设备信息的代码 return "device info"; } } ``` 这里的 getDeviceInfo 方法用来获取设备信息，并将结果返回给 Flutter。 3.在 Flutter 中调用方法 在 Flutter 中，我们可以通过 MethodChannel 来调用 MyPlugin 中实现的方法： ``` String deviceInfo = await platformChannel.invokeMethod('getDeviceInfo'); ``` 这里的 invokeMethod 方法用来调用 getDeviceInfo 方法，并将结果返回给 Flutter。 以上就是在 Flutter 中集成原生 SDK 的基本流程。在实际使用中，我们还需要注意一些细节，例如方法参数和返回值的类型转换等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值