Flutter面试题——面试题1_flutter 面试题-程序员宅基地

技术标签: flutter  Flutter  面试题  

一 面试题知识点

  • Flutter种Widget视图的生命周期
  • Flutter中的三棵树
  • Flutter动画
  • Flutter中手势操作
  • Flutter绘制(签名/画笔)
  • 有无做过手绘相关的项目
  • Flutter中使用Opengl

二 面试题解答

2.1 Flutter种Widget视图的生命周期

flutter中widget主要分为 StatelessWidget 和 StatefulWidget 两种 二者生命周期不太一样

StatelessWidget(无状态)

生命周期只有 build

StatefulWidget (有状态)

需要持有状态 State,这里面包含了一系列生命周期方法

名称 描述 调用次数
createState createState 是 StatefulWidget 里创建 State 的方法,当要创建新的 StatefulWidget 的时候,会立即执行 createState,而且只执行一次 1次
initState initState 是 StatefulWidget 创建完后调用的第一个方法,而且只执行一次,类似于 Android 的 onCreate、iOS 的 viewDidLoad(),所以在这里 View 并没有渲染,但是这时 StatefulWidget 已经被加载到渲染树里了,这时 StatefulWidget 的 mount的值会变为 true,直到 dispose调用的时候才会变为 false。可以在 initState里做一些初始化的操作。 1次
didChangeDependencies 1、当 StatefulWidget 第一次创建的时候,didChangeDependencies方法会在 initState方法之后立即调用,之后当 StatefulWidget 刷新的时候,就不会调用了,
2、或者你的 StatefulWidget 依赖的 InheritedWidget 发生变化之后,didChangeDependencies才会调用,所以 didChangeDependencies有可能会被调用多次。
1次或多次
build 在 StatefulWidget 第一次创建的时候,build方法会在 didChangeDependencies方法之后立即调用,另外一种会调用 build方法的场景是,每当 UI 需要重新渲染的时候(setState触发),build都会被调用,所以 build会被多次调用,然后 返回要渲染的 Widget。千万不要在 build里做除了创建 Widget 之外的操作,因为这个会影响 UI 的渲染效率 多次
didUpdateWidget 祖先节点rebuild widget时调用,当组件改变状态时就会调用,
需要注意的是,涉及到controller的变更,需要在这个函数中移除老的controller的监听,并创建新controller的监听。
1次或多次
deactivate 要将 State 对象从渲染树中移除的时候,就会调用 deactivate生命周期,这标志着 StatefulWidget 将要销毁,但是有时候 State 不会被销毁,而是重新插入到渲染树种 1次或多次
dispose 当 View 不需要再显示,从渲染树中移除的时候,State 就会永久的从渲染树中移除,就会调用 dispose生命周期,这时候就可以在 dispose里做一些取消监听、动画的操作,和 initState是相反的 1次

2.2 Flutter中的三棵树

Flutter 中存在 WidgetElementRenderObject 三棵树,其中 WidgetElement 是一对多的关系ElementRenderObject 是一一对应的关系

三棵树介绍:

  • Widget是用户界面的一部分,并且是不可变的。
  • Element是在树中特定位置Widget的实例。
  • RenderObject是渲染树中的一个对象,它的层次结构是渲染库的核心。

2.3 Flutter动画

Flutter动画
  • AnimationController动画
  • Tween动画,又叫补间动画
  • Curve动画
  • TweenSequence序列动画
  • 自定义动画
  • Simulation物理动画
  • AnimatedList列表动画
  • 帧动画
  • Gif动画
  • Hero过度动画
第三方动画
  • Lottie
  • Flare
  • Nima
  • Rive

2.4 Flutter中手势操作

Flutter中手势识别组件

  • GestureDetector
  • Ink/InkWell
  • Listener

2.5 Flutter绘制(签名/画笔)

绘制API
/// 画布状态相关

void save() native 'Canvas_save';
void saveLayer(Rect? bounds, Paint paint)
void restore() native 'Canvas_restore';
int getSaveCount() native 'Canvas_getSaveCount';

/// 画布变换相关
void translate(double dx, double dy) native 'Canvas_translate';
void scale(double sx, [double? sy]) => _scale(sx, sy ?? sx);
void rotate(double radians) native 'Canvas_rotate';
void skew(double sx, double sy) native 'Canvas_skew';
void transform(Float64List matrix4)

/// 画布裁剪相关
void clipRect(Rect rect, { ClipOp clipOp = ClipOp.intersect, bool doAntiAlias = true })
void clipRRect(RRect rrect, {bool doAntiAlias = true})
void clipPath(Path path, {bool doAntiAlias = true})

/// 线
void drawLine(Offset p1, Offset p2, Paint paint)

///矩形
void drawRect(Rect rect, Paint paint) 
void drawRRect(RRect rrect, Paint paint)
void drawDRRect(RRect outer, RRect inner, Paint paint)

///圆相关
void drawOval(Rect rect, Paint paint)
void drawCircle(Offset c, double radius, Paint paint)
void drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint)

///图片
void drawImage(Image image, Offset offset, Paint paint)
void drawImageRect(Image image, Rect src, Rect dst, Paint paint)
void drawImageNine(Image image, Rect center, Rect dst, Paint paint)
void drawPicture(Picture picture)
void drawAtlas(Image atlas,List<RSTransform> transforms,List<Rect> rects,List<Color>? colors,BlendMode? blendMode,Rect? cullRect,Paint paint)
 void drawRawAtlas(Image atlas,Float32List rstTransforms,Float32List rects,Int32List? colors,BlendMode? blendMode,Rect? cullRect,Paint paint) 

///文字
void drawParagraph(Paragraph paragraph, Offset offset) 

///点
void drawPoints(PointMode pointMode, List<Offset> points, Paint paint)
void drawRawPoints(PointMode pointMode, Float32List points, Paint paint)
void drawVertices(Vertices vertices, BlendMode blendMode, Paint paint)

/// 其他
void drawColor(Color color, BlendMode blendMode) 
void drawPaint(Paint paint)
void drawPath(Path path, Paint paint)
void drawShadow(Path path, Color color, double elevation, bool transparentOccluder)
绘制示例-画板
class DrawingBoardPainter extends CustomPainter {
  final List<List<Offset>> path;

  DrawingBoardPainter(this.path);

  Paint _paint = Paint()
    ..color = Colors.red
    ..style = PaintingStyle.stroke
    ..strokeWidth = 3;

  @override
  void paint(Canvas canvas, Size size) {
    path.forEach((list) {
      Path _path = Path();
      for (int i = 0; i < list.length; i++) {
        if (i == 0) {
          _path.moveTo(list[i].dx, list[i].dy);
        } else {
          _path.lineTo(list[i].dx, list[i].dy);
        }
      }
      canvas.drawPath( _path, _paint);
    });
  }

  @override
  bool shouldRepaint(DrawingBoardPainter oldDelegate) {
    return true;
  }
}

2.6 有无做过手绘相关的项目

结合2.5说明

2.7 Flutter中使用Opengl

pub.dev中opengle类库

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Calvin_zhou/article/details/127536782

智能推荐

Android优雅设置全局字体大小_安卓字体config-程序员宅基地

文章浏览阅读5.9k次,点赞2次,收藏10次。那年,刚毕业出来,查资料多用百度,耽搁了不少工作(不黑不吹),比如你现在查Android设置字体大小的资料,百度实打实谬误。当然,百度上那些通过设置主题、样式或者循环设置页面TextView组件,也不能说打不到功能需求,but~~这严重违背了我们追求优雅代码的特立独行的程序员风格。正确打开设置字体的姿势,你仅需如下:在基类Activity中覆盖getResources方法 @_安卓字体config

Stata绘图-可视化:组间差异比较散点图_stata散点图 两组-程序员宅基地

文章浏览阅读2.1k次。全文阅读:Stata绘图-可视化:组间差异比较散点图| 连享会主页目录1. 引言 2. 方法介绍 2.1 separate 命令的使用 2.2 灰色尺度分级 (gray-scale gradation) 2.3 利用文本字符进行分组 2.4 在标记符号有权重的散点图中进行组间比较 3. 参考文献 4. 相关推文 1. 引言散点图是比较两种连续变量之间关系十分常用的方法,但有时我们可能需要根据另一种分类变量的取值来对二者间的关系进行分组比较。为此, Co._stata散点图 两组

关于弹窗Dialog,Toast,PopupWindow,SnackBar总结分析_toast和弹窗的区别-程序员宅基地

文章浏览阅读1.1k次。关于弹窗Dialog,Toast,PopupWindow,SnackBar总结分析 目录介绍: 0.关于弹窗概述 1.关于Dialog简单介绍 2.关于Toast简单介绍 3.关于SnackBar简单介绍 4.关于PopupWindow简单介绍 5.关于弹框总结0.关于弹窗概述弹窗的分类:应用窗口,子窗口,系统窗口在Android中窗口是一个抽象的概念,每一个Activity就对应_toast和弹窗的区别

thymeleaf + Spring Boot 在开发环境正常,但用jar运行时报错 Error resolving template template might not exist or migh_springboot打成jar部署到linux报error resolving template [-程序员宅基地

文章浏览阅读2.1k次。这个问题我们都很好明白,就是模板页不存在,但是实际上它能找到模板页,但是在使用th:include,th:replace等标签的时候才会出错,这就是问题的症结所在。其实这个问题也很好解决,我们只需要在引用模板文件的时候不用”/”打头就可以了,通过类似相对路径的方式来引用,但是需要说明的是,这里的相对路径仍然是相对于模板根目录来做的。@RequestMapping("/view")public..._springboot打成jar部署到linux报error resolving template [/index], template might not exist or might not be

输入10个整数存在数组中,求最大值。(C语言)_利用数组实现:输入10个整数,找出其中的最大值-程序员宅基地

文章浏览阅读2.2w次,点赞17次,收藏49次。输入10个整数存在数组中,求最大值。#include<stdio.h>int main(){ int a[10], i, max; printf("输入10个整数,用空隔隔开:\n"); for(i=0; i<10; i++) scanf("%d", &a[i]); //打擂台法找最大 max=a[0]; //先认为第一个数是最大的 for(i=1; i<10; i++) //其余所有数依次和擂主max比较, if(a[i]>max) _利用数组实现:输入10个整数,找出其中的最大值

ElasticSearch(二)索引管理-程序员宅基地

文章浏览阅读332次。目录索引管理1、创建索引2、修改索引3、删除索引4、获取索引5、打开和关闭索引索引映射管理1、增加映射不同类型之间的冲突2、获取映射3、获取字段映射4、判断类型是否存在索引别名别名维护过滤索引别名删除别名查询别名索引配置更新索引配置获取配置索引分析索引分析过程:索引模板创建索引模板删除索...

随便推点

Address Sanitizer(Asan)原理及实战定位_asan插桩-程序员宅基地

文章浏览阅读4.6k次,点赞4次,收藏15次。AsanASAN(AddressSanitizer的缩写)是一款面向C/C++语言的内存错误问题检查工具,可以检测如下内存问题:使用已释放内存(野指针) 堆内存越界(读写) 栈内存越界(读写) 全局变量越界(读写) 函数返回局部变量 内存泄漏ASAN工具主要由两部分组成:编译器插桩模块 运行时库运行时库:(libasan.so.x)会接管malloc和``free函数。malloc执行完后,已分配内存的前后(称为“红区”)会被标记为“中毒”状态,而释放的内存则会被隔离起来(暂时不_asan插桩

【RISC-V】Hifive1开发板在Arduino IDE中的配置方法_risc-vduino-程序员宅基地

文章浏览阅读2k次。. 操作系统: 建议使用Ubuntu 16.04 LTS,据说这是设计Hifive1开发板的公司SiIive使用的操作系统版本。可以使用安装在虚拟机上Ubuntu。Sifive官方暂时不支持Windows版的Arduino IDE;对于macOS,虽然官方说是支持的,但实际使用时编译会报错。Ubuntu 16.04 LTS的下载地址: http://releases.ubuntu.com/rele..._risc-vduino

Word2016另存为PDF文件时无书签导航的解决方法_word有目录转pdf没有书签了-程序员宅基地

文章浏览阅读1.5w次,点赞6次,收藏4次。 近期在写毕业论文,在进行word另存为pdf时出现了一个问题,就是pdf文件打开后没有显示word里的书签导航,很是不方便,上网找到了解决办法:---------------1、另存为的时候选择【PDF类型】,然后点击界面上的【选项】2、在弹出对话框中勾选“创建书签时使用-标题”,点击确定即可。------------------------------------------------..._word有目录转pdf没有书签了

WTL for MFC Programmers, Part VI - Hosting ActiveX Controls-程序员宅基地

文章浏览阅读36次。WTL for MFC Programmers, Part VI - Hosting ActiveX Controls原作 :Michael Dunn [英文原文]翻译 :Orbit(星轨 oRbIt) [http://www.winmsg.com/cn/orbit.htm]下载演示程序代码本章内容 介绍 从使用向导开始 建立工程...

SICP学习笔记——丘奇计数与“数”的本质【脑洞大开】-程序员宅基地

文章浏览阅读748次。丘奇计数与“数”的本质学习SICP有一段时间了,对Lambda表达式以及过程为参数等特性的强大并没有概念,直到看到习题2.6中提到的丘奇计数(Church counting),才有种脑洞大开,恍然大悟的赶脚,便迫不及待的和大家分享一下——尼玛,原来“数”还可以这样玩!首先,题目抛砖引玉,丢出了两个定义,一个是0的定义: (define zero (lambda (f)(l..._sicp 计数

物联网操作系统软件定时器_定时函数在网关内的应用-程序员宅基地

文章浏览阅读679次,点赞2次,收藏6次。软件定时器的定义和作用FreeRTOS软件定时器FreeRTOS软件定时器工作原理软件定时器函数应用功能需求使用软件定时器功能完成闹钟功能设计当闹钟到达时,可根据执行动作,触发相关的led亮灭APIxTimerCreate()xTimerStart()xTimerReset()pvTimerGetTimerID()xTimerChangePeriod()功能设计实验1、硬件功能框架串口命令定义功能业务划分功能实现流程一:1.1配置RTC使能开_定时函数在网关内的应用

推荐文章

热门文章

相关标签