Flutter Web 行高不一致

Posted 2023-02-23

【中文标题】Flutter Web 行高不一致

【英文标题】：Flutter Web inconsistent line height

【发布时间】：2021-10-21 01:34:24

【问题描述】：

这里有两张手机chrome浏览器和pc chrome浏览器的截图，都是同一个网站。电脑上的chrome浏览器看起来还不错，但是手机的chrome浏览器上的文字行都乱了。

注意：我在大多数 Text 小部件中使用 TextStyle.height。

这个问题有解决办法吗？

【问题讨论】：

参考我的回答here希望对你有所帮助。

【参考方案1】：

我自己想出了解决办法。

运行flutter build web时选择canvaskit作为web渲染器。

flutter build web --web-renderer canvaskit

参考here，

auto（默认）- 自动选择要使用的渲染器。此选项在应用程序在移动浏览器中运行时选择 html 渲染器，在应用程序在桌面浏览器中运行时选择 CanvasKit 渲染器。

html - 始终使用 HTML 渲染器。

canvaskit - 始终使用 CanvasKit 渲染器。

由于移动浏览器中出现了不需要的重叠行为，我强制构建到 canvaskit。

【讨论】：

现在已经不是这样了。 （即将稳定）flutter.dev/docs/release/breaking-changes/…