Flutter web - 启动画面 - 奇怪的行为
Posted
技术标签:
【中文标题】Flutter web - 启动画面 - 奇怪的行为【英文标题】：Flutter web - splash screen - weird behavior 【发布时间】：2021-09-25 22:13:50 【问题描述】：由于第一次加载 Flutter Web 应用程序通常需要一些时间，我试图在其初始屏幕中显示一条消息，以通知用户该事物未冻结 e 该时间是常规的行为。
为此，我只是将这几行代码放在 web/index.html 上
<div style="text-align: center; position: absolute; top: 40%; width: 100%">
<center>
<p style="font-weight: bolder;">Carregando o catálogo...</p>
<p>Na primeira execução, isso pode demorar cerca de 20 a 30 segundos.<br/>Seja paciente! ;-)</p>
</center>
</div>
显示消息是事实，但是，它的颜色/大小在此过程中以一种神秘的方式发生变化，我就是不知道原因。看看这个：
我尝试添加一个微调器，但事情变得更糟了。看看：
现在，不仅文本发生变化，而且屏幕组件（包括微调器）看起来也受到了影响。
有人知道如何解决吗？
提前 10 倍寻求帮助。
【问题讨论】：
我不想删除我的加载程序指示器。我只是想避免它在一段时间后改变它的大小。看看我发布的图片。或者（而且总是有这种可能性）我不明白如何应用 javascript 代码来删除任何加载程序指示器。 您应该为样式添加 !important，例如：style="font-weight: bolder; color: #000 !important;" 【参考方案1】：尝试将其添加到您的 index.html 文件中：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
我从另一个有同样问题的帖子中得到这个，它对我有用，在加载阶段结束时启动画面没有变大。 Flutter 编译器将通过以下消息抱怨它：
WARNING: found an existing <meta name="viewport"> tag. Flutter Web uses its own viewport configuration for better compatibility with Flutter. This tag will be replaced.
但保留它与元标记，你会看到它的工作原理。
【讨论】：
【参考方案2】：随着 Flutter 框架的加载，javascript 正在改变 body 样式，这导致页面在启动屏幕的中途呈现不同的方式。你可以通过提前将 body 设置为 Flutter 的设置来解决这个问题，这样就不会发生任何变化。尝试将您的 <body> 标记替换为这个预先设置好的正文标记：
<body style="position: fixed; inset: 0px; overflow: hidden; padding: 0px; margin: 0px; user-select: none; touch-action: none; font: 14px sans-serif; color: red;">
【讨论】：
以上是关于Flutter web - 启动画面 - 奇怪的行为的主要内容，如果未能解决你的问题，请参考以下文章