Flutter开发遇到的问题总结

1,273 阅读2分钟

1. 本地flutter的web项目运行正常,打包到正式环境,报错,应该指向index.html的文件却指向main.dart.js

解决方案: 讲index.html的文件内

<base href="/">

改为

<base href="">

2. 打包后本地图片404

错误做法:在根目录下创建images文件夹,并存入图片,打包到开发环境找不到图片资源

解决:在根目录下创建images文件夹,并存入图片,在pubspec.yaml中的assets引入这些图片,如下:

每次插入图片都要引一次图片名称的话,真的会让人崩溃,所以可以简写成:

3. flutter中使用dialog不能实时更新UI视图,在setState中改变值不能实时响应页面

原因:flutter的dialog不是我们通常认为的弹窗,它是和页面(也就是statefulWidget和statelessWidget)平级的,他们使用的是不同的setState

解决:加一个StatefulBuilder组件, 在builder中获取这个showDialog的state,在需要改变的地方使用state去局部刷新,就可以全局使用了,如下:

更详细的如下图:

4. flutter中的定位Positioned内容不可操作

问题:flutter中的定位Positioned如果想要支持内容的操作,例如点击,是需要在Stack范围大小内才可以的

例如以上的功能,用vue写其实非常简单,但是用flutter的话,会遇到下拉的内容点击不到的问题,因为Positioned的位置是超出Stack容器的

解决:使用showDialog弹窗模拟下拉内容,将弹窗的遮罩层设置为透明,使用renderBox获取容器所在的位置以及大小,然后将showDialog的内容定位到该位置,代码如下:

5. 页面在本地调试可以正常显示,发到146则出现灰屏遮罩

可能出现问题的点:

(1)row和column内不能使用ListView
(2)给页面的根Widget添加scalffold
(3)注意expanded的合理使用