Flutter框架性泛学习系列之一、Flutter框架概述与源码获取

文章目录

  • 概述
    • [PS : skia引擎](#PS : skia引擎)
    • flutter学习框架
    • [Flutter 架构层次结构](#Flutter 架构层次结构)
    • Flutter框架图
    • [PS Flutter源码获取](#PS Flutter源码获取)
      • [0 安装Git:](#0 安装Git:)
      • [1 克隆Flutter仓库:](#1 克隆Flutter仓库:)
      • [2 添加Flutter到环境变量:](#2 添加Flutter到环境变量:)
      • [3 运行flutter doctor:](#3 运行flutter doctor:)
      • [4 获取Flutter依赖:](#4 获取Flutter依赖:)

Flutter是一种跨平台的移动应用开发框架,它使用Dart语言编写,并且具有高性能和灵活的UI设计能力。Flutter的源码是开源的,可以在GitHub上找到。

任何知识体系,都需要系统的去学习,有一个大概的框架,学习才能如遇得水。知道自己学习的是什么,属于知识体系中的哪一环。
学习就应该首先有一个体系,然后不求甚解的将体系过一遍,最后再在体系中,填充各部分知识。

今天我就系统性的学习一下Flutter,并整理自己的笔记。无私奉献给各位。

概述

Flutter的源码结构非常庞大,包含了许多不同的模块和组件。其中,最核心的部分是Flutter引擎,它是一个用C++编写的底层渲染引擎,负责处理UI渲染、布局、绘制等任务。Flutter引擎使用Skia作为其绘图引擎,并且支持硬件加速。

PS : skia引擎

Skia是一个开源的2D图形引擎,由Google开发和维护。它被设计用于在各种平台上实现高性能的图形渲染,包括移动设备、桌面系统和嵌入式设备。Skia提供了一组跨平台的API,可以用于绘制文本、图形和图像等2D图形操作。 复制代码
以下是Skia的一些关键特性和用途:

1、跨平台支持: Skia可以在多种操作系统上运行,包括Android、iOS、Linux、macOS和Windows等。这使得开发者可以在不同平台上使用相同的绘图API,实现跨平台的图形渲染。

2、高性能: Skia被设计为高性能的图形引擎,具有优秀的渲染性能和效率。它采用了许多优化技术,包括GPU加速、多线程渲染和缓存等,以实现快速的图形绘制。

3、丰富的功能: Skia提供了丰富的图形绘制功能,包括路径绘制、文本渲染、图像处理、渐变和遮罩等。开发者可以利用这些功能创建各种各样的用户界面和图形效果。

4、开源: Skia是一个开源项目,其源代码托管在GitHub上。这使得开发者可以自由地查看、修改和分发Skia的源代码,从而满足他们的特定需求。

5、集成性: Skia可以轻松地集成到各种应用和框架中。它可以作为图形渲染引擎被直接使用,也可以与其他图形库和框架进行集成,如Flutter、Chromium和Chrome等。

6、移动设备支持: Skia在移动设备上有着广泛的应用,特别是在Android平台上。Android系统使用Skia来进行UI绘制和图形渲染,使得开发者可以利用Skia创建流畅且具有吸引力的用户界面。

总的来说,Skia是一个功能强大且高性能的2D图形引擎,适用于各种平台和应用场景。它为开发者提供了丰富的图形绘制功能,并且具有良好的跨平台支持和性能优势,使得它成为许多应用和框架的首选图形引擎之一。

这里不做展开详细了解,篇幅限制。

详细了解请移步 https://skia.org/

flutter学习框架

除了引擎之外,Flutter还包含了许多其他重要的模块,例如

框架层、渲染层、动画层、文本布局层等。这些模块共同协作,实现了Flutter的各种功能和特性。

如果你想深入了解Flutter的源码,可以从以下几个方面入手:

Flutter 架构层次结构

Flutter框架的整体层次结构涉及多个关键组件和层次。以下是Flutter框架的主要组成部分:

  1. 应用层(Application Layer):

    • 应用程序(Application): Flutter应用程序的顶层组件,定义了应用程序的入口点。
    • Widgets: 应用层构建UI的基本单元,负责创建、更新和销毁UI元素。Widgets分为有状态的StatefulWidget和无状态的StatelessWidget
  2. 框架层(Framework Layer):

    • 基础框架(Framework): 包含了Flutter框架的核心逻辑,用于处理布局、绘制和交互。
    • Element 树(Element Tree):RenderObjectRenderBox等元素组成的树形结构,用于描述应用程序的UI布局。
    • RenderObject 树(RenderObject Tree):RenderObject实例组成的树,负责处理UI元素的布局、绘制和合成。
  3. 引擎层(Engine Layer):

    • Skia 图形引擎: Flutter使用Skia作为其图形引擎,用于绘制UI元素。
    • 调度程序(Scheduler): 管理UI动画和帧的调度。
  4. 渲染层(Rendering Layer):

    • 渲染库(Rendering Library): 包括dart:ui库,提供了Flutter应用程序与底层图形引擎(Skia)交互的接口。
    • RenderBox: 渲染引擎中的基本渲染单元,负责布局和绘制。
  5. 服务层(Service Layer):

    • 平台通道(Platform Channels): 用于在Flutter和原生平台之间进行通信的机制。通过平台通道,Flutter可以调用原生代码,实现与设备功能的交互。
    • 引擎服务(Engine Services): 提供底层服务,例如内存管理、文件系统访问和异步任务处理。
  6. 插件层(Plugin Layer):

    • Flutter插件(Flutter Plugins): 允许Flutter应用程序与原生功能进行集成。插件层通过平台通道与原生代码通信,使得开发者可以使用原生功能,如相机、地理位置等。

以上是Flutter框架的主要层次结构,不同层次之间通过清晰的接口和协议进行交互。这种分层结构使得Flutter可以轻松地实现跨平台开发,同时保持高性能和灵活性。深入了解这些层次结构的工作原理,可以帮助你更好地理解和使用Flutter框架。

Flutter框架图

lua 复制代码
                         +---------------------+
                         |       应用层         |
                         |---------------------|
                         |      应用程序        |
                         |      Widgets        |
                         +---------------------+
                                  /       \
                                 /         \
                                /           \
                               /             \
+------------------------+                 +------------------------+
|         框架层           |                 |        引擎层         |
|------------------------|                 |------------------------|
|       基础框架           |                 |      Skia 图形引擎     |
|     Element 树          |                 |        调度程序        |
|  RenderObject 树        |                 +-----------------------+
+------------------------+                         |
                         |                         |
                         |                         |
+------------------------+                         |
|        渲染层           |                         |
|------------------------|                         |
|        渲染库           |                         |
|      RenderBox         |                         |
+------------------------+                         |
                         |                         |
+------------------------+                         |
|        服务层           |                         |
|------------------------|                         |
|       平台通道          |                         |
|      引擎服务           |                         |
+------------------------+-------------------------+
                         |
+------------------------+
|        插件层           |
|------------------------|
|      Flutter插件       |
+------------------------+

总之,Flutter的源码非常庞大和复杂,需要有一定的编程和计算机图形学的基础才能深入理解。如果你对某个具体的功能或模块感兴趣,可以在GitHub上查找相关的源码文件并进行研究。

PS Flutter源码获取

Flutter是一个开源的UI工具包,用于在移动、web和桌面平台上构建漂亮、原生性能的应用程序。Flutter的源代码托管在GitHub上。你可以通过以下步骤获取Flutter源码:

0 安装Git:

确保你的系统上已经安装了Git。你可以从Git官方网站下载并安装Git。

1 克隆Flutter仓库:

打开终端(命令行界面),执行以下命令来克隆Flutter仓库:

git clone https://github.com/flutter/flutter.git

2 添加Flutter到环境变量:

进入克隆的Flutter目录,然后将flutter/bin添加到你的系统环境变量中。在bash shell中,可以这样做:
export PATH="$PATH:pwd/flutter/bin"

你可能希望将上述命令添加到你的shell配置文件中,以便在每次启动终端时都生效。

3 运行flutter doctor:

在终端中运行以下命令,它将检查你的环境并提供安装所需依赖的说明。
flutter doctor

根据输出中的提示安装缺失的依赖项。

4 获取Flutter依赖:

在Flutter目录中运行以下命令以获取Flutter的依赖:
flutter packages get

现在,你已经成功获取了Flutter的源代码并设置好了开发环境。你可以在flutter目录下找到各种Flutter源码文件和目录,包括框架、引擎和工具等。请注意,Flutter的源代码可能会不断更新,因此你可以定期通过git pull命令来获取最新的更改。

请注意,以上步骤是获取Flutter源码的基本步骤,具体细节可能会根据Flutter的版本和你的操作系统而有所不同。你可以在Flutter的官方文档中找到更详细的安装说明。

相关推荐
小小洋洋12 分钟前
BLE MESH学习1-基于沁恒CH582学习
学习
Ace'1 小时前
每日一题&&学习笔记
笔记·学习
IM_DALLA1 小时前
【Verilog学习日常】—牛客网刷题—Verilog进阶挑战—VL25
学习·fpga开发·verilog学习
丶Darling.2 小时前
LeetCode Hot100 | Day1 | 二叉树:二叉树的直径
数据结构·c++·学习·算法·leetcode·二叉树
早起的年轻人3 小时前
Flutter String 按 ,。分割
flutter
z樾4 小时前
Github界面学习
学习
道爷我悟了4 小时前
Vue入门-指令学习-v-html
vue.js·学习·html
计算机学姐5 小时前
基于SpringBoot+Vue的在线投票系统
java·vue.js·spring boot·后端·学习·intellij-idea·mybatis
彤银浦6 小时前
python学习记录7
python·学习
少女忧6 小时前
51单片机学习第六课---B站UP主江协科技
科技·学习·51单片机