揭开 Flutter 跨平台开源框架的神秘面纱

引言

Flutter 刚刚从 Google 刚刚推向 Android 市场的时候,我就开始对 Flutter 开始了学习之路;但由于当时 Flutter 许多东西尚未完善而没有推出稳定的版本,所以也就没有对其进行深入的学习,直到如今 Flutter重出江湖,在市场上也得到了蓬勃发展及许多业内大佬力推,我便又再次入坑 Flutter

实现 UI 和交互高级开发者必备技能,也是掌握 Flutter 开发重点;同样 Flutter 跨平台特性原生不能比拟的,更何况还有不弱的性能表现;而性能往往是由生命周期来决定的

何为 Flutter 的生命周期?

如果你是一名开发人员,那么你一定不会对生命周期感到陌生;当你在学习 Flutter 的时候,Flutter 也有自己的生命周期,只有通过了解 Flutter生命周期,才能知道应该在哪里来写业务逻辑

Flutter 生命周期

如上图所示,Flutter 生命周期大体上可以分为三个阶段: 初始化、状态变化、销毁;下面依次说明各个阶段的工作

初始化阶段(插入渲染树)

  • 对应执行构造方法和 initState

状态变化阶段(在渲染树中存在)

  • 开新的 widget 或者调用setState方法

销毁阶段(从渲染树种移除)

  • deactivate 和 dispose

如果之前你对 Flutter 有一点点了解的话,你会发现 Flutter 中有两个主要的 Widget: StatelessWidget(无状态)StatefulWidget(有状态)

StatelessWidget

  • 无状态组件是不可变的,这意味着它们的属性不能变化,所有的值都是最终的;可以理解为将外部传入的数据转化为界面展示的内容,只会渲染一次
  • 对于无状态组件生命周期只有 build 这个过程;无状态组件的构建方法通常只在三种情况下会被调用:小组件第一次被插入树中,小组件的父组件改变其配置,以及它所依赖的 InheritedWidget 发生变化时

StatefulWidget

  • 有状态组件持有的状态可能在 Widget 生命周期中发生变化,是定义交互逻辑和业务逻辑;可以理解为具有动态可交互的内容界面,会根据数据的变化进行多次渲染
实现一个 StatefulWidget 至少需要两个类:

一个是 StatefulWidget 类
另一个是 Sate 类

  • StatefulWidget 类本身是不可变的,但是 State 类Widget 生命周期中始终存在
  • StatefulWidget 将其可变状态存储在由 createState 方法创建的 State 对象中,或者存储在该 State 订阅的对象中

接下来看看 Fultter 的优势在哪里?

快速开发和迭代

Flutter 自身具有热修复(热重载)的功能,尽管有使用的限制,但是它依然能够为开发过程提供更高的效率;另外,Flutter SDK 还允许我们修复崩溃和继续从应用程序停止的地方进行调试

页面流畅、样式美观

对于不同的平台(Android和iOS)Flutter 提供了风格不同控件,以满足不同平台设计理念

提供原生性能

Flutter 提供了一种响应式视图,无须 JavaScript桥接;强大的 API 使得实现复杂的页面效果成为可能;高性能的渲染机制使得 120 FPS 的高频率 可以轻而易举的实现;当界面上的图片数量越来越多时,与 React Native 相比,Flutter的优势会越来越明显

灵活的跨平台开发

Flutter 可以单独作为开发框架完成整个 App 的开发,也可以与现有原生代码相结合实现 Hybrid 混合模式的开发

那 Flutter 需要学吗?

Flutter 抛弃了原生系统控件Webview,使用自研高性能渲染引擎来绘制 Widget,预先 (AOT) 编译,运行时直接执行 Native(arm) 代码Dart 代码执行(在 UI TaskRunner),图片下载 (IO TaskRunner),真正的渲染 (GPU TaskRunner) ,同平台的通信等 (Platform TaskRunner 即 Native 概念下的主线程)是互相隔离

针对布局等的化;布局计算时单次树走动即可完成;Relayout Boundary 机制:如果 Childsize固定的,那么不会因为 ChildRelayout 导致 Parent ReLayout布局优化,都让 Flutter 脱颖而出

如上所述 Flutter 于谷歌而言,这是他们重新整理 跨平台生态环境 决心的体现,Flutter 所展现的内容,也是谷歌想拓展和维护的方向;对于长期苦恼于 跨平台 选择的广大 Android 开发者 而言,Flutter 可谓是谷歌为我们提供的 指路明灯

目前开发速度,只要不出大的纰漏按部就班往前推进,在不久的将来Google 一定可以把 Flutter 平台打造得非常完美,届时又会改变移动开发技术格局

也许,Flutter 系列的部分库还没成熟到成为你工作的第一选择,但是,深入学习 Flutter 组件会为你日常的开发带来一些想法

总的来说,Flutter 对广大开发者而言是 利远远大于弊的

该如何去学习 Flutter?

在这分享一份整理了2个月的 Flutter 开源学习笔记,里面包括了这些年的工作经历及对网上的资料查询和整理,最终将其整合成了一份 PDF 文档给大家!为了不影响阅读,在这以图片展示部分内容截图,有需要的朋友,可以私信发送 “笔记” 即可 免费领取

内容展示如下:

Flutter 开源学习笔记目录

Dart 语法基础
  • Dart 语法详解
  • 编译原理
  • Dart 语言基础详解(变量、内置类型、函数、操作符、流程控制语句)
  • Flutter(Dart)基础——类的详解
  • Dart 初始化列表
  • Dart 的构造方法及属性(setter/getter)
  • Dart 构造方法
  • Dart 的工厂构造方法
  • Dart 之 Mixin 详解

Dart 语法进阶
  • Exception 类型
  • Error 类型
  • 异常抛出
  • 异常捕获
  • 泛型
  • 异步

完整版 Flutter 学习笔记 获取方式: 私信 发送 “笔记” 即可 免费获取
Flutter 3.0 之 UI
  • 列表和网格视图 Widget
  • 布局 Widget
  • AbsListView 常用属性和相关方法
  • 常用适配器介绍与使用
  • ListView 详细介绍与使用
  • GridView 详解与应用
  • GridView 主要使用方法
  • GridView 使用 Demo
  • 布局 Widget

Flutter 3.0 线程
  • Flutter 事件队列
  • 应用场景
  • 实现思路
  • 具体实现
  • async await 原理解析
  • Future Dart 的消息循环机制
  • 最常用的 async 和 await
  • Promise 对象的基本用法
  • Flutter 多线程

完整版 Flutter 学习笔记 获取方式: 私信 发送 “笔记” 即可 免费获取
Flutter 3.0 项目实战
  • Flutter 底部导航路由实现
  • 底部导航实现
  • Widget 属性说明
  • Page 存在重复创建的问题
  • Flutter 创建侧滑菜单
  • 个人中心制作
  • 简单个人中心
  • 商城会员中心
  • Flutter 实战 APP 入门及主页

Flutter 启动流程
  • Dart 虚拟机
  • Dart 虚拟机与 JVM 虚拟区别
  • Dart 虚拟机启动
  • Dart isolate 机制
  • Skia 引擎
  • Skia 引擎重要类简介
  • Skia 绘图概述 canvas
  • Flutter Activity 启动流程
  • Flutter 应用启动

完整版 Flutter 学习笔记 获取方式: 私信 发送 “笔记” 即可 免费获取

对于程序员来说,要学习的知识内容、技术有太多太多,要想不被环境淘汰就只有不断提升自己,从来都是我们去适应环境,而不是环境来适应我们

技术是无止境的,你需要对自己提交的每一行代码、使用的每一个工具负责,不断挖掘其底层原理,才能使自己的技术升华到更高的层面

最后祝各位开发者早日精通 Flutter ,攀登上更高的高峰

猜你喜欢

转载自blog.csdn.net/m0_70748845/article/details/126842527