在家学习(一):开箱Flutter特点与概念

病毒肆虐，收到国家命令在家待着！那么就学习新的知识吧！

为什么搞起来Flutter了？

其实做数据几年基本没有接触过Android，IOS类的开发。曾经也想过学习一下IOS，无奈没有MAC本，装了个虚拟机不好玩。Android的话不需要重新学习新的语言，但是其实也一直没有太多的机会去学习。因为大数据的技能其实也更新的比较快。

跟同事了解的Flutter（弗拉特，总是读成 弗撸特,更正一下）。大概了解一些就产生了兴趣。Flutter是谷歌开源的移动UI框架，可以快速的在IOS与Android上构建原生的用户界面。Flutter与之前兴起过的React Native有很大的区别。

而了解之后发现，Flutter完全能够实现我想要做的东西。目标存在，一切从零开始！

Flutter的几大特点

• 跨平台：Flutter当前至少能够跨5种平台。常用的Android，IOS，Windows，Linux，MacOS等。甚至可以提供嵌入式的开发。同时该语言又是谷歌新的操作系统Fuchsia应用的主要实现方式。
• 体验特性：使用Flutter内置的Material Design和Cupertino风格组件实现。为用户提供灵活的设计与流畅的体验，达到原生一样的性能。
• 响应式：Futter的相应框架与一系列的基础组件可以轻松实现用户界面的构建。包含2D、动画、手势、效果等解决UI的问题。
• 插件：通过Flutter能够轻松的访问本地的API，如相机、蓝牙、WIFI等。同时可以借助现有的Java、Swift、Object-C、C++代码实现原生系统的调用。
• 60fps高性能：Flutter的GPU高性能渲染技术可以编写高达60fps的应用。所以，Flutter同样可以实现游戏的编写。

Flutter的响应式框架、2D渲染、组件和开发工具有助于快速的设计、构建、测试和调试应用程序。Flutter的核心概念包括：组件、构建、状态、框架等。

学习之前，跟同事有个有趣的对话让我坚定了学下去的信念。

image

一切皆为组件

Flutter的核心概念是一切皆为组件。就好像是Java的一切都是对象。Flutter的组件(Widget)就是构建的基本块。按钮、图片、输入框、卡片等一系列的内容都可以作为Widget。其布局方式，动画处理等也是Widget。所以Flutter的统一模型就是组件(Widget)。

嵌套组件

一个复杂的界面通常是由一系列的组件嵌套在一起完成的。布局，定位，样式等等。那么嵌套组合的方式的好处就是能够实现解耦布局。 Flutter的核心即为组件，那么其他的所有一切都是继承自Widget而来。Widget之下又分为两大类组件，StatelessWidget与StatefulWidget。有状态组件与无状态组件。有状态组织是指界面会发生变化的组件，而无状态组件是指不会发生变化的组件。

构建组件

构建组件即为通过重写Widget的build方法来构建一个组件。构建Widget返回的就是Widget对象。不管是单个组件还是嵌套的组件。都是Widget实例。

用户交互

如果要基于用户的行为来对元素进行变更的话，那么该组件就是一个有状态的组件。例如用户点击后刷新页面，重新发起请求等。下拉刷新、下拉加载等都需要用到有状态组件。

这些Widget需要继承StatefulState，其子类则继承自State。每当改变一个State对象时，必须通过调用setState通知框架，那么框架就会通过再次调用State的构建方法来更新用户界面。

状态

Flutter的状态(State)是一个组件的UI数据模型,是组件渲染时的数据依据。Flutter的运行可以认为是一个巨大的状态机，而用户的操作行为、请求API或系统事件来触发状态机的响应。然后进行UI的渲染。

状态机的生命周期是Flutter中重要的一环，专门抽出一篇文章详细的来写吧。

分层框架

Flutter框架是一个分层的结构，每一层都在前一层之上。开发者可以使用自定义的方法来释放框架的更多能力。

分层框架

分层设计的目标就是使用更少的代码来提供更多的能力。当然如果我们的应用比较简单的话就不会涉及到底层的开发。如果我们需要更多系统级的操作的话，才会需要进行更底层的修改。

总结

由于没有过Android与IOS等开发经验，学习起来比较吃力。其实基本基础篇的东西理解起来可能比较复杂的就是Widget与State的状态

当然当前简单来看的话。可以说Widget组成了一切，State提供了界面变更，数据变更的能力。触发其变更的就是用户的各种行为、接口API和系统调用等触发setState进行状态机的状态变更。同时分层架构告诉我，除了能够实现简单的界面开发等之外，同样可以开放其底层能力。来释放Flutter更多的能力！