flutter入门1——概念简介

简介

Flutter是Google开发的一个开源移动应用框架，用于构建高性能、高保真的跨平台应用。它使用Dart语言作为开发语言，具有许多独特的特点和优势。

特点

1. 跨平台性：Flutter支持Android和iOS两大主流移动平台，开发者可以使用同一套代码库来构建应用，大大减少了开发和维护的成本。
2. 高性能：Flutter使用自己的渲染引擎来绘制界面，而不是依赖原生系统的渲染机制。这使得它在性能上接近甚至超过原生应用。
3. 热重载：Flutter的热重载功能允许开发者在无需重新启动应用的情况下实时预览代码更改，极大地提高了开发效率。
4. 自定义UI：Flutter提供了丰富的widget和API，使得开发者可以轻松构建出富有表现力和灵活的设计。

能力

1. 响应式框架：Flutter的响应式框架使得应用界面能够根据不同的屏幕尺寸、分辨率和平台特性进行自适应。
2. 插件支持：通过Flutter的插件体系，开发者可以访问平台本地API，如相机、蓝牙、Wi-Fi等，实现更丰富的功能。
3. 动画和效果：Flutter提供了强大的动画和效果支持，使得应用界面更加生动和吸引人。

原理

Flutter的原理主要基于其自有的渲染引擎。它使用Dart语言编写的代码来构建应用的UI界面，并通过一套高效的渲染管道将其渲染到屏幕上。这种渲染方式不依赖于原生系统的渲染机制，因此可以实现跨平台的统一体验。

与其他混合app框架的对比：

与React Native、Ionic等其他混合app框架相比，Flutter在性能和跨平台一致性方面表现更出色。React Native虽然也支持跨平台开发，但其性能依赖于JavaScriptCore或Hermes等JavaScript引擎，而Flutter则使用自己的Dart VM和渲染引擎，因此在性能上有一定优势。此外，Flutter的widget系统使得其UI在不同平台上的表现更加一致，减少了因平台差异导致的UI不一致问题。

然而，Flutter也有其局限性。由于它使用自己的渲染引擎和widget系统，学习成本相对较高，对于习惯使用原生开发或React Native等框架的开发者来说可能需要一定的适应期。此外，虽然Flutter支持跨平台开发，但在某些特定场景下可能仍然需要原生开发的支持。

flutter 原理类似跨端“2D 游戏殷勤”

一块画布(SGL),使用Dart语言编写Framework制定的API,由Framework调用

Engine层实现绘制,Embedder层负责跨端运行和渲染。

我们知道rn和weex,也是原生渲染的,它们的性能高于webvieew。但同为原生渲染的,怎么会

慢于flutter呢?其实不是原生渲染慢,而是js和原生通信慢。

rn和weex都采用了独立的js引擎(iOS是jscore, Android是v8,最新版m开始在Android上搞自

己的js引擎Hermes),从js与dart的比较上,性能稍逊一筹。但这不是是主要问题,因为v8的jit不

是盖的,也是编译为原生代码解析的。性能上的主要问题是,rn、weex的js引擎和原生渲染层是

两个运行环境。

当js引擎联网获取到数据后,通知原生视图层更新界面时,有一个跨不境的通信折损。同样,当

用户在屏幕上操作原生视图层时,要给js引擎发送通知,也会产生这个通信折损。

不过这种性能差别,在大多数场景中,用户是感受不到的。比较影响的场景,是跟手式的js响应

操作绘制帧动画,或者说js连续操作界面元素方面,flutter折损更少

这个通信折损,其实普遍存在于所有逻辑和视图分离的相框架中,包括各家小程序也有这个问题

flutter 架构和渲染机制

Flutter的劣势

• 混合开发
• 热更新
• 内存占用
• 体积

查看文档的基本概念

• 一切皆是Widgets
• 多组件容器(Row、Column、Stack、Wrap)
• 单组件容器(Container、Padding、Center、Align)
• Futter组件的规律

Widgets

状态

stateful和stateless:实现Flutter app时,我们用用widgets来构建app的UI。这些widgets有两种

类型--stateful(有状态)和stateless(无状态)

stateless:当创建的widget不需要管理理任何形式的内部state时,则使用用StatelessWidget。

eg: Text

stateful:当创建一一个能随时间动态改变的widget,并且不不依赖于其初始化状态。eg:Image

注意:

1创建一个Stateful Widget需要两个类,分别继承自StateFulWidgeet和State;

2state对象包含了widget的state和widget的build()方法;

3当widget的state改变了的时候,当调用setState()方法时,相架就会去调用build方法重绘

widget;