如何使用加载微调器来作为flutter web应用程序的前置？
使用flutter构建的web应用程序具有非常大的包大小，并且可能需要很长时间才能加载。在我的用例中，这不是一个真正的问题，用户不会弹跳。但我不想让他们盯着一个白屏看5-10秒，没有任何反馈。
在flutter web应用加载之前，我如何显示基于HTML/CSS的加载微调器？
web应用程序被嵌入到web/index.html中。我已经包含了一个小的Javascript片段，它要求用户在重新加载页面之前进行确认。这是正确执行的。
在这里我找到了一个很好的自容器html和css旋转器：https://projects.lukehaas.me/css-loaders/
如果我将微调器添加到一个空的html模板中，它可以很好地工作。但是如果我将它添加到web/index.html的主体中，它在屏幕上是不可见的。
当使用"inspect element“查看DOM时，我可以看到微调器已加载，但被flutter canvaskit渲染器覆盖。
在我看来，flutter在页面加载时几乎立即为这个渲染器设置了div，然后需要很长时间才能加载剩余的资源。
是否有可能有一个加载微调器，显示，直到flutter完成其所有准备工作？
回答 1
Stack Overflow用户
发布于 2021-03-09 03:28:00
这个教程对我来说效果很好：https://medium.com/flutter-community/adding-a-splash-screen-to-flutter-web-7930e5e44bd
只需创建css文件，这是我在web/文件夹中的styles.css：
.loader, .loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.loader {
margin: 60px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(0, 217, 255, 0.2);
border-right: 1.1em solid rgba(0, 217, 255, 0.2);
border-bottom: 1.1em solid rgba(0, 217, 255, 0.2);
border-left: 1.1em solid #00d9ff;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}然后在web/index.html的<head>中导入css
<head>
<!--
iOS meta tags & icons, etc...
-->
<link rel="stylesheet" type="text/css" href="styles.css">
</head>最后，在<body>中添加微调器(它应该是正文的第一行)：
<body>
<div class="loader">Loading...</div>
<!-- Register the service worker -->
</body>屏幕截图
https://stackoverflow.com/questions/66534965
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号