前言
记录flutter项目中的坑
系统环境
Windows
AS版本信息
JDK版本
java version "1.8.0_73"
Java(TM) SE Runtime Environment (build 1.8.0_73-b02)
Java HotSpot(TM) Client VM (build 25.73-b02, mixed mode, sharing)
Flutter版本1.17.2
Dart版本2.8.3
1.ListView、GridView顶部空白
造成ListView、GridView顶部空白原因是没有结合AppBar使用
解决方法
用MediaQuery.removePadding()包裹住ListView、GridView
示例代码
MediaQuery.removePadding(
context: context,
removeTop: true,
child: Container(
color: Colors.white,
child: GridView(
//解决GridView空白 默认为false
shrinkWrap: true,)))
2.Text相关
2.1Text文字是汉字和非汉字(英文、数字等)时显示位置不同
原因分析:当Text文字是汉字时汉字顶部有空白而非汉字没有,所以造成了Text文字是汉字和非汉字时显示位置不同.
下面我把Text放在Container中并给Container一个红色背景,可以看出汉字的顶部明显有空白.
代码
Positioned(
left: ScreenUtil().setWidth(110),
top: ScreenUtil().setWidth(statusBarHeight + 14),
child: GestureDetector(
onTap: () {
//跳转配电总览搜索界面
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (content) =>
PowerDistributionOverviewSearch()));
},
child: Container(
color: Colors.red,
child: Text(
this.title ?? "",
style: TextStyle(
color: Color(0xFF333333),
fontSize: ScreenUtil().setSp(14)),
)),
))
效果图
去掉背景色的效果图
解决方案
目前只想到用正则表达式的解决方案,如有更好方案欢迎评论或私信交流.解决方案:判断是否是汉字,若是汉字给定一个top,否则给定另一个大些的top.
代码如下
//汉字的正则
RegExp reg=RegExp("[\u4e00-\u9fa5]");
Positioned(
left: ScreenUtil().setWidth(110),
//关键代码
top: reg.hasMatch(this.title)?ScreenUtil().setWidth(statusBarHeight + 14):ScreenUtil().setWidth(statusBarHeight + 16),
child: GestureDetector(
onTap: () {
//跳转配电总览搜索界面
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (content) =>
PowerDistributionOverviewSearch()));
},
child: Container(
color: Colors.transparent,
child: Text(
this.title ?? "",
style: TextStyle(
color: Color(0xFF333333),
fontSize: ScreenUtil().setSp(14)),
)),
))
运行结果如下
3.Bottom OverFlowed n Pixels问题
原因:内容的高度超出屏幕
解决方案:将内容嵌套在Expanded中,例如:
Expanded(
child: ScrollConfiguration(
behavior: OverScrollBehavior(),//去下拉默认水波纹
child: ListView(
shrinkWrap: true,//解决白屏问题
padding: EdgeInsets.zero,//不添加padding的话状态栏是灰色 无法沉浸 随便添加一个0
children: [
...
]
)
)
)