Flutter实战之WanAndroid项目中碰到的问题

上一篇博客 Flutter实战之一起写个WanAndroid客户端 简单介绍了一下Flutter版本WanAndroid项目,这一篇主要记录项目中碰到的一些问题,避免大家在这些坑中再花太多的时间。

项目地址

WanAndroid-Flutter 目前已经有400个star,喜欢的话可以给个星鼓励一下

gif图

开发环境搭建及模拟器相关

Windows下环境搭建

Flutter环境搭建

PANIC: Missing emulator engine program for ‘x86’ CPU.

在启动模拟器运行Flutter时可能出现如上错误,原因是 Sdk(AndroidSDK安装位置 )/ tools下文件丢失,删除重新安装就好了。步骤如下图:

取消2中Andrid SDK Tools的勾选,然后点击Apply开始卸载,卸载完成之后,勾选Andrid SDK Tools,然后点击Apply开始安装。完成之后重启AndroidStudio(记得重启)

操作图

Error while initializing the Dart VM

Windows开发环境下,Android在打包之后成功之后,安装release版apk时闪退,并且出现错误日志

1
Error while initializing the Dart VM

可能的原因是flutter sdk的版本不对。我是直接删除了flutter sdk文件下所有文件,然后再次下载 官方地址下最新的sdk(记得是下载官方文档那里的)
https://flutter.io/setup-windows/ 大概20行左右,点击下载安装 然后重启AS,再打包

WanAndroid项目相关

首页直接在MaterialApp中直接使用Navigator.push

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
class WanAndroidApp extends StatefulWidget {
@override
_WanAndroidState createState() => new _WanAndroidState();
}
class _WanAndroidState extends State<WanAndroidApp>
with TickerProviderStateMixin {

@override
Widget build(BuildContext context) {
initData();
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('标题'),
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.search),
onPressed: () {
Navigator.push(context,new MaterialPageRoute(
builder: (context) => new SearchPage()));
})
],
),
body: ...
);
}
}

直接点击是搜索按钮,会报错,具体信息如下,为什么呢?

1
2
3
The following assertion was thrown while handling a gesture: Navigator operation requested with a context that does not include a Navigator. The context used to push or pop routes from the Navigator must be that of a widget that is a descendant of a Navigator widget.

Another exception was thrown: Navigator operation requested with a context that does not include a Navigator.

stackoverflow上有人给出了答案,如下

1
2
3
4
5
6
7
8
9
10
11
12
Think of the widgets in Flutter as a tree, with the context pointing to whichever node is being built with the build function. In your case, you have
--------------------------------------------------------------
MainScreen <------ context
--> MaterialApp
(--> Navigator built within MaterialApp)
--> Scaffold
--> App Bar
--> ...
--> Center
--> ...
--------------------------------------------------------------
So when you're using the context to find the Navigator, you're using a context for the MainScreen which isn't under the navigator.

意思就是此时Navigator.push(context..中的context是MainScreen中的context

来自https://stackoverflow.com/questions/50124355/flutter-navigator-not-working

RefreshIndicator在ListView条目较少时不触发下拉刷新

RefreshIndicator是根据下拉时的偏移量触发刷新,当条目较少时(未占满一个屏幕),ListView不能滚动,所以无法触发下拉刷新,给ListView的physice属性设置值为new AlwaysScrollableScrollPhysics(),让ListView在任何情况下都可以滑动,也就可以触发RefreshIndicator的刷新。

1
2
3
4
5
6
7
Widget listView = new ListView.builder(
//注意这里physics
physics: new AlwaysScrollableScrollPhysics(),
itemCount: listData.length,
itemBuilder: (context, i) => buildItem(i),
controller: _contraller,
);

TarBarView每次切换时其条目Widget都会执行initState()

在其条目Widget的xxxState方法扩展AutomaticKeepAliveClientMixin,并返回true
当前Tab切到任意非相邻Tab(如:第一个Tab切换到第三个)报错的话,请升级Flutter的SDK版本

1
2
3
4
5
6
7
class ArticleListPageState extends State<ArticleListPage>
with AutomaticKeepAliveClientMixin {

// with AutomaticKeepAliveClientMixin 并且get wantKeepAlive返回true,tab切换时,不会每次执行initState
@override
bool get wantKeepAlive => true;
}