1.Flutter 简介与架构原理

📑 目录

1. Flutter 简介

Flutter 是 Google 推出的一款跨平台 UI 框架 ，使用 Dart 语言开发，一套代码可以运行在：

Android
iOS
Web
Windows
macOS
Linux

核心特点：

🔥 Hot Reload 热重载
🚀 AOT 原生执行性能
🎨 像素级一致的跨平台 UI（不依赖原生控件）
🧩 一切皆 Widget

Flutter 与其他跨平台框架（如 React Native、Xamarin）最大的区别是：

Flutter 不使用系统原生控件，而是完全自己绘制 UI（Self-Rendering）。

2. Flutter 三层架构

Flutter 采用"三层结构"设计：

复制代码

+--------------------------+
|     Framework 层 (Dart)  |
+--------------------------+
|       Engine 层 (C++)    |
+--------------------------+
|     Embedder 层 (平台)   |
+--------------------------+

2.1 Framework 层（Dart）

由 Dart 编写，开发者主要接触的部分，包含：

Widgets 系统
手势、动画
Element 树 & RenderObject 树
Material / Cupertino UI 体系

核心思想：

Everything is a Widget（一切皆组件）
Widget → Element → RenderObject 三棵树协同工作

包含三大关键抽象：

概念	作用
Widget	声明 UI（不可变）
Element	管理 Widget 生命周期
RenderObject	布局、绘制、渲染

2.2 Engine 层（C++）

Flutter 性能的核心，主要包括：

Skia 渲染引擎
Dart 运行时（JIT + AOT）
文本渲染（HarfBuzz + FreeType）
新一代渲染：Impeller（iOS）

Flutter 通过 dart:ui 将 Engine 能力暴露给 Framework 层。

2.3 Embedder 层（平台特定实现）

负责与系统沟通：

创建窗口（Android Activity，iOS UIViewController）
OpenGL / Metal / Vulkan 与 GPU 交互
输入事件
原生插件（Platform Channels）

不同平台用不同语言：

平台	实现语言
Android	Kotlin / Java
iOS	Swift / Objective-C
Windows	C++
Web	JavaScript

3. Dart 与 Flutter 的关系

Flutter 只能用 Dart 开发（没有 Java、Swift、JS UI 代码）。

特性	说明
JIT	开发阶段，支持 Hot Reload
AOT	发布阶段编译为原生机器码
异步模型	单线程事件循环，async/await
类型系统	强类型、空安全、面向对象+函数式

Dart 的目标：

让 Flutter 有"快速开发 + 原生性能"。

4. Skia 渲染引擎原理

Flutter 不使用平台控件，而是自己画 UI，流程如下：

✔（1）构建三棵树

Widget Tree
Element Tree
RenderObject Tree

✔（2）布局 Layout

分析约束（constraints） → 计算大小 → 布局子节点

✔（3）绘制 Paint

RenderObject 生成绘制指令（Picture）

✔（4）光栅化 Rasterization

Engine 将 Picture 交给 Skia
Skia 调用 GPU 绘制像素

✔（5）合成 Compositing

多个 Layer 组成 Scene → 显示到屏幕

正是因为完全掌控渲染，Flutter 才能实现所有平台的 UI 100% 一致。

5. Flutter 可用性 Demo（跨平台计数器）

📌 示例代码（可直接运行）

复制代码

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter 计数器示例'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '你已经点击了这么多次按钮：',
              style: TextStyle(fontSize: 20),
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}

🔧 运行方法

复制代码

flutter run

运行在不同平台：

复制代码

flutter run -d chrome     # Web
flutter run -d windows    # Windows 桌面
flutter run -d macos      # macOS
flutter run -d linux      # Linux
flutter run -d android    # Android
flutter run -d ios        # iOS