编辑
2024-12-31
前端
00
请注意,本文编写于 130 天前,最后修改于 127 天前,其中某些信息可能已经过时。

目录

1. Platform Runner Thread
2. UI Runner Thread
3. GPU Runner Thread
4. IO Runner Thread
5. Isolate 与线程模型
6. 最佳实践
参考文章
Dart线程模型
1. Dart深入剖析:揭秘其多线程模型的架构与实现
2. 深入了解Flutter的isolate(3) --- Flutter的thread model(线程模型)
3. 详细介绍Dart的线程管理及框架及代码示例
4. Dart线程模型介绍
5. 剖析Dart语言的多线程模型,在Flutter中书写并发代码
6. 深入解析Dart单线程模型和Flutter的奥妙
7. Dart与消息循环机制[翻译]
flutter底层原理
1. Flutter 工作原理 - AtlasLapetos - 博客园
2. Flutter原理简介 - awanglilong - 博客园
3. Flutter框架渲染流程与使用 - 滴水微澜 - 博客园
4. 你必须了解的Flutter原理 | 西蒙的实验室
5. Flutter学习总结(六)渲染机制 - CSDN博客
6. Flutter底层架构初探 - CSDN博客
flutter项目结构
1. Flutter项目合理的目录架构 - CSDN博客
2. Flutter 项目架构大揭秘:最佳实践与路由管理 - CSDN博客
3. flutter教程01 flutter项目的目录结构 - CSDN博客
4. flutter 项目结构 - sqmw - 博客园
5. Flutter 项目结构 初始项目 分析 - 牛客网
6. 【Flutter】基础入门:项目结构 - CSDN博客
weight讲解
1. 深度理解Flutter:有状态Widget与无状态Widget的详细对比 - CSDN博客
2. Flutter 小技巧之为什么推荐 Widget 使用 const - GitBook
3. Flutter组件 StatefulWidget、StatelessWidget 可继承写法 - CSDN博客
4. Flutter - Stateful(有状态) 和 stateless(无状态) widgets - 博客园
5. Flutter 的 Widget,刻意加上 const,真的值得吗? - 掘金
6. Flutter初识(5):Widget详解 - 博客园
7. Flutter之StatelessWidget和StatefulWidget区别及使用详解 - CSDN博客
8. Flutter 教程第一章:深入理解 Flutter Widget - CSDN博客
9. flutter —— 深入理解 StatelessWidget 与 StatefulWidget 的 build 构建 - 博客园
10. flutter填坑之旅(widget原理篇) - 博客园
生命周期
StatefulWidget 生命周期概述
1. 初始化阶段
1.1 createState
2. 依赖变更阶段
2.1 didChangeDependencies
3. 构建阶段
3.1 build
4. 更新阶段
4.1 didUpdateWidget
5. 销毁阶段
5.1 deactivate
6. 其他生命周期方法
6.1 reassemble
总结
参考文章
混合开发
1. Flutter 混合开发基础 - 网易云信 - 博客园
2. Flutter 混合开发 ( 关联 Android 工程与 Flutter ... - CSDN博客
3. 手把手 Flutter 混合开发 -- 基于 FlutterBoost 实现 - 简书
4. Flutter与原生混合开发 - 不停奔跑的蜗牛 - 博客园
5. Flutter 核心原理与混合开发模式 - CSDN博客
6. Flutter 混合开发集成步骤 - 腾讯云
7. Flutter跨平台Hybrid实践 - 机器之心
8. Flutter中的Hybrid Coding详解 | Ejin66
9. Flutter 核心原理与混合开发模式 - 教程文章 - 时代Java
10. Flutter 混合开发基础 - 网易云信 - 博客园
setState发生了啥
1. Flutter的setState原理详解 - CSDN博客
2. Flutter中setState原理及更新机制 - 掘金
3. Flutter-探索setState原理流程 - CSDN博客
4. 深入理解setState更新机制 - Gityuan博客
5. setState:Flutter中有状态组件的更新机制详解 - ByteZoneX社区
6. Flutter的setState更新原理和流程 - CSDN博客
7. flutter的setState详细分析以及性能优化 - CSDN博客
8. Flutter的setState更新原理和流程 - 王橙艺 - 博客园
9. Flutter的状态管理:setState、Provider、Bloc的使用详解 - 阿里云开发者社区
10. flutter setState机制 - 简书
动画
1. 【Flutter 实战】17篇动画系列文章带你走进自定义动画
2. 教程(动画&过渡) - AtlasLapetos
3. Flutter动画 1 - 实现一个最简单的动画
4. 学习笔记-Flutter 动画详解(一)
5. 【Flutter】Animation 动画 ( Flutter 动画基本流程)
6. 史上最详细Flutter 动画讲解
7. 极简实现酷炫动效:Flutter隐式动画指南第三篇
8. 动画 | Flutter 中文文档
9. Flutter学习记录——20.动画的使用
10. 教程:Flutter中的动画 - Flutter中文网
Scaffold讲解
1. Flutter 中的 Scaffold 小部件:全面指南
2. Flutter入门(13):Flutter 组件之 Scaffold 详解
3. Flutter中的Scaffold组件 - CSDN博客
4. Flutter——最详细(Scaffold)使用教程
5. Flutter容器(6):页面骨架(Scaffold)
6. 5.7 页面骨架(Scaffold) | 《Flutter实战·第二版》
7. Flutter入门进阶之旅(十六)Scaffold 脚手架
8. Scaffold class - material library - Dart API - Flutter
9. 16 Scaffold脚手架 - 《Flutter 入门到实践》
10. Flutter深入浅出组件篇---Scaffold
PageView
1. Flutter 中的 PageView 控件:全面指南
2. Flutter组件————PageView
3. PageView学习
4. 深入了解 Flutter 中的 PageView(含自定义特效)
5. Flutter PageView 组件用法详解
6. Flutter可滚动组件(5):PageView与页面缓存
7. 【Flutter】StatefulWidget 组件 ( PageView 组件 )
8. Flutter 中 PageView 的使用详解 | Flutter Widgets
9. flutter PageView的使用
10. 简单封装分页功能pageView.js
FutureBuilder
1. Flutter 中的 FutureBuilder 小部件:全面指南
2. 深入理解 Flutter 中的 FutureBuilder
3. Flutter FutureBuilder 的使用以及防止不必要重绘
4. Flutter 控件 FutureBuilder 控件详解
5. Flutter 异步编程 Future 与 FutureBuilder 的实用技巧
6. 在 Flutter 中展现 FutureBuilder 的强大功能
7. Flutter 进阶教程——http 请求和 FutureBuilder
8. Flutter FutureBuilder 异步 UI 神器

1. Platform Runner Thread

  • 职责:Platform Runner 运行在平台的主线程(如 Android 的 Main Thread 或 iOS 的 Main Thread),负责处理 Flutter Engine 的代码和 Native Plugin 任务。它与平台的交互(如系统消息、插件调用)必须在此线程上执行。
  • 特点:虽然阻塞 Platform Runner 不会直接导致 Flutter 页面卡顿,但会影响原生平台任务的执行,甚至可能触发系统 Watchdog 强制终止应用。
  • 注意事项:避免在此线程执行耗时操作,如网络请求或复杂计算,以确保原生平台的流畅性。

2. UI Runner Thread

  • 职责:UI Runner 负责执行 Dart 的 Root Isolate 代码,处理 UI 渲染逻辑(如 Widget 树的构建、布局和 Layer Tree 的生成),以及处理来自 Native Plugins 的消息和异步任务。
  • 特点:Root Isolate 运行在 UI Runner 上,所有 Dart 代码默认在此线程执行。阻塞此线程会直接导致界面卡顿和掉帧。
  • 注意事项:避免在 UI Runner 中执行高 CPU 计算或耗时操作,可以通过创建新的 Isolate 来分担任务。

3. GPU Runner Thread

  • 职责:GPU Runner 负责将 UI Runner 生成的 Layer Tree 转换为平台可执行的 GPU 指令,并管理 GPU 资源(如 Framebuffer、Texture 等)。
  • 特点:GPU Runner 与 UI Runner 运行在不同的线程,通过调度机制确保 GPU 任务不会过载。阻塞此线程会导致渲染延迟和卡顿。
  • 注意事项:避免在 GPU Runner 中执行耗时操作,如复杂的图片处理或数据解压。

4. IO Runner Thread

  • 职责:IO Runner 负责处理 I/O 操作,如从磁盘读取图片数据、解压缩图片格式,并将其转换为 GPU 可处理的格式。
  • 特点:IO Runner 的任务通常不会直接阻塞 UI 或 GPU Runner,但加载资源的延迟可能间接影响性能。
  • 注意事项:建议为 IO Runner 创建专用线程,以优化资源加载性能。

5. Isolate 与线程模型

  • Isolate 机制:Isolate 是 Dart 的并发模型,拥有独立的内存和事件循环。Root Isolate 运行在 UI Runner 上,而其他 Isolate 可以用于执行耗时任务,避免阻塞 UI Runner。
  • 通信方式:Isolate 之间通过 Port 进行异步消息传递,确保线程安全。
  • 应用场景:适合处理高 CPU 计算、网络请求、文件读写等耗时任务。

6. 最佳实践

  • 优化 UI Runner:减少不必要的 Widget 重建,使用 Consumer 实现局部更新,避免复杂计算。
  • 优化 GPU Runner:减少页面层级,避免使用 SaveLayer 等离屏渲染 API,使用 RepaintBoundary 包裹频繁刷新的控件。
  • 合理使用 Isolate:将耗时任务(如计算、编解码)放入新的 Isolate 中执行,保持 UI Runner 的响应性。

参考文章

  1. Flutter的线程模型 - CSDN博客
  2. 深入了解Flutter的isolate(3) --- Flutter的thread model(线程模型)
  3. 聊一聊Flutter Engine线程管理与Dart Isolate机制 - 阿里云
  4. Flutter 的线程模型和异步原理 - CSDN博客

Dart线程模型


1. Dart深入剖析:揭秘其多线程模型的架构与实现

  • 内容概述:详细解析了 Dart 的多线程模型,包括内存管理(垃圾回收机制)和并发执行(Futures 和 Isolates)的实现原理。
  • 亮点:深入探讨了 Dart 的事件循环机制,以及如何通过 Futures 和 Isolates 实现异步编程和并发任务。
  • 链接Dart深入剖析:揭秘其多线程模型的架构与实现

2. 深入了解Flutter的isolate(3) --- Flutter的thread model(线程模型)


3. 详细介绍Dart的线程管理及框架及代码示例

  • 内容概述:介绍了 Dart 的线程管理机制,包括 Isolates 和 Observers 的使用方法,并提供了代码示例。
  • 亮点:通过示例代码演示了如何在 Dart 中创建和管理 Isolates,以及如何实现异步编程。
  • 链接详细介绍Dart的线程管理及框架及代码示例

4. Dart线程模型介绍

  • 内容概述:从内存管理和并发执行两个方面,介绍了 Dart 的线程模型,并探讨了其异步编程的实现方式(如 Future 和 Stream)。
  • 亮点:结合代码示例,详细说明了如何在 Dart 中实现异步编程和多线程任务。
  • 链接Dart线程模型介绍

5. 剖析Dart语言的多线程模型,在Flutter中书写并发代码


6. 深入解析Dart单线程模型和Flutter的奥妙

  • 内容概述:从单线程模型的角度,分析了 Dart 和 Flutter 的设计理念及其优势与局限性。
  • 亮点:探讨了 Dart 单线程模型在 Flutter 中的应用,以及如何通过异步编程提升性能。
  • 链接深入解析Dart单线程模型和Flutter的奥妙

7. Dart与消息循环机制[翻译]

  • 内容概述:介绍了 Dart 的消息循环机制,包括事件队列和微任务队列的工作原理,以及如何通过 Future 和 scheduleMicrotask 调度任务。
  • 亮点:通过流程图和代码示例,详细说明了 Dart 事件循环的执行顺序。
  • 链接Dart与消息循环机制[翻译]

flutter底层原理

1. Flutter 工作原理 - AtlasLapetos - 博客园

  • 内容概述:详细解析了 Flutter 的工作原理,包括 widget 的积极组合性、次线性布局算法、widget 构建和渲染树的优化机制。
  • 亮点:深入探讨了 Flutter 如何通过高效的算法和优化措施支持大量 widget 的高性能渲染。
  • 链接: Flutter 工作原理 - AtlasLapetos - 博客园

2. Flutter原理简介 - awanglilong - 博客园

  • 内容概述:从图像显示的基本原理出发,解析了 Flutter 的渲染机制,包括 Skia 引擎的作用、Dart 语言的选择以及 Flutter 的架构设计。
  • 亮点:结合示意图,详细说明了 Flutter 的绘制原理和分层架构。
  • 链接: Flutter原理简介 - awanglilong - 博客园

3. Flutter框架渲染流程与使用 - 滴水微澜 - 博客园

  • 内容概述:介绍了 Flutter 的渲染流程,包括 GPU 的 VSync 信号同步、图层树的合成、Skia 引擎的渲染以及双重缓存和 VSync 的作用。
  • 亮点:对比了 Flutter 与 React Native 的渲染机制,突出了 Flutter 的渲染闭环优势。
  • 链接: Flutter框架渲染流程与使用 - 滴水微澜 - 博客园

4. 你必须了解的Flutter原理 | 西蒙的实验室

  • 内容概述:从 Flutter 的嵌入层、引擎层和框架层出发,详细解析了 Flutter 的渲染原理和设计理念。
  • 亮点:结合 Flutter 的渲染管道和树更新规则,深入探讨了 Flutter 的响应式编程模型。
  • 链接: 你必须了解的Flutter原理 | 西蒙的实验室

5. Flutter学习总结(六)渲染机制 - CSDN博客

  • 内容概述:从计算机绘图原理出发,解析了 Flutter 的渲染流程,包括布局、绘制、合成和光栅化等阶段。
  • 亮点:详细介绍了 Flutter 的三棵树(Widget 树、Element 树、Render 树)及其创建和更新机制。
  • 链接: Flutter学习总结(六)渲染机制 - CSDN博客

6. Flutter底层架构初探 - CSDN博客

  • 内容概述:从 Flutter 的嵌入层、引擎层和框架层出发,详细解析了 Flutter 的底层架构和核心功能。
  • 亮点:结合 Flutter 的渲染引擎和 Dart 运行时,深入探讨了 Flutter 的跨平台实现原理。
  • 链接: Flutter底层架构初探 - CSDN博客

flutter项目结构

1. Flutter项目合理的目录架构 - CSDN博客

  • 内容概述:详细介绍了如何创建一个科学合理的 Flutter 项目目录结构,包括 lib/ 目录下的子目录划分(如 assets/constants/models/pages/ 等),以及如何通过模块化设计提高代码的可读性和可维护性。
  • 亮点:提供了具体的目录结构示例,并解释了每个目录的作用,适合初学者和进阶开发者参考。
  • 链接: Flutter项目合理的目录架构 - CSDN博客

2. Flutter 项目架构大揭秘:最佳实践与路由管理 - CSDN博客

  • 内容概述:从默认目录结构出发,介绍了如何优化 lib/ 目录,并重点讲解了路由管理的实现方法。文章还提供了网络请求层、状态管理、路由配置的代码示例。
  • 亮点:结合实际项目需求,详细说明了如何通过模块化设计和路由管理提升项目的可扩展性和可维护性。
  • 链接: Flutter 项目架构大揭秘:最佳实践与路由管理 - CSDN博客

3. flutter教程01 flutter项目的目录结构 - CSDN博客

  • 内容概述:从 Flutter 开发基础入手,详细解析了 Flutter 项目的目录结构,包括 android/ios/lib/test/ 等目录的作用,并提供了 pubspec.yaml 文件的配置说明。
  • 亮点:适合初学者快速了解 Flutter 项目的基本结构和文件作用。
  • 链接: flutter教程01 flutter项目的目录结构 - CSDN博客

4. flutter 项目结构 - sqmw - 博客园

  • 内容概述:详细介绍了 Flutter 项目的目录结构,包括 .dart_tool/.idea/android/ios/lib/ 等目录的作用,并解释了 Flutter 如何通过渲染引擎实现跨平台。
  • 亮点:结合跨平台实现原理,深入探讨了 Flutter 项目结构的设计思路。
  • 链接: flutter 项目结构 - sqmw - 博客园

5. Flutter 项目结构 初始项目 分析 - 牛客网

  • 内容概述:从新建 Flutter 项目的默认结构出发,详细解析了每个文件和目录的作用,包括 pubspec.yamllib/test/ 等,并结合初始项目示例讲解了 Flutter 的基本开发流程。
  • 亮点:适合初学者通过示例项目快速上手 Flutter 开发。
  • 链接: Flutter 项目结构 初始项目 分析 - 牛客网

6. 【Flutter】基础入门:项目结构 - CSDN博客

  • 内容概述:从创建 Flutter 项目入手,详细介绍了项目的目录结构,包括 lib/android/ios/test/ 等目录的作用,并讲解了如何通过 pubspec.yaml 文件添加依赖和管理资源。
  • 亮点:结合实际开发需求,提供了配置应用名称、图标和测试代码的详细说明。
  • 链接: 【Flutter】基础入门:项目结构 - CSDN博客

weight讲解

1. 深度理解Flutter:有状态Widget与无状态Widget的详细对比 - CSDN博客

  • 内容概述:详细对比了 StatelessWidget 和 StatefulWidget 的定义、使用场景以及实现方式。文章通过代码示例展示了如何创建有状态和无状态的 Widget,并解释了 State 对象的作用和生命周期。
  • 亮点:深入探讨了 StatefulWidget 的状态管理机制,以及如何通过 setState() 方法触发 UI 更新。
  • 链接: 深度理解Flutter:有状态Widget与无状态Widget的详细对比 - CSDN博客

2. Flutter 小技巧之为什么推荐 Widget 使用 const - GitBook

  • 内容概述:解释了为什么在 Flutter 中推荐使用 const 修饰 Widget,并分析了 constfinal 的区别。文章还探讨了 Widget 的不可变性及其对性能的影响。
  • 亮点:通过实例说明了 const 如何优化 Widget 的重建过程,减少内存占用和垃圾回收频率。
  • 链接: Flutter 小技巧之为什么推荐 Widget 使用 const - GitBook

3. Flutter组件 StatefulWidget、StatelessWidget 可继承写法 - CSDN博客

  • 内容概述:介绍了如何通过继承的方式创建非私有的 StatefulWidget 和 StatelessWidget,并提供了详细的代码示例。文章还探讨了如何通过基类实现 Widget 的复用和扩展。
  • 亮点:展示了如何通过继承机制实现 Widget 的灵活扩展,适合需要自定义 Widget 的开发者。
  • 链接: Flutter组件 StatefulWidget、StatelessWidget 可继承写法 - CSDN博客

4. Flutter - Stateful(有状态) 和 stateless(无状态) widgets - 博客园


5. Flutter 的 Widget,刻意加上 const,真的值得吗? - 掘金

  • 内容概述:探讨了在 Flutter 中使用 const 修饰 Widget 的优化效果,并分析了其背后的原理。文章通过性能测试数据说明了 const 对内存和渲染性能的影响。
  • 亮点:结合实际测试数据,评估了 const 修饰 Widget 的优化效果,帮助开发者权衡是否使用 const
  • 链接: Flutter 的 Widget,刻意加上 const,真的值得吗? - 掘金

6. Flutter初识(5):Widget详解 - 博客园

  • 内容概述:详细介绍了 Flutter 中 Widget 的分类、生命周期以及布局机制。文章还探讨了 StatelessWidget 和 StatefulWidget 的使用场景和实现方式。
  • 亮点:结合 Flutter 的渲染机制,深入分析了 Widget 的不可变性和重建过程。
  • 链接: Flutter初识(5):Widget详解 - 博客园

7. Flutter之StatelessWidget和StatefulWidget区别及使用详解 - CSDN博客

  • 内容概述:对比了 StatelessWidget 和 StatefulWidget 的定义、生命周期以及使用场景,并通过代码示例展示了如何创建和管理有状态 Widget。
  • 亮点:详细解释了 setState() 方法的工作原理,以及如何通过 State 对象管理 Widget 的状态。
  • 链接: Flutter之StatelessWidget和StatefulWidget区别及使用详解 - CSDN博客

8. Flutter 教程第一章:深入理解 Flutter Widget - CSDN博客

  • 内容概述:从 Flutter 的 UI 构建机制出发,详细介绍了 Widget 的分类、生命周期以及布局原理。文章还探讨了 StatelessWidget 和 StatefulWidget 的使用场景和实现方式。
  • 亮点:结合 Flutter 的渲染管线,深入分析了 Widget 的不可变性和重建过程。
  • 链接: Flutter 教程第一章:深入理解 Flutter Widget - CSDN博客

9. flutter —— 深入理解 StatelessWidget 与 StatefulWidget 的 build 构建 - 博客园


10. flutter填坑之旅(widget原理篇) - 博客园

  • 内容概述:从 Flutter 的渲染机制出发,详细介绍了 Widget、Element 和 RenderObject 的关系,并探讨了 StatelessWidget 和 StatefulWidget 的实现原理。
  • 亮点:结合 Flutter 的渲染管线,深入分析了 Widget 的不可变性和重建过程。
  • 链接: flutter填坑之旅(widget原理篇) - 博客园

生命周期

StatefulWidget 生命周期概述

StatefulWidget 的生命周期可以分为以下几个阶段:

  1. 初始化阶段createStateinitState
  2. 依赖变更阶段didChangeDependencies
  3. 构建阶段build
  4. 更新阶段didUpdateWidget
  5. 销毁阶段deactivatedispose

1. 初始化阶段

1.1 createState

  • 调用时机:当 StatefulWidget 被创建时,会立即调用 createState 方法。
  • 作用:创建与 StatefulWidget 关联的 State 对象。
  • 示例
    dart
    @override _MyStatefulWidgetState createState() => _MyStatefulWidgetState();

1.2 initState

  • 调用时机:在 State 对象被插入到 Widget 树中时调用,仅调用一次。
  • 作用:用于初始化状态变量、加载数据或设置监听器。
  • 注意事项:不能在此方法中访问 BuildContext,因为此时 Widget 尚未完全构建。
  • 示例
    dart
    @override void initState() { super.initState(); // 初始化操作 }

2. 依赖变更阶段

2.1 didChangeDependencies

  • 调用时机:在 initState 之后调用,或者当 State 对象依赖的 InheritedWidget 发生变化时调用。
  • 作用:处理依赖项的变化,例如更新依赖于 InheritedWidget 的状态。
  • 示例
    dart
    @override void didChangeDependencies() { super.didChangeDependencies(); // 处理依赖变化 }

3. 构建阶段

3.1 build

  • 调用时机:在 didChangeDependencies 之后调用,或者在调用 setState 之后调用。
  • 作用:构建并返回需要渲染的 Widget。
  • 注意事项build 方法会被频繁调用,因此应避免在此方法中执行耗时操作。
  • 示例
    dart
    @override Widget build(BuildContext context) { return Container(); }

4. 更新阶段

4.1 didUpdateWidget

  • 调用时机:当父组件重新构建并传入新的 Widget 时调用。
  • 作用:比较新旧 Widget 的属性,并根据需要更新状态。
  • 示例
    dart
    @override void didUpdateWidget(MyStatefulWidget oldWidget) { super.didUpdateWidget(oldWidget); // 处理 Widget 更新 }

5. 销毁阶段

5.1 deactivate

  • 调用时机:当 State 对象被暂时从 Widget 树中移除时调用。
  • 作用:执行临时清理工作,例如取消订阅或释放资源。
  • 示例
    dart
    @override void deactivate() { super.deactivate(); // 临时清理 }

5.2 dispose

  • 调用时机:当 State 对象被永久从 Widget 树中移除时调用。
  • 作用:释放资源,例如取消动画控制器或关闭流。
  • 示例
    dart
    @override void dispose() { super.dispose(); // 释放资源 }

6. 其他生命周期方法

6.1 reassemble

  • 调用时机:在开发模式下,每次热重载时调用。
  • 作用:用于调试和检查代码问题。
  • 示例
    dart
    @override void reassemble() { super.reassemble(); // 调试代码 }

总结

StatefulWidget 的生命周期方法为开发者提供了在不同阶段管理组件状态和资源的机制。通过合理利用这些方法,可以构建高效、健壮的 Flutter 应用。以下是生命周期方法的调用顺序:

  1. createState
  2. initState
  3. didChangeDependencies
  4. build
  5. didUpdateWidget(可选)
  6. deactivate
  7. dispose

参考文章

  1. Flutter 组件生命周期与 StatefulWidget - 掘金
  2. 深入理解 Flutter 生命周期函数之 StatefulWidget - CSDN
  3. Flutter 页面生命周期 - CSDN
  4. StatefulWidget 生命周期:深入揭秘 Flutter 组件的幕后机制 - ByteZoneX
  5. Flutter Widget 生命周期详解 - 简书

混合开发

1. Flutter 混合开发基础 - 网易云信 - 博客园

  • 内容概述:从 Android 开发的视角,详细介绍了 Flutter 混合开发的基本概念、集成步骤以及如何将 Flutter 模块嵌入到现有原生项目中。
  • 亮点:提供了 Flutter 模块的创建、依赖配置以及如何在原生项目中启动 Flutter 页面的具体代码示例。
  • 链接: Flutter 混合开发基础 - 网易云信 - 博客园

2. Flutter 混合开发 ( 关联 Android 工程与 Flutter ... - CSDN博客


3. 手把手 Flutter 混合开发 -- 基于 FlutterBoost 实现 - 简书

  • 内容概述:介绍了如何使用 FlutterBoost 实现 Flutter 与原生项目的混合开发,包括 FlutterBoost 的初始化、页面跳转以及参数传递。
  • 亮点:通过 FlutterBoost 简化了 Flutter 与原生页面的映射和跳转,适合需要复杂页面管理的项目。
  • 链接: 手把手 Flutter 混合开发 -- 基于 FlutterBoost 实现 - 简书

4. Flutter与原生混合开发 - 不停奔跑的蜗牛 - 博客园

  • 内容概述:探讨了 Flutter 与原生项目的混合开发场景,包括 Flutter 调用原生功能(如相机、电池信息)以及如何将 Flutter 模块嵌入到现有原生项目中。
  • 亮点:提供了 Flutter 调用原生功能的代码示例,适合需要集成原生功能的开发者。
  • 链接: Flutter与原生混合开发 - 不停奔跑的蜗牛 - 博客园

5. Flutter 核心原理与混合开发模式 - CSDN博客

  • 内容概述:从 Flutter 的核心原理出发,详细介绍了 Flutter 的绘制流程、混合开发模式以及四种不同的混合开发方案。
  • 亮点:深入探讨了 Flutter 的架构设计和混合开发的最佳实践,适合对底层原理感兴趣的开发者。
  • 链接: Flutter 核心原理与混合开发模式 - CSDN博客

6. Flutter 混合开发集成步骤 - 腾讯云

  • 内容概述:介绍了 Flutter 混合开发的基本步骤,包括 Flutter 模块的创建、依赖配置以及如何在原生项目中启动 Flutter 页面。
  • 亮点:提供了详细的配置步骤和代码示例,适合初学者快速上手。
  • 链接: Flutter 混合开发集成步骤 - 腾讯云

7. Flutter跨平台Hybrid实践 - 机器之心

  • 内容概述:介绍了 Flutter 在爱奇艺开播助手项目中的混合开发实践,包括 Flutter 的集成方式、页面跳转以及性能优化。
  • 亮点:结合实际项目案例,探讨了 Flutter 混合开发的性能优化和最佳实践。
  • 链接: Flutter跨平台Hybrid实践 - 机器之心

8. Flutter中的Hybrid Coding详解 | Ejin66

  • 内容概述:详细介绍了 Flutter 与原生代码的混合编程,包括 MethodChannel 的使用、参数传递以及如何通过插件实现 Flutter 与原生代码的通信。
  • 亮点:提供了完整的代码示例和源码分析,适合需要深入理解 Flutter 与原生通信机制的开发者。
  • 链接: Flutter中的Hybrid Coding详解 | Ejin66

9. Flutter 核心原理与混合开发模式 - 教程文章 - 时代Java

  • 内容概述:从 Flutter 的核心原理出发,详细介绍了 Flutter 的绘制流程、混合开发模式以及四种不同的混合开发方案。
  • 亮点:深入探讨了 Flutter 的架构设计和混合开发的最佳实践,适合对底层原理感兴趣的开发者。
  • 链接: Flutter 核心原理与混合开发模式 - 教程文章 - 时代Java

10. Flutter 混合开发基础 - 网易云信 - 博客园

  • 内容概述:从 Android 开发的视角,详细介绍了 Flutter 混合开发的基本概念、集成步骤以及如何将 Flutter 模块嵌入到现有原生项目中。
  • 亮点:提供了 Flutter 模块的创建、依赖配置以及如何在原生项目中启动 Flutter 页面的具体代码示例。
  • 链接: Flutter 混合开发基础 - 网易云信 - 博客园

setState发生了啥

1. Flutter的setState原理详解 - CSDN博客

  • 内容:详细解析了setState的实现原理,包括如何标记Element为脏元素、如何调度重建以及如何通过垂直同步信号触发UI更新。
  • 链接Flutter的setState原理详解

2. Flutter中setState原理及更新机制 - 掘金


3. Flutter-探索setState原理流程 - CSDN博客

  • 内容:深入探讨了setState的标记和重绘流程,包括如何通过BuildOwner管理脏元素以及如何触发帧回调。
  • 链接Flutter-探索setState原理流程

4. 深入理解setState更新机制 - Gityuan博客

  • 内容:基于Flutter 1.5源码,详细剖析了setState的更新机制,包括ElementBuildOwnerSchedulerBinding的协作。
  • 链接深入理解setState更新机制

5. setState:Flutter中有状态组件的更新机制详解 - ByteZoneX社区


6. Flutter的setState更新原理和流程 - CSDN博客


7. flutter的setState详细分析以及性能优化 - CSDN博客


8. Flutter的setState更新原理和流程 - 王橙艺 - 博客园


9. Flutter的状态管理:setState、Provider、Bloc的使用详解 - 阿里云开发者社区


10. flutter setState机制 - 简书

  • 内容:从ElementBuildOwner的角度解析了setState的机制,并介绍了如何触发绘制渲染。
  • 链接flutter setState机制

动画

1. 【Flutter 实战】17篇动画系列文章带你走进自定义动画

  • 内容:该系列文章分为三部分:基础原理和核心概念、系统动画组件、自定义动画案例。详细讲解了 AnimationControllerCurveTween 等核心概念,并提供了多个自定义动画的案例,如“孔雀开屏”效果、3D 效果等。
  • 链接点击查看

2. 教程(动画&过渡) - AtlasLapetos

  • 内容:教程详细介绍了 Flutter 动画的基本概念和类,包括 AnimationAnimationControllerCurvedAnimationTween,并通过五个动画示例展示了动画库的不同方面。
  • 链接点击查看

3. Flutter动画 1 - 实现一个最简单的动画

  • 内容:从零开始实现一个简单的 Flutter 动画,讲解了 AnimationControllerTween 的基本用法,适合初学者入门。
  • 链接点击查看

4. 学习笔记-Flutter 动画详解(一)

  • 内容:深入探讨了动画的本质、帧、插值器等概念,并对比了 Flutter 与其他平台(如 Android、iOS)的动画实现方式。
  • 链接点击查看

5. 【Flutter】Animation 动画 ( Flutter 动画基本流程)

  • 内容:详细讲解了 Flutter 动画的基本流程,包括创建动画控制器、设置监听器、布局中使用动画值等,并提供了完整的代码示例。
  • 链接点击查看

6. 史上最详细Flutter 动画讲解

  • 内容:从动画的本质出发,介绍了帧、插值器等概念,并对比了 Flutter 与其他平台的动画实现方式,适合有一定基础的开发者深入学习。
  • 链接点击查看

7. 极简实现酷炫动效:Flutter隐式动画指南第三篇

  • 内容:介绍了如何使用 TweenAnimationBuilder 实现透明度渐变、旋转、缩放等动画效果,并提供了详细的代码示例。
  • 链接点击查看

8. 动画 | Flutter 中文文档

  • 内容:Flutter 官方中文文档中的动画部分,涵盖了动画的基本概念、实现方式、常见动画模式等内容,适合系统学习。
  • 链接点击查看

9. Flutter学习记录——20.动画的使用

  • 内容:详细讲解了 Flutter 动画的基本使用,包括 AnimationAnimationControllerCurvedAnimationTween,并提供了多个动画效果的实现示例。
  • 链接点击查看

10. 教程:Flutter中的动画 - Flutter中文网

  • 内容:教程从基础概念入手,逐步引导开发者完成五个动画示例,适合初学者系统学习 Flutter 动画。
  • 链接点击查看

Scaffold讲解

1. Flutter 中的 Scaffold 小部件:全面指南

  • 内容:详细介绍了 Scaffold 的用途、属性、使用方式以及一些高级技巧,包括如何动态更改 Scaffold、结合 ScaffoldMessenger 管理消息等。
  • 链接点击查看

2. Flutter入门(13):Flutter 组件之 Scaffold 详解

  • 内容:从基本介绍到示例代码,详细讲解了 Scaffold 的常用属性,如 appBarbodyfloatingActionButton 等,并提供了完整的代码示例。
  • 链接点击查看

3. Flutter中的Scaffold组件 - CSDN博客

  • 内容:概述了 Scaffold 的基本功能,并详细解释了其常用属性,如 appBarbodydrawer 等,适合初学者快速上手。
  • 链接点击查看

4. Flutter——最详细(Scaffold)使用教程

  • 内容:通过实例代码详细讲解了 Scaffold 的使用场景和属性,包括 appBarbodyfloatingActionButton 等,并提供了完整的代码示例。
  • 链接点击查看

5. Flutter容器(6):页面骨架(Scaffold)

  • 内容:介绍了 Scaffold 的基本功能和使用场景,并通过案例展示了如何实现包含导航栏、抽屉菜单、底部导航等的完整页面。
  • 链接点击查看

6. 5.7 页面骨架(Scaffold) | 《Flutter实战·第二版》

  • 内容:从官方文档的角度详细介绍了 Scaffold 的功能和使用方法,包括如何实现导航栏、抽屉菜单、底部导航等。
  • 链接点击查看

7. Flutter入门进阶之旅(十六)Scaffold 脚手架

  • 内容:详细讲解了 Scaffold 的常用属性和使用方法,包括 appBarbodyfloatingActionButton 等,并提供了完整的代码示例。
  • 链接点击查看

8. Scaffold class - material library - Dart API - Flutter

  • 内容:Flutter 官方文档中对 Scaffold 的详细说明,包括其属性、方法和使用场景,适合开发者查阅。
  • 链接点击查看

9. 16 Scaffold脚手架 - 《Flutter 入门到实践》

  • 内容:从基础到进阶,详细讲解了 Scaffold 的使用方法,包括如何实现导航栏、抽屉菜单、底部导航等,并提供了完整的代码示例。
  • 链接点击查看

10. Flutter深入浅出组件篇---Scaffold

  • 内容:详细介绍了 Scaffold 的属性和使用方法,包括 appBarbodyfloatingActionButton 等,并提供了完整的代码示例。
  • 链接点击查看

PageView

1. Flutter 中的 PageView 控件:全面指南

  • 内容:详细介绍了 PageView 的基础用法、滚动方向、页面切换控制、页面指示器、监听页面变化以及自定义页面切换效果,适合初学者和进阶开发者。
  • 链接点击查看

2. Flutter组件————PageView

  • 内容:从 PageView 的基本参数到 PageController 的使用,详细讲解了如何实现页面滑动效果,并提供了完整的代码示例。
  • 链接点击查看

3. PageView学习

  • 内容:介绍了 PageView 的基本用法,包括垂直滚动、无限滚动以及如何通过 PageController 实现酷炫效果,并提供了完整的代码示例。
  • 链接点击查看

4. 深入了解 Flutter 中的 PageView(含自定义特效)

  • 内容:深入探讨了 PageView 的类型(如 PageView.builderPageView.custom),并展示了如何通过 Transform 实现自定义页面过渡效果。
  • 链接点击查看

5. Flutter PageView 组件用法详解

  • 内容:详细介绍了 PageView 的常用属性(如 scrollDirectionreversecontroller 等),并通过示例代码展示了如何实现自动滑动效果。
  • 链接点击查看

6. Flutter可滚动组件(5):PageView与页面缓存

  • 内容:探讨了 PageView 的页面缓存问题,并提供了通过 allowImplicitScrolling 实现页面缓存的解决方案。
  • 链接点击查看

7. 【Flutter】StatefulWidget 组件 ( PageView 组件 )

  • 内容:详细介绍了 PageView 的构造函数和常用属性,并通过示例代码展示了如何实现页面切换效果。
  • 链接点击查看

8. Flutter 中 PageView 的使用详解 | Flutter Widgets

  • 内容:通过一个实际案例,展示了如何使用 PageView 实现带有滑动效果的项目主页骨架,并探讨了如何保持页面状态。
  • 链接点击查看

9. flutter PageView的使用

  • 内容:通过一个简单的示例,展示了 PageView 的基本用法,包括如何实现全屏左右滑动效果。
  • 链接点击查看

10. 简单封装分页功能pageView.js

  • 内容:虽然主要针对前端开发,但提供了分页组件的封装思路,适合需要自定义分页效果的开发者参考。
  • 链接点击查看

FutureBuilder

1. Flutter 中的 FutureBuilder 小部件:全面指南

  • 来源CSDN
  • 内容概述
    这篇文章详细介绍了 FutureBuilder 的基本用法、属性以及高级技巧。它通过示例代码展示了如何使用 FutureBuilder 处理异步数据加载,并提供了错误处理和自定义加载指示器的建议。

2. 深入理解 Flutter 中的 FutureBuilder

  • 来源掘金
  • 内容概述
    本文深入探讨了 FutureBuilder 的工作原理,包括如何处理异步操作的状态(如加载中、完成、错误),并提供了避免 FutureBuilder 不必要重绘的解决方案。文章还对比了 FutureBuilder 与其他异步处理工具(如 StreamBuilderProvider)的优缺点。

3. Flutter FutureBuilder 的使用以及防止不必要重绘

  • 来源简书
  • 内容概述
    这篇文章重点讲解了如何避免 FutureBuilder 在页面重建时重复执行异步任务。它提供了两种解决方案:使用 AsyncMemoizer 缓存 Future 和在 initState 中初始化 Future。文章还通过代码示例详细说明了这些方法的具体实现。

4. Flutter 控件 FutureBuilder 控件详解

  • 来源CSDN
  • 内容概述
    本文从 FutureBuilder 的定义、构造函数参数、AsyncSnapshot 的状态属性等方面进行了详细解析。它还提供了多个实际应用场景的示例代码,如网络请求、文件加载和数据库查询。

5. Flutter 异步编程 Future 与 FutureBuilder 的实用技巧

  • 来源极客实验室
  • 内容概述
    这篇文章不仅介绍了 FutureBuilder 的基本用法,还结合 Future 的常见用法(如 thencatchErrorwhenComplete 等)进行了扩展讲解。它通过代码示例展示了如何在实际开发中结合 FutureBuilder 处理异步操作。

6. 在 Flutter 中展现 FutureBuilder 的强大功能

  • 来源掘金
  • 内容概述
    本文通过多个实际用例(如从 API 获取数据、从本地存储读取数据、身份验证等)展示了 FutureBuilder 的强大功能。它还强调了错误处理和加载指示器的重要性,并提供了最佳实践建议。

7. Flutter 进阶教程——http 请求和 FutureBuilder

  • 来源博客园
  • 内容概述
    这篇文章结合 http 请求库的使用,详细讲解了如何通过 FutureBuilder 实现异步数据加载和 UI 更新。它还对比了 setStateFutureBuilder 的优缺点,并提供了完整的代码示例。

8. Flutter FutureBuilder 异步 UI 神器

  • 来源掘金
  • 内容概述
    本文从源码角度解析了 FutureBuilder 的实现原理,并提供了实际开发中的使用技巧。它还强调了在 initState 中初始化 Future 的重要性,以避免不必要的重绘。

本文作者:yowayimono

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!