Flutter 3.29.0中ListView的ListTile文本渲染异常问题排查

可能的故障原因 #

• Flutter 3.29.0版本特定渲染bug：该版本的Skia渲染引擎在Samsung A51 5G、Xiaomi Note 11S这类Android设备的release模式下，对ListTile文本布局的处理存在兼容性问题。debug模式的调试校验会掩盖问题，而release模式的编译优化直接触发了故障。
• 列表项复用的状态残留：如果ChiamateListItem是有状态组件，ListView的item复用机制可能导致滚动时旧文本状态未被正确重置，进而造成显示错乱。
• 文本样式与设备系统字体冲突：自定义文本样式（如字体、字重、行高）可能与Samsung设备的默认字体渲染逻辑不兼容，release模式下的字体缓存优化放大了这个冲突。
• TabBarView与ListView嵌套的布局缓存问题：TabBarView切换页面时会触发子页面布局重建，但release模式的布局缓存可能导致ListView的文本区域尺寸计算错误，最终引发显示异常。
• Release模式编译优化破坏布局逻辑：R8混淆、代码压缩等编译优化操作，可能误删或修改了Flutter布局相关的关键代码，导致文本渲染逻辑失效。

排查与修复步骤 #

1. 验证版本兼容性：临时降级Flutter到3.28.x稳定版，打包release包测试。若问题消失，说明是3.29.0的版本bug，可等待官方修复或暂时停留在稳定版本。
2. 优化列表项状态管理：
   • 将ChiamateListItem改为StatelessWidget，确保数据完全由外部传入，避免内部状态残留。
   • 若必须使用StatefulWidget，在didUpdateWidget方法中强制更新状态，确保新数据替换旧数据。
3. 添加唯一Key优化复用：给ListView的每个item设置唯一key（如ValueKey(item.id)），帮助Flutter精准识别item，避免复用错误。
4. 排查文本样式冲突：暂时移除所有自定义文本样式，使用Flutter默认的ListTile文本样式测试。若问题解决，再逐步恢复样式，定位冲突的样式属性。
5. 禁用编译优化测试：在android/app/build.gradle中临时禁用R8混淆：

   android {
       buildTypes {
           release {
               minifyEnabled false
               shrinkResources false
               proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
           }
       }
   }
   

   打包测试，若问题消失，说明是编译优化导致的，可调整proguard规则保留Flutter相关的关键类。

内容的提问来源于stack exchange，提问作者Marina P.