1、Flutter生命周期
1、StatelessWidget
只有build
2、StatefulWidget
其中deactivate:页面失去焦点
构造函数 -> createState -> initState -> didChangeDepencicies -> build -> didUpdateWidget -> deactivate -> dispose
3、App
resumed -> inactive -> pasued
2、flutter三颗树的原理与作用
原理:
Flutter是一种跨平台的移动应用开发框架,其调用原理可概括为三棵树:Widget树、Element树和RenderObject树。
1、Widget树:Flutter中所有UI结构都基于Widget,类似于DOM树(配置json)。每个Widget都有自己的属性和子节点,可灵活组织和嵌套。根节点是根Widget,定义了应用程序的主题和样式等基本功能。
2、Element树:每个Widget都对应一个Element对象,Element树是Widget树的实际运行时表示,管理Widget的生命周期、状态和渲染。
3、RenderObject树:负责实际的绘制和布局工作,由多个RenderObject组成,每个RenderObject负责具体的绘制和布局。
作用:提高性能。
1、widget的重建开销非常小,所以可以随意的重建
2、而renderObject如果频繁创建和销毁成本就很高了,对性能的影响比较大。
3、而判断页面有无变化就依靠element了,每次widget变化时element会比较前后两个widget,只有当某一个位置的Widget和新Widget不一致,才会重新创建Element和widget;其他时候则只会修改renderObject的配置而不会进行耗费性能的RenderObject的实例化工作了。
3、Flutter绘制流程
- Flutter的绘制是基于Skia图形引擎实现的,它使用一种称为"层"的概念来进行绘制。
- 首先,Flutter会构建一个由Widget组成的UI树,这些Widget描述了界面的结构和外观。
- 接下来,Flutter会将UI树转换为一组层,并将它们添加到绘制树中。
- 当需要进行绘制时,Flutter会遍历绘制树,从底部到顶部依次绘制每个层。
- 绘制过程中,Flutter会根据每个层的属性(例如位置、大小、颜色等)使用Skia图形引擎进行绘制操作。
4、Flutter事件传递流程
- 当用户触摸屏幕或进行其他交互操作时,事件会被发送到Flutter的渲染线程。
- 渲染线程会将事件分发给最上层的Widget,也就是位于UI树的根节点。
- 根节点的Widget会根据事件的类型和位置来决定如何处理事件。它可以选择处理事件,也可以将事件传递给子节点处理。
- 如果Widget处理了事件,它会执行相应的操作。如果没有处理,事件会继续向下传递给子节点。
- 事件会依次向下传递,直到找到一个处理事件的Widget或到达叶子节点为止。
- 在处理事件期间,Widget可以通过调用setState()方法来更新UI,并触发重绘过程。
5、flutter 中Widget的分类
1、组合类:StatelessWidget和StatefulWidget
2、代理类:inheritedwidget、ParentDataWidget
inheritedwidget一般用于状态共享,如Theme 、Localizations 、 MediaQuery 等,都是通过它实现共享状态,这样我们可以通过 context 去获取共享的状态,比如 ThemeData theme = Theme.of(context);
3、绘制类:RenderObjectWidget
RenderObject 的布局相关方法调用顺序是 : layout -> performResize -> performLayout -> markNeedsPaint
6、Flutter中的Widget、State、Context 的核心概念?是为了解决什么问题?
主要是为了解决多个部件之间的交互和部件自身状态的维护。
1、Widget: 在Flutter中,几乎所有东西都是Widget。将一个Widget想象为一个可视化的组件(或与应用可视化方面交互的组件),当你需要构建与布局直接或间接相关的任何内容时,你正在使用Widget。
2、Widget树: Widget以树结构进行组织。包含其他Widget的widget被称为父Widget(或widget容器)。包含在父widget中的widget被称为子Widget。
3、Context: 仅仅是已创建的所有Widget树结构中的某个Widget的位置引用。简而言之,将context作为widget树的一部分,其中context所对应的widget被添加到此树中。一个context只从属于一个widget,它和widget一样是链接在一起的,并且会形成一个context树。
4、State: 定义了StatefulWidget实例的行为,它包含了用于”交互/干预“Widget信息的行为和布局。应用于State的任何更改都会强制重建Widget。
7、 Flutter 如何与 Android iOS 通信?
Flutter 通过 PlatformChannel 与原生进行交互,其中 PlatformChannel 分为三种:
BasicMessageChannel:用于传递字符串和半结构化的信息。
MethodChannel:用于传递方法调用。Flutter主动调用Native的方法,并获取相应的返回值。
EventChannel:用于数据流(event streams)的通信。
main()和runApp()函数在flutter的作用分别是什么?有什么关系吗?
main函数是类似于java语言的程序运行入口函数
runApp函数是渲染根widget树的函数
一般情况下runApp函数会在main函数里执行
Hot Restart 和 Hot Reload 有什么区别吗?
Hot Reload比Hot Restart快,Hot Reload会编译我们文件里新加的代码并发送给dart虚拟机,dart会更新widgets来改变UI,而Hot Restart会让dart 虚拟机重新编译应用。另一方面也是因为这样, Hot Reload会保留之前的state,而Hot Restart回你重置所有的state回到初始值。
future 和steam有什么不一样?
在 Flutter 中有两种处理异步操作的方式 Future 和 Stream,Future 用于处理单个异步操作,Stream 用来处理连续的异步操作。
在什么场景下使用profile mode?
profile model 是用来评估app性能的,profile model 和release mode是相似的,只有保留了一些需要评估app性能的debug功能。在模拟器上profile model是不可用的。
介绍下FFlutter的FrameWork层和Engine层,以及它们的作用
Flutter的FrameWork层是用Drat编写的框架(SDK),它实现了一套基础库,包含Material(Android风格UI)和Cupertino(iOS风格)的UI界面,下面是通用的Widgets(组件),之后是一些动画、绘制、渲染、手势库等。这个纯 Dart实现的 SDK被封装为了一个叫作 dart:ui的 Dart库。我们在使用 Flutter写 App的时候,直接导入这个库即可使用组件等功能。
Flutter的Engine层是Skia 2D的绘图引擎库,其前身是一个向量绘图软件,Chrome和 Android均采用 Skia作为绘图引擎。Skia提供了非常友好的 API,并且在图形转换、文字渲染、位图渲染方面都提供了友好、高效的表现。Skia是跨平台的,所以可以被嵌入到 Flutter的 iOS SDK中,而不用去研究 iOS闭源的 Core Graphics / Core Animation。Android自带了 Skia,所以 Flutter Android SDK要比 iOS SDK小很多。
Dart中var与dynamic的区别
使用var来声明变量,dart会在编译阶段自动推导出类型。而dynamic不在编译期间做类型检查而是在运行期间做类型校验。
const和final的区别
const 的值在编译期确定,final 的值在运⾏时确定。
dart是值传递还是引用传递?
dart中,基本数据类型传值,类传引用
三方框架
go_router:路由框架,有443 start
fluro:路由框架,有3.6k start
riverpod: