Appearance
Flutter高频面试题
一、Flutter 核心知识(必掌握)
1. Flutter 是什么?
谷歌推出的 跨平台 UI 框架
一套代码运行在 Android / iOS / Web / Desktop
使用 Dart 语言
自绘渲染引擎(Skia),不依赖原生控件
2. Flutter 架构(四层)
Framework(Dart 层)
Widgets、Gestures、Animation、Rendering
Engine(C/C++ 层)
Skia 图形引擎
Dart VM
Embedder(嵌入层)
平台适配(Android/iOS 壳)
Platform(平台层)
原生能力调用
3. Widget 机制(核心)
一切皆 Widget
Widget 是不可变的(配置信息)
真正渲染的是 Element 和 RenderObject
Widget → Element → RenderObject 三棵树
4. Stateless vs Stateful
Stateless:无状态,不可变
Stateful:有状态,通过 setState() 更新
State 生命周期是独立的,Widget 重建不会丢失 State
5. Flutter 生命周期
State 生命周期
createState
initState(只走一次,初始化)
didChangeDependencies
build
didUpdateWidget(父 Widget 重建时)
deactivate
dispose(销毁,释放资源)
6. Key 的作用
标识 Element,帮助 Flutter 复用 / 复用 / 移动节点
提升列表性能,避免状态错乱
常见:Key、GlobalKey、ValueKey、UniqueKey
7. 异步机制(Dart 核心)
单线程 + 事件循环
消息队列:MicroTask > Event
异步:Future、Stream、async/await
8. 路由管理
基本:Navigator.push/pop
命名路由:onGenerateRoute
路由库:go_router(官方推荐)
9. 状态管理(必考)
Provider / Riverpod(官方推荐)
Bloc / Cubit
GetX
Redux
10. 性能优化
列表用 ListView.builder 懒加载
合理使用 const 构造
减少不必要 rebuild
使用 RepaintBoundary 隔离重绘
图片缓存、避免大 Widget 嵌套二、Flutter 高频面试题(带答案)
11. Flutter 是怎么实现跨平台的?
自带 Skia 渲染引擎,自己画 UI,不调用原生控件
平台差异只在 Embedder 层,上层逻辑完全一致
一套代码多端一致渲染
12. Widget、Element、RenderObject 关系?
Widget:配置描述(不可变)
Element:Widget 实例,持有 State,控制生命周期
RenderObject:真正布局、测量、绘制的对象
Flutter 刷新时,尽量复用 Element 和 RenderObject。
13. setState 原理?
标记 Element 为 dirty
下一帧触发 build()
对比新旧 Widget 树,更新 Element 与 RenderObject
注意:setState 会重建子树,不要频繁调用。
14. const 为什么能优化性能?
const Widget 编译期创建,不会被 rebuild
Widget == 比较直接返回 true,Flutter 会跳过更新
15. GlobalKey 用途与风险?
用途:
跨组件访问状态
获取 Widget 位置、大小
表单状态管理
风险:
内存占用大
破坏封装
尽量少用
16. Flutter 为什么快?
自绘引擎,不通过原生桥接
Dart AOT 编译,接近原生性能
三棵树 diff 算法高效
布局、绘制、合成高度优化
17. 异步任务执行顺序(必考)
dart
main() {
Future(() => print("1"));
Future.microtask(() => print("2"));
print("3");
}
输出顺序:
plaintext
3
2
1
原因:
同步 > microtask > event queue
18. Flutter 与 RN、Weex 区别?
Flutter:自绘 UI,性能高,一致性强
RN:调用原生组件,桥接损耗大,样式不一致
Flutter 包体积更大,RN 更小
19. 图片加载原理 / 内存优化?
Flutter 图片默认缓存到内存
大图容易 OOM
优化:
cacheWidth/cacheHeight
ResizeImage
及时 dispose
避免大量大图同时显示
20. 混合开发(Flutter 与原生通信)
MethodChannel:方法调用
EventChannel:事件流
BasicMessageChannel:数据传递
三、手写 / 原理类(高频)
实现一个倒计时 Widget
自定义一个下拉刷新
实现一个简单的 BLoC
自定义 Route 过渡动画
避免 Widget 不必要 rebuild 的方案