Flutter 踩坑集锦
首先,中文网位置:
Flutter中文网
官网位置
Flutter官网
环境和安装(win10)
- win10+ 开启虚拟化(这个倒是无所谓)
- JAVA & PATH中
JAVA_HOME
的设置 - 下载flutter或
git clone flutter
的仓库 - Android Studio
SDK下载,并把SDK的路径写入path - VisualStudio下载,安装时勾选 C++ 桌面程序
- VSCODE + Plugin:flutter+dart+...
这些就自行安装了
执行flutter doctor
查看错误
一般有可能有一些错误,下面是不同的解法
- android license未同意,这个直接到sdk下面找sdkmanager,然后
sdkmanager --licenses
,同意所有就OK - maven仓库的问题(未FQ)
这个找
flutter/packages/flutter_tools/gradle/flutter.gradle
flutter/packages/flutter_tools/lib/src/http_host_validator.dart
修改maven()和google()为国内的仓库
踩到的坑
Q:不要在createState中放置参数
A:方法有两种
- 添加 //ignore ... ,代码提醒中有
- 直接使用widget(类似于js中的this),在StatefulWidget中定义参数
class A extends StatefulWidget {
const A({Key? key, required this.fun}) : super(key:key);
final Function fun;
@override
State<A> createState() => _A();
}
class _A extends State<A> {
...
// 使用时如下
widget.fun()
}
Q:经常遇到组件要不要使用const的warning问题
A:如果对象中有变量或者函数不要用const,如果是确定的固定的东西就要用const
比如 const BorderRadius.all(Radius.circular(10))
就要用const,因为里面是不变的。
比如 TextField( controller: controller , ...)
就不能用const。
Q:怎么实现毛玻璃
Container >
child: ClipRect(矩形) / ClipRRect(圆角) (
borderRadius: ... // ClipRRect专属
child: BackdropFilter(
filter:ImageFilter.blur(sigmaX: double, sigmaY:double) // 设置毛玻璃的半径
)
)
Q:go_router的使用
/// router_module.dart
import ...
class RouterModule {
static final router = GoRouter(
initialLocation: "/",
routes: [
GoRoute(path: "/", builder: (context, state) => Page1()),
...
]
)
}
/// main.dart
import "package:go_router/go_router.dart";
class App ... {
@override
Widget build(...) {
return MaterialApp.router(
... 内部的其他参数和没加.router时一致
routerConfig: RouterModule.router
)
}
}
/// A.dart
import ...
class ... {
context.go("/B");
}
Q:设置Timer时声明了一个无初始值变量,但是后面又需要判断是否为空而取消timer
A:可以声明时设置 late Timer? timer
,使用时使用timer!.cancel()
// 和ts的有点像
Q:Chip的坑。
A:chip就像web里的label一样,作用挺大的,还有自定义的onPress和onDelete之类的方法,看属性
label: Text() // required的方法,就是标签的内容
labelStyle: TextStyle(...) // 标签的样式,顾名思义
side: BorderSide(width, color, style...) // 边框样式,不需要的话直接style: BorderStyle.none
labelPadding: EdgeInset... // 控制标签的大小,是的chip不受height控制,就是label包裹的边框,如果要高度减小,vertical: -10
shape: RoundedRectangleBorder / ... // 可以设置一些边框的内容,比如圆角之类的,这个可以看文档
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap / padded // 这个就是是否计算周边的padding值,个人感觉不用,默认是要,看个人需求
padding: ... // 这个作用感觉没labelPadding好,可以看看这两个的共同作用
backgroundColor: Color... // 这个有点坑,没办法设置不透明度,找了一圈,有两种方法,第一种封装chip,个人感觉太麻烦了,第二种办法是在入口main.dart的theme: ThemeData(canvasColor: Colors.black.withOpacity(0.3)),然后使用时 Colors.transparent,大概是因为这种绘制的组件的透明度遵循的就是那个属性……有点坑,希望官方以后能修复一下吧。
deleteIconColor: Color // 删除键的颜色,自然应该可以用Paint
onDeleted: fn // 需要有这个才能有删除键
... 先搞这些吧
Q:有些时候需要负边距,比如profile页面的头像是在container的外面的怎么弄
A:使用Transform.translate(offset: Offset(0, -100)),但是有个问题是虽然被translate了,兄弟元素还是按照原来的高度排列,所以中间会出现空白……这个时候也许下面的元素也都要用这个……好恶心
Q:在做tabbar的时候,创建TabController(length: tabs.length, vsync:this),vsync:this
报错
A:类继承 class xxx extends State<...> with SingleTickerProviderStateMixin
Q:有时候子元素会有超出边界的问题,提示底部一些像素超出边界
A:可以在最顶部添加一个SingleChildScrollView,如果出现了整个页面可以滑动的问题,添加属性physics: const NeverScrollableScrollPhysics()
不滚动
Q:ListView上面有一块padding,要怎么消除
A:在ListView头上套一层MediaQuery.removePadding
ListView ->
MediaQuery.removePadding(
context: context,
removeTop: true,
child: ListView...
)
Q:有时候Scaffold无法控制drawer的开关
A:为Scaffold设置一个key
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
...Scaffold(
key: _scaffoldKey,
... onPressed(
_scaffoldKey.currentState?.openDrawer();
)
)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!