2024 Flutter面试题二

笔试部分

1. 介绍一下Flutter中Widget是如何工作的?

https://cloud.tencent.com/developer/article/1634618
Widget是用来描述Element配置信息的,Widget是不可变的,因此状态改变时,需要重新构建UI。

2. 什么是StatelessWidget和StatefullWidget?他们之间的区别是什么?
  • StatelessWidget是一旦构建后状态就不能改变的Widget,无生命周期的回调。
  • StatefulWidget是一旦构建Widget的状态还会发生改变的Widget。
  • StatefulWidget有一个状态类State,维护了可变状态。当状态发生变化时,StatefulWidget 将会重建其对应的 State 对象。
  • 生命周期不同,调用build()方法次数和时机不同。
3. 请解释InheritedWidget是什么,并说明它在状态管理中的作用。
  • InheritedWidget 类是一个特殊的无界面(stateless)Widget,它主要用于在整个Widget树中`自顶向下`地高效传递和共享数据(`Notifation`用于`自下而上`传递数据)。
  • InheritedWidget能够提供数据在widget树中从上到下进行传递。保证数据在不同子widget中进行共享。
  • 作用
    1、数据共享
    2、数据监听与重建
    3、性能优化:只重绘受影响的部分子树
4. Provider与其他状态管理解决方案有什么不同?
  • provider是基于InheritedWidget的包装,可以实现页面和其子页面间的数据共享。
  • Provider具有缓存功能,调用setState()方法,那些没有依赖状态的子节点都不会被重新build
    https://blog.51cto.com/u_16175630/7445520
5. 简述下Bloc模式是什么,以及它的工作原理。
  • BLoC全称(Business Logic Component)是谷歌提出的一种设计模式,利用流的方式实现界面的异步渲染和重绘,我们可以非常快速的通过BLoC实现业务与界面的分离。
    BLoC 管理着事件 events 和状态 state,比如,它接受一系列事件流,并将它们转化为状态流作为输出。
  • 在Flutter中实现BLoC设计模式需要借助 flutter_bloc 这个库来完成
  • 原理:BLoC基于流(Stream)的概念,使用RxDart库中的StreamController和Stream来实现。BLoC将UI层(如widget)中的用户操作通过事件(Event)发送给业务逻辑层,并根据这些事件处理数据并生成新的状态(State),再将新状态传递回UI层以更新视图。
6. 什么是Flutter中的异步编程?有哪些常用的异步编程模式?
  • Flutter中的异步是向事件队列中插入任务。
  • Future、Stream
  • Future一次只支持一个任务,Stream可以支持多个任务。
  • async和await、await for是异步的语法糖。
7. Flutter中的渲染对象模型(Render Object Model)是什么?他与Widget树有何区别?
  • RenderObject就是渲染树中的一个对象,负责布局及绘制。
  • widget负责描述UI,存储配置信息。
8. 在Flutter中如何进行单元测试和集成测试。
  • 单元测试(https://flutter.cn/docs/cookbook/testing/unit/introduction
    单元测试可轻松地验证单个函数、方法或类的行为。
    test这个 package 提供了写单测的核心框架。
    flutter_test package 则提供了额外的功能来测试 widget。
    1、将 test 或者 flutter_test 加入依赖;
    2、创建测试文件;
    3、创建一个要测试的类;
    4、为创建的类写一个测试;
    5、整合多个测试到一个 group;
    6、执行测试。
  • 集成测试(https://flutter.cn/docs/cookbook/testing/integration/introduction)
    测试单独的模块形成的整体或者获取真实设备上应用运行状态。
    集成测试由 SDK 直接提供支持,使用 integration_test 这个 package 实现。
    1、创建一个应用用于测试。
    2、添加 integration_test 依赖。
    3、创建测试文件。
    4、编写集成测试。
    4.1 初始化一个单例 IntegrationTestWidgetsFlutterBinding,这将用于在物理设备上执行测试;
    4.2 使用 WidgetTester 类测试并与 widget 发生交互;
    4.3 测试重要的应用场景。
    5、运行集成测试。
9. 在Flutter中如何进行内存管理和性能优化。
性能优化
  1. 性能体现在四个方面:
    流畅度:提高渲染性能
    内存
    应用大小
    功耗

  2. 工具
    DevTools:性能视图,DevTool 提供诸如性能分析、堆测试以及显示代码覆盖率等功能。 DevTool 的 [Timeline] 界面可以让开发者逐帧分析应用的 UI 性能。
    performance overlay:分析模式下分析性能问题,观察 UI 和 GPU 线程
    Flutter inspector:性能图层,用于可视化和查看 widget 树。如果性能图层的 UI 图表显示红色,就要从分析 Dart VM 开始着手了。

  3. 流畅度

  • 动画只在首次运行时卡顿,很可能是着色器编译引起的,解决方案是 Impeller.
  • 渲染和绘制都很耗时,UI线程耗时、raster线程耗时
  • 用重绘边界 RepaintBoundary来缓存图片。因为光栅缓存入口的构建需要大量资源,同时增加了 GPU 存储的负载,所以只在必须时才缓存图片。
  • 检视 widget 重建性能
  1. 内存
  • 在Flutter中,内存管理是由Dart虚拟机负责的。Dart虚拟机使用垃圾回收器来管理内存,这意味着开发者不需要手动分配和释放内存。垃圾回收器会自动识别不再使用的对象并将其回收,从而释放内存。
  • Flutter应用程序中的内存分为两种类型:堆内存和栈内存。堆内存用于存储对象,栈内存用于存储临时变量。在Flutter中,大多数对象都是在堆内存中创建的,而临时变量则是在栈内存中创建的。当一个对象不再被引用时,垃圾回收器会自动回收它所占用的堆内存。
  • 减少不必要的对象创建
  • 优化图片加载。缓存、格式、压缩、按需加载
  • 避免使用过多的动画。
  • 使用适当的数据结构
  • 及时释放资源。dispose、关闭文件和网络连接、及时销毁对象,避免对象长时间占用内存。
  • 检测消耗多余内存的图片。Flutter Inspector:点击 “Highlight Oversizeded Images”。
    原文链接:https://blog.csdn.net/weixin_42232156/article/details/129927691
  1. 应用大小
    包文件大小分析:flutter build apk --analyze-size --target-platform-android-arm64
  • 当构建应用的发行版本时,考虑使用--split-debug-info标记。
  • 删除无用的资源
  • 尽量减少从库中引入的资源
  • 压缩 PNG 和 JPEG 文件
  • 延迟加载组件
  1. 功耗
  • 网络请求数量
  • 减少不必要的重建和绘制
  1. 最佳实践
  • 尽量减少消耗资源的操作
  • 控制 build() 方法的耗时
  • 谨慎使用 saveLayer()
  • 尽量减少使用不透明度和裁剪
  • 谨慎使用网格列表和列表。使用懒加载,避免内部传递,尽量减少由内部操作引起的布局传递
  • 在 16ms 内渲染完成每一帧。可以延长电池寿命 以及避免发热问题。
  • 避免使用 Opacity widget,尤其是在动画中避免使用。可以使用 AnimatedOpacity 或 FadeInImage 代替该操作。
  • 避免在动画中裁剪,尽可能的在动画开始之前预先裁剪图像。
  • 并发与隔离
10. 如何加密和保护蓝牙通信?
11. 如何在iOS应用中实现低功耗的发现和连接过程?
12. OpenGL中有哪些缓冲区?分别有什么区别?
13. 怎么在地图引擎上进行100w级别的坐标点渲染,有什么方案吗?
  • 通过MassMarks海量点来解决
  • 通过layer加上 Loca.GeoJSONSource的方式处理
14. App网络层有哪些优化策略?

https://www.jianshu.com/p/18baeb1f42e8

  • DNS优化
  • 连接管理与复用
  • 协议优化
  • 数据压缩与缓存
  • 请求优化
  • 网络层错误处理与重试
  • 网络状况感知与适配
  • CDN(Content Delivery Network)利用
  • 服务质量(QoS)管理
15. socket、websocket、http、https在tcp/ip协议层面有什么区别?
16. 如何检测链表中是否有环?删除排序链表的重复元素?
17. 如何验证两个二叉树是完全相等的?
18. flutter中widget、element和render object三者的关系?
  • Widget树:描述UI的配置信息,不涉及渲染,更新代价极低。
  • RenderObject树:真正的UI渲染树,负责渲染UI,处理 布局、绘制相关的事情,更新代价极大。
  • Element树:Widget树和RenderObject树之间的粘合剂,负责将Widget树的变更以最低的代价映射到 RenderObject树上。将真正需要修改的部分同步到真实的 RenderObject 树中,最大程度降低 对真实渲染视图的修改,提高渲染效率,而不是销毁整个渲染视图树重建。
  • widget 树和 Element 树节点是一一对应关系,每一个 Widget 都会有其对应的 Element,但是 RenderObject 树则不然,只有需要渲染的 Widget 才会有对应的节点。
  • Flutter 渲染过程,可以分为这么三步:
    1、通过 Widget 树生成对应的 Element 树;
    2、创建相应的 RenderObject 并关联到 Element.renderObject 属性上;
    3、构建成 RenderObject 树,以完成最终的渲染。

面试部分

  1. MVP、MVVM有什么区别?
  2. Flutter响应式实现原理是什么?
    状态管理
  3. 说说地图纠偏,坐标系。
  • 目前常用的地理坐标系主要有国际标准坐标系WGS-84,火星坐标系GCJ-02,百度坐标系BD-09。
  1. flutter、uniapp、android原生有什么不一样?说说优缺点。
  2. 说说你对Flutter渲染机制的理解?
  3. flutter中出现问题,你是如何解决?
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,657评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,662评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,143评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,732评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,837评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,036评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,126评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,868评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,315评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2 351

推荐阅读更多精彩内容

  • 1、Dart是值传递还是引用传递? dart是值传递。 2、描述Flutter的核心渲染模块三棵树 WidgetT...
    Qphine阅读 39,275评论 9 60
  • 1、Dart中var 与 dynamic的区别 2、const和final的区别 3、Dart中 ?? 与 ??=...
    永不放弃_8eef阅读 1,433评论 0 3
  • 1. Dart 当中的 「..」表示什么意思? Dart 当中的 「..」意思是 「级联操作符」,为了方便配置而使...
    马修斯阅读 13,714评论 0 22
  • Flutter是Google推出的一套开源跨平台UI框架,可以快速地在Android、iOS和Web平台上构建高质...
    GoldMask阅读 15,357评论 2 48
  • Dart 相关 1、Dart 当中的 「..」表示什么意思? 级连操作符 “..” 和 “.” 不同:调用..后返...
    af06e7def7a7阅读 2,231评论 0 2