Flutter面试问题总结

Flutter面试问题总结

---

文章目录

• Flutter面试问题总结
  
• 前言
  
• 1.本地数据存储方式
  
• 2.与原生通讯方式
  
• 3.键盘弹出高度超出解决
  
• 4.ListView报Vertical viewport was given unbounded height错误解决方法
  
• 5.Flutter报setState() or markNeedsBuild() called during build.错误解决办法
  
• 6.Flutter报setState() called after dispose()错误解决办法
  
• 7.如何实现水波纹，图片也怎么添加
  
• 8.Android和IOS控件区别
  
• 9.生命周期输出顺序
  
• 10.Flutter线程
  
• 11. Flutter里的key？
  
• 总结
  

---

前言

本文是今年作者在应聘面试时所遇到的Flutter问题以及所总结的解答，仅供学习参考，偶尔可能会更新与总结。有部分解答是网上资料，作者还是萌新，可能会有疏忽或不足，望共同学习互勉。

---

1.本地数据存储方式

Flutter的本地存储方式参考Android的本地存储方式: 文件，SharedPreferences，Sqlite数据库
2.与原生通讯方式

Flutter定义了三种不同类型的Channel，它们分别是：
BasicMessageChannel：用于传递字符串和半结构化的信息。
MethodChannel：用于传递方法调用。
EventChannel: 用于数据流的通信。
3.键盘弹出高度超出解决

1. Scaffold(
2.         resizeToAvoidBottomPadding: false, //输入框抵住键盘
3. )

复制代码

4.ListView报Vertical viewport was given unbounded height错误解决方法

错误解析：宽度或高度溢出，导致Widget不显示
解决方法：给ListView的shrinkWrap属性设置为true，即父视图的大小跟随子组件的内容大小

1. return Column(
2.         children: <Widget>[
3.           ListView.builder(
4.               itemCount: sourceDataComments.length,
5.               itemBuilder: _buildCommentsRow,
6.               shrinkWrap: true,
7.           ),
8.         ],
9.       );

复制代码

5.Flutter报setState() or markNeedsBuild() called during build.错误解决办法

错误解析：
在运行中，原因是因为控件、响应事件还没有构建完毕，延时加载即可解决问题
解决方法：添加延时

1. void _addIndex() {
2.     Future.delayed(Duration(milliseconds: 200)).then((e) {
3.       setState(() {});
4.     });
5.   }
6. }

复制代码

6.Flutter报setState() called after dispose()错误解决办法

错误解析：防止页面关闭执行setState()方法
解决方法：mounted

1. if(mounted){
2. setState(() {});
3. }

复制代码

7.如何实现水波纹，图片也怎么添加

InkWell有的叫溅墨效果，有的叫水波纹效果。使用场景是给一些无点击事件的部件添加点击事件时使用（也支持长按、双击等事件），同时你也可以去修改它的颜色和形状。

1. InkWell(
2.   borderRadius: BorderRadius.circular(8.0), // 圆角
3.   splashColor: Colors.transparent, // 溅墨色（波纹色）
4.   highlightColor: Colors.transparent, // 点击时的背景色（高亮色）
5.   onTap: () {},// 点击事件
6.   child: Container(),
7. );

复制代码

(1)包一层 Material，将背景色设置在 Material中的color里。

1. Material(
2.   color: Colors.white,
3.   child: InkWell(),
4. )

复制代码

(2)使用Stack布局，将InkWell放置在上层。这种适用于给图片添加点击效果，比如Banner图的点击。

1. Stack(
2.     children: <Widget>[
3.       Positioned.fill(
4.         child: Image(),
5.       ),
6.       Positioned.fill(
7.         child: Material(
8.           color: Colors.transparent,
9.           child: InkWell(
10.             splashColor: Color(0X40FFFFFF),
11.             highlightColor: Colors.transparent,
12.             onTap: () {},
13.           ),
14.         ),
15.       )
16.     ],
17.   )

复制代码

8.Android和IOS控件区别

如：按钮、选择器、日历组件（Android的Material和iOS的Cupertino风格）
9.生命周期输出顺序



总体介绍一下生命周期,大致可以看成三个阶段:
初始化 (插入渲染树
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！