0
点赞
收藏
分享

微信扫一扫

Flutter简介,flutter消息推送

code_balance 2022-03-11 阅读 85
面试

通过这些SDK,你的应用可以与系统通信,以创建UI组件或访问系统相机。这些组件被渲染到手机屏幕,而相应的事件则被传回给组件。这个架构足够简单,但你仍然不得不为每个平台开发单独的App,因为这些系统组件都是不一样的,更不用提开发语言的不同了。

WebView

第一个跨平台的框架基于JavaScript 和 WebView,例如 Titanium和一系列相关的框架:PhoneGap, Apache Cordova, Ionic等,在苹果发布iOS之前,他们鼓励第三方开发者为iPhone构建网页应用程序,因此使用Web技术构建跨平台应用程序是顺理成章的一步。

这里写图片描述

你的应用程序可以创建HTML并将其显示在平台的WebViews上,请注意像JavaScript这样的语言很难直接与本地代码(例如服务)进行通信,因此他们会通过一个在JavaScript代码和原生代码的“桥梁”进行上下文切换,因为平台服务通常不会经常被调用,所以这并不会导致太大的性能问题。

响应式视图

像ReactJS或其他的响应式编程框架已经变得很流行了,主要是因为他们通过使用从响应式编程中借用的编程模式来简化Web视图的创建过程。2015年, React Native将响应式视图的许多优势带给了移动应用程序。

这里写图片描述

React Native是非常受欢迎的(这是它应得的),但是因为JavaScript访问了原生UI组件,所以它也必须经过这些“桥接器”,界面上的UI控件通常被频繁地访问(在动画、转化或者用户用手指“滑动”屏幕上的某些东西时,每秒被访问高达60次),因此这很可能会导致性能问题。

正如关于React Native的一篇文章所说:

和React Native一样,Flutter也提供响应式的视图,Flutter采用不同的方法避免由JavaScript桥接器引起的性能问题,即用名为Dart的程序语言来编译。Dart是用预编译的方式编译多个平台的原生代码,这允许Flutter直接与平台通信,而不需要通过执行上下文切换的JavaScript桥接器。编译为原生代码也可以加快应用程序的启动时间。

实际上,Flutter是唯一提供响应式视图而不需要JavaScript桥接器的移动SDK,这就足以让Fluttter变得有趣而值得一试,但Flutter还有一些革命性的东西,即它是如何实现UI组件的?

组件(Widgets)

Widgets是影响和控制应用程序的视图和界面的元素,说这些组件是移动应用中最重要的部分之一,这并不夸张,事实上,UI表现如何,可以成就或毁掉一款App。

  • Widgets的外观和给人的感觉是至关重要的,Widgets需要看起来不错,包 括各种屏幕的尺寸,也需要有自然的感觉。

  • Widgets必须快速执行:创建或扩展UI控件(实例化他们的Widgets),将其放在屏幕上,渲染他们,或者(尤其是)将其动画化。

  • 对现代的应用程序来说,Widgets应该是可扩展和可定制的,开发人员希望能够添加讨人喜欢的新的UI组件,并自定义所有Widgets以匹配各种品牌的应有程序。

Flutter的系统架构包含大量赏心悦目、快速、可定制、可扩展的Widgets。没错,Flutter不需要使用系统UI组件(或DOM WebViews),它自带了Widgets。

这里写图片描述

Flutter是什么?

Flutter移动应用程序SDK是为开发人员提供一种创建快捷、美观的应用程序的新方式,从而摆脱过去那种千篇一律的app,尝试过Flutter的人都会真的爱上它;例如,这位开发者,这位,或者这位,或者由第三方编辑的一系列文章和视频。

与任何新系统一样,用户想知道Flutter有什么与众不同之处,“Flutter有什么新的或者令人兴奋的东西吗?”,这是一个合理的问题,本文将从技术的角度回答Flutter有什么东西让人兴奋,而且给出它为什么让人兴奋的原因。

但首先,先讲一小段历史。

移动开发的简史

移动开发是一个较新的领域,开发者们开始涉足移动开发时间尚不足十年,所以移动开发的工具仍然在发展当中,这并不奇怪。

OEM SDKs

苹果的iOS SDKs发布于2008年,谷歌的Android软件开发工具包发布于2009年,这两种工具包基于不同的编程语言,分别是Objective-C和Java。

通过这些SDK,你的应用可以与系统通信,以创建UI组件或访问系统相机。这些组件被渲染到手机屏幕,而相应的事件则被传回给组件。这个架构足够简单,但你仍然不得不为每个平台开发单独的App,因为这些系统组件都是不一样的,更不用提开发语言的不同了。

WebView

第一个跨平台的框架基于JavaScript 和 WebView,例如 Titanium和一系列相关的框架:PhoneGap, Apache Cordova, Ionic等,在苹果发布iOS之前,他们鼓励第三方开发者为iPhone构建网页应用程序,因此使用Web技术构建跨平台应用程序是顺理成章的一步。

你的应用程序可以创建HTML并将其显示在平台的WebViews上,请注意像JavaScript这样的语言很难直接与本地代码(例如服务)进行通信,因此他们会通过一个在JavaScript代码和原生代码的“桥梁”进行上下文切换,因为平台服务通常不会经常被调用,所以这并不会导致太大的性能问题。

响应式视图

像ReactJS或其他的响应式编程框架已经变得很流行了,主要是因为他们通过使用从响应式编程中借用的编程模式来简化Web视图的创建过程。2015年, React Native将响应式视图的许多优势带给了移动应用程序

React Native是非常受欢迎的(这是它应得的),但是因为JavaScript访问了原生UI组件,所以它也必须经过这些“桥接器”,界面上的UI控件通常被频繁地访问(在动画、转化或者用户用手指“滑动”屏幕上的某些东西时,每秒被访问高达60次),因此这很可能会导致性能问题。

正如关于React Native的一篇文章所说:

这是理解React Native性能的其中一个关键,JS代码和原生代码本身都是很快的,瓶颈经常发生在当我们视图从一边转向另一边时。未来构建高质量的应用程序时,我们必须将使用桥接的次数控制到最小。

Flutter

和React Native一样,Flutter也提供响应式的视图,Flutter采用不同的方法避免由JavaScript桥接器引起的性能问题,即用名为Dart的程序语言来编译。Dart是用预编译的方式编译多个平台的原生代码,这允许Flutter直接与平台通信,而不需要通过执行上下文切换的JavaScript桥接器。编译为原生代码也可以加快应用程序的启动时间。

实际上,Flutter是唯一提供响应式视图而不需要JavaScript桥接器的移动SDK,这就足以让Fluttter变得有趣而值得一试,但Flutter还有一些革命性的东西,即它是如何实现UI组件的?

组件(Widgets)

Widgets是影响和控制应用程序的视图和界面的元素,说这些组件是移动应用中最重要的部分之一,这并不夸张,事实上,UI表现如何,可以成就或毁掉一款App。

Widgets的外观和给人的感觉是至关重要的,Widgets需要看起来不错,包 括各种屏幕的尺寸,也需要有自然的感觉。

Widgets必须快速执行:创建或扩展UI控件(实例化他们的Widgets),将其放在屏幕上,渲染他们,或者(尤其是)将其动画化。

对现代的应用程序来说,Widgets应该是可扩展和可定制的,开发人员希望能够添加讨人喜欢的新的UI组件,并自定义所有Widgets以匹配各种品牌的应有程序。

Flutter的系统架构包含大量赏心悦目、快速、可定制、可扩展的Widgets。没错,Flutter不需要使用系统UI组件(或DOM WebViews),它自带了Widgets。

Flutter将UI组件和渲染器从平台移动到应用程序中,这使得它们可以自定义和可扩展。Flutter唯一要求系统提供的是canvas,以便定制的UI组件可以出现在设备的屏幕上,以及访问事件(触摸,定时器等)和服务(位置、相机等)。

Dart程序(绿色)和执行数据编码和解码的原生平台代码(蓝色,适用于iOS或Android)之间仍然有一个接口,但这能比JavaScript桥接器快几个数量级。

将UI组件和渲染器移动到应用程序中确实会影响应用程序的大小。Android上的Flutter应用程序的的初始大小约为6.7M,这与类似的工具构建的最小应用程序的大小相似,您可以决定Flutter的优势是否值得权衡,因此本文的余下部分将讨论这些优势。

布局

Flutter最大的改进之一就是它的布局,布局是基于一组规则(也称约束)来决定UI组件的大小和位置。

传统上,布局使用大量可以应用于任何UI组件的规则。这些规则实现多种布局方法,我们就以众所周知的CSS布局为例(尽管Android和iOS中的布局基本相似)。CSS具有适用于HTML元素(UI组件)的属性(规则), CSS3定义了375个属性。

CSS包含大量的布局模型,如多种箱模型、浮动元素、表、多列文本、分页媒介等。还有像flexbox 和 grid的布局模型在之后也被添加进去,因为开发人员和设计人员需要对布局进行更多地控制,而不得不使用表格和透明图像来获取他们想要的布局。在传统布局中,开发人员无法添加新的布局模型,因此必须将flexbox 和 grid添加到CSS中并在所有浏览器上实现。

传统布局的另一个问题是规则可以相互影响甚至发生冲突,通常有几十种规则元素的规则应用于他们,这使得布局变慢。更糟糕的是,布局性能通常为指数性下降,因此,随着元件数量的增加,布局变慢得更快。

Flutter最开始是Google Chrome浏览器小组成员进行的实验项目,我们想看看如果我们忽略了传统的布局模式,是否可以构建更快的渲染器。几周后,我们在性能上取得了显著增长,我们发现:

  • 大多数的布局是相对简单的,例如:滚动页面上的文本,其大小和位置只取决于显示大小的固定矩形,还有一些表格,浮动元素等。

  • 大部分布局只作用于UI组件树的一部分,并且这子树通常使用一个布局模型,因此这些UI组件只需要少量的规则。

我们意识到如果完全改变以前的布局模式,布局就可以大大被简化:

  • 每个UI组件都将指定自己简单的布局模型,而不是拥有可以应用于任何UI组件的一整套布局规则。

  • 因为每个UI组件都有一个更小的一套布局需要考虑,所以布局可以大量优化。

  • 为了进一步简化布局,我们几乎将所有内容都转换为UI组件。

这里是用Flutter代码来创建的一个带有布局的简单UI组件。

new Center (

child: new Column(

children:[

new Text (‘Hello, World!’)),

new Icon (Icons.star, color: Colors.green)

]

)

这段代码在语义上足够清晰。你可以轻松地想象它将会生成什么。运行这段代码的显示结果如下:

Hello, World!

在这段代码中,所有的组成部分都是一个UI组件,包括布局。 Center UI组件将其子组件集中在其母组件内(如屏幕)。ColumnUI组件垂直排列其子组件(UI组件列表)。该列表包含一个Text和一个Icon控件(具有一个颜色属性)。

在Flutter中,居中显示和padding都是widgets,主题是适用于它们子组件的UI控件,甚至应用程序和导航也是widgets。

Flutter包括很多用于布局的widgets,不仅仅含有列,还包括行、网格、列表等。 此外,Flutter还有一个独特的布局模型,我们称之为用于滚动的“长条布局模型 (sliver layout model)”。Flutter中的布局非常快,可用于滚动。试想一下,滚动必须如此快速平滑,以至于让用户感觉当他们在物理屏幕上拖动时,屏幕图像就像和他们的手指相连一样。

学习分享

在当下这个信息共享的时代,很多资源都可以在网络上找到,只取决于你愿不愿意找或是找的方法对不对了

很多朋友不是没有资料,大多都是有几十上百个G,但是杂乱无章,不知道怎么看从哪看起,甚至是看后就忘

如果大家觉得自己在网上找的资料非常杂乱、不成体系的话,我也分享一套给大家,比较系统,我平常自己也会经常研读。

2020最新上万页的大厂面试真题

七大模块学习资料:如NDK模块开发、Android框架体系架构…

只有系统,有方向的学习,才能在段时间内迅速提高自己的技术。

七大模块学习资料:如NDK模块开发、Android框架体系架构…

[外链图片转存中…(img-ZCoCPiyl-1646394612601)]

只有系统,有方向的学习,才能在段时间内迅速提高自己的技术。

举报

相关推荐

0 条评论