Flutter爬坑记录持续更新中...

前言

记录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: <Widget>[
                  ...
              ]
            )
        )
)

另外在TabView中时不能直接使用Expanded，需要在Expanded外层嵌套Column

TIPS：

ListView不显示可以添加shrinkWrap:true解决

ListView去默认水波纹，可以将ListView嵌套在ScrollConfiguration中，ScrollConfiguration的behavior属性设置为OverScrollBehavior（）

ListView去掉头部 padding:EdgeInsets.zero

最后编辑于：2020.12.28 17:33:44

Flutter爬坑记录 持续更新中...

前言