Flutter web 乱码&移动端pc端显示不一致问题

1.移动端浏览器与pc端浏览器浏览显示效果样式不一致

出现显示不一致的情况,是渲染器选择auto或者指定html的问题,需要指定为canvaskit渲染器,保证一致性。

首先默认打包web正式版本的命令是:flutter build web --release

其中隐藏了一个一个参数,如下:

--web-renderer 可选参数值为 autohtml 或 canvaskit

  • auto(默认)- 自动选择渲染器。移动端浏览器选择 HTML,桌面端浏览器选择 CanvasKit。

  • html - 强制使用 HTML 渲染器。

  • canvaskit - 强制使用 CanvasKit 渲染器。

可以通过参数指定web打包后的渲染器选择,分别如下:

自动选择渲染器:flutter build web --release

指定html渲染器(可能出现手机浏览器端与pc浏览器端显示效果不一致,体积小):flutter build web --web-renderer html --release

指定canvaskit渲染器(显示效果一致,但是体积变大):flutter build web --web-renderer canvaskit --release

Flutter web 乱码&移动端pc端显示不一致问题_第1张图片

2.指定canvaskit出现中文乱码

如果出现莫名问题,一定要去GitHub上找issuse。出现问题的原因请参考pr,解决问题的方式很简单,升级flutter版本即可,输入如下命令:

flutter channel master
flutter upgrade -f

参考pr:

https://github.com/flutter/flutter/issues/74785

https://github.com/flutter/flutter/issues/73628

升级前的效果:

如下两个不同渲染,显示效果在移动端浏览器有差异,在代码一致的情况下。

auto 默认渲染:https://oy-paddy.github.io/flutter_web/web/index.html
指定canvaskit渲染(flutter版本2.0.1):https://oy-paddy.github.io/flutter_web/web2/index.html 

 

升级后的效果:

指定canvaskit渲染(flutter版本2.0.3):https://oy-paddy.github.io/flutter_web/web5/index.html

 

3.发布

打包成功后,如果你想放在springboot的static目录下访问,或者其他静态文件夹下,请修改build/web/index.html 文件的base地址,参考如下:

Flutter web 乱码&移动端pc端显示不一致问题_第2张图片

你可能感兴趣的:(技术分享,flutter)