写给前端工程师的 Flutter 详细教程

时间:2020-03-08 来源:www.usadazhong.com

作者:hicc,Tencent CSIG前端开发工程师

前端工程师是最麻烦的,从jQuery到AngularJs,再到Vue和React。前端工程师也是最喜欢穿越屏幕的人,从phonegap到React Native,后者不是颤振。

画的是什么?

以低成本为用户带来更好的用户体验。

颤振可能是目前最好的。什么是“颤振”?

颤振是谷歌的用户界面工具包,用于从一个代码库中为移动、网络和桌面构建漂亮的、本地编译的应用程序。

颤振是从一个前谷歌浏览器团队成员演变而来的,他使用了谷歌浏览器2D渲染引擎,然后简化了CSS布局。

Fluth Architecture

或更详细的版本

Fluth在每个本机平台中使用自己的C引擎呈现界面,不使用网络视图,也不使用RN和NativeScript等系统组件。简而言之,这个平台只是为颤振提供了一个画布。

interface是用Dart语言开发的,这似乎是唯一支持JIT和AOT模式的强类型语言??

writing方法非常现代,声明性的,组件化的,组合继承的,响应性的.这是目前流行于前端处理所有平台的

代码集。

扑扑,为什么这么快?颤振相对于RN的优势是什么?

从结构上,我们实际上可以看出为什么旋舞速度很快,至少与以前流行的炸鸡反应原生相比。

Skia引擎、Chrome、Chrome操作系统、安卓、火狐、火狐操作系统都使用这个作为渲染引擎。

Dart语言可以被AOT编译成ARM代码,这使得布局和业务代码运行得最快。此外,飞镖的气相色谱作出了特殊的优化,频繁摧毁和创造的小部件的颤振。作为

CSS的一个子集,Flex like的布局保留了强大的性能和性能。

Flutter business编写的小部件在渲染之前将diff转换为渲染对象。是的,它就像React中的虚拟DOM一样,可以确保开发体验和性能。

与原生反应相比:

RN使用JavaScript运行业务代码,然后js Bridge调用平台相关组件,导致性能下降,甚至js引擎也因平台而异。

RN使用平台组件,行为的一致性会打折扣,或者开发人员需要处理更多与平台相关的问题。

在这里可以看到两者的具体性能测试。结论是颤振在CPU、FPS和内存稳定性方面优于反应性。

飞镖语言

在我们开始飞镖之前,我们需要了解飞镖语言.

DART是由谷歌开发的,最初的目的是作为一种JavaScript替代语言,但是在失败平息后,旋舞独特的开发语言复活了第二个春天。

事实上,即使在2.0版本中,Dart的语法也非常类似于JavaScriptFlutter。单线程,事件循环.

Dart eventloop model

当然,作为前端工程师的教程,我只想写一些目前在JavaScript中没有的东西,这在Dart中更省心和“甜蜜”。不能浮动的

strong类型,当然,前端现在有强大而方便的打字操作符号:

方便而安全的值。如果foo为,则该值可以缩写为

和其他符号的组合:级联表示法.)

连运算符

都可以重写。注意:重写,也需要重写Object getter

这在区分对象时特别有用。

more Dart 2.3的命名参数看一下这个优化。“扑”怎么写

Dart像JavaScript一样在一个独立的、单线程事件驱动的隔离环境中运行,但是Dart也可以创建其他隔离环境,充分利用中央处理器的能力。

当然,颤振封装了计算机,可以方便地使用,例如在其他隔离中解析大型json。这里提出的“Dart用户界面作为代码”的意义在于,从反应到颤动,到最新的苹果SwiftUI,安卓jetpackcomposite声明性组件的编写变得越来越流行。JSX被用在网络的前端,让开发者更容易写作,而颤振和SwiftUI直接从优化语言本身开始。

function class

big killer:Collection If和Collection For

more Dart 2.3的命名参数看一下这个优化。“扑”怎么写

最后,我说到重点了。如果您熟悉网络的前端和反应,您将非常熟悉以下主题。

用户界面=f(状态)

颤振应用程序从文件的主要功能开始:飞镖类构建方法返回一个小部件,在颤振中一切都是一个小部件,包括但不限于

结构元素、菜单、按钮和其他

样式的类元素。字体、颜色和其他

布局类元素、填充、边距和其他

小部件是Dart中的特殊类。通过实例化(在Dart中new是可选的),您的应用程序是一个组件树(Dart输入函数的概念)。

小部件是Dart中的特殊类。通过实例化(在Dart中new是可选的),您的应用程序是一个组件树(Dart输入函数的概念)。

小部件是Dart中的特殊类。通过实例化(在Dart中new是可选的),您的应用程序是一个组件树(Dart输入函数的概念)。

Flout Widget Tree Widget Layout

说Flout布局的想法来自于CSS,Flout中的一切都是一个小部件,所以整体布局也很简单:

Container

装饰容器组件的属性,设置背景色、背景图、边框、圆角、阴影和渐变

padding,center

padding,center

padding,center

padding,center

padding,center

padding,center

row,column,flex

wrap,flowflow layout

Stack, Z轴布局

更多可以在这里看到

颤振小部件可以分为三类,如“显示组件”、“容器组件”和“反应”中的“上下文”。

这是颤振中的“演示组件”。如果状态未保存,外部参数更改将被销毁并重新创建。颤振建议尽可能使用无状态组件。

这是颤振中的“演示组件”。如果状态未保存,外部参数更改将被销毁并重新创建。颤振建议尽可能使用无状态组件。

state组件类似于“反应”中的“容器组件”,而状态组件在颤振中的编写略有不同。

state组件类似于“反应”中的“容器组件”,而状态组件在颤振中的编写略有不同。

您可以看到,颤振直接使用与反应同名的方法,但是没有合并变量,当然还有生命周期。

颤振状态部件声明周期

可以看出一个状态部件需要两个类。写这篇文章的原因是,在Flutter中的小部件是不可变的,有状态组件的状态保存在state中,并且每次组件仍然被重新创建。小部件在这里只是对组件的描述。在渲染之前,抖动将不同于元素,然后不同于渲染对象。

扑动渲染对象

扑动小部件更多的渲染过程可以在这里看到。

事实上,小部件只是组件结构的描述。它还带来了这样的优势,即您可以更方便地制作一些主题组件。颤振公司提供的材料组件部件和库比蒂诺(iOS风格)部件的质量相当高。此外,随着颤振的亚秒热重载,开发经验可以说是相当好的。

可以轻松地管理组件中的数据,但是fluth中的状态也是从上到下流动的,所以它会遇到与React相同的问题。如果组件树太深,逐层创建状态是非常麻烦的,更不用说代码的可读性和可维护性了。

可以轻松地管理组件中的数据,但是fluth中的状态也是从上到下流动的,所以它会遇到与React相同的问题。如果组件树太深,逐层创建状态是非常麻烦的,更不用说代码的可读性和可维护性了。

Flumut也有同样的东西,那就是,它很容易使用。

Flumut也有同样的东西,那就是,它很容易使用。

具体的实现原理可以在这里找到,但是谷歌封装了一个更高级的库提供者,具体的用途可以在这里看到。

BlOC是另一种更先进的数据组织方法,由Flutter团队提出,这也是我最喜欢的方法。简而言之:

BlOC是另一种更先进的数据组织方法,由Flutter团队提出,这也是我最喜欢的方法。简而言之:

Bloc=继承的小部件RxDart(流)

DART语言有蒸汽,流~=可观察内置,与RXDART结合,然后添加将是一个极其强大和自由的模式。

当然,Bloc的问题是

学习成本稍高,必须彻底理解Rx概念,否则你会疯掉

自由带来的问题是代码可能不像Redux类那样规则。

顺便说一下,苹果今年采用了响应风格,组合(rxlike) swift用户界面基本上相当于Bloc。

因此,Rx仍然需要快速学习。

除了阻塞之外,在颤振中还可以使用其他的方案,例如:阿里自由鱼的

颤振Redux

Fishreux,据说它有很好的性能。当部署

……时,当前的前端开发使用强大的框架页面组装就不再困难。开发的难点在于如何组合丰富交互所需的数据,这是上图的一部分。

……时,当前的前端开发使用强大的框架页面组装就不再困难。开发的难点在于如何组合丰富交互所需的数据,这是上图的一部分。

更多可以在这里看到

"经验法则是:做任何不那么尴尬的事情。"

这里,主要部分已经完成,有了这些,我们已经可以开发一个好的应用了。把剩下的当成一笔奖金。

Test

颤振调试器,这些测试都是在舞台上进行的,使用起来并不困难。

包管理,资源管理

npm,Flutter,它类似于JavaScript,即Dart也有自己的包仓库。然而,项目包的依赖性使用yaml文件来描述:

life cycle

mobile应用程序总是需要应用程序级的生命周期。在fluth中使用生命周期挂钩也非常简单:

使用本机功能

类似于ReactNative,而fluth使用类似事件的机制来使用平台相关的功能。

颤振平台通道

颤振网,颤振桌面

这些仍在开发中。鉴于我对达特的热爱和对颤振性能的乐观,这些确实值得期待。

颤振网络体系结构

记住,该平台只为颤振提供一个画布,颤振桌面在未来有很多事情要做,相关信息可以在这里看到。

最后,每种方案、每种技术都有其优缺点,甚至技术的结构也决定了某些缺陷可能永远不会得到改善,所以

推荐阅读:

Servless:cloud function pony BI,将报告以高速移动到云中

现代C开发工具CLion从入门到精通

这是Git内部原理的真正揭示——Git!