Skip to content

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 的方案

基于 VitePress 的本地知识库