Flutter页面切换时出现异常线条，求问题原因及解决方法

可能的原因和对应修复方式 #

1. 像素对齐问题导致的亚像素渲染 #

Flutter里元素的位置或尺寸要是带小数，渲染时容易出现细线。你可以这么改：

• 别用FractionalTranslation或者Transform.translate传小数偏移，比如把Offset(0.5, 0)改成Offset(1, 0)
• 对计算出来的尺寸做整数转换，比如用round()或floor()处理：

  width: (MediaQuery.of(context).size.width * 0.3).round()
  

2. 过渡动画或裁剪组件的问题 #

如果自定义了页面过渡，或者用了裁剪组件，可能是裁剪边界出问题：

• 删掉不必要的ClipRect、ClipRRect，或者调整它们的裁剪范围
• 先换成Flutter默认的MaterialPageRoute或CupertinoPageRoute测试，看看是不是自定义过渡的锅

3. 全局主题的默认设置踩坑 #

检查一下全局主题里有没有意外的线条设置：

• 看看ThemeData里的dividerTheme，是不是不小心设了thickness或者奇怪的颜色
• 排查AppBar、Scaffold这些组件的默认样式，有没有带边框或分割线

4. 第三方路由库的bug #

如果用了go_router、auto_route这类第三方路由：

• 先升级到最新版本，很多渲染bug会在新版本修复
• 暂时切回官方路由测试，确认是不是第三方库的问题

5. 平台特定的渲染调整 #

针对不同系统的渲染差异：

• Android：确认AndroidManifest.xml里的硬件加速是开启的（默认开着，但可以检查下）
• iOS：在Info.plist里加个UIViewEdgeAntialiasing，值设为YES

快速定位问题的小技巧 #

• 新建一个极简Flutter项目，只做两个页面的跳转测试，要是没线条，说明是你项目里的业务代码或配置有问题
• 逐步往新项目里加原项目的组件，慢慢定位到出问题的代码块

内容的提问来源于stack exchange，提问作者damian