1

使用 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它在屏幕上是不可见的。

当使用“检查元素”查看 DOM 时，我可以看到微调器已加载，但被颤振 canvaskit 渲染器覆盖。
在我看来，flutter 在页面加载时几乎立即为这个渲染器设置了 div，然后需要很长时间才能加载剩余的资源。

是否可以在颤振完成所有准备工作之前显示加载微调器？

4

1 回答 1

5

本教程对我来说效果很好：https ://medium.com/flutter-community/adding-a-splash-screen-to-flutter-web-7930e5e44bd

只需创建您的 css 文件，这是我styles.css在web/文件夹中的内容：

.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);
    }
}

然后在你的里面导入你的<head>css web/index.html：

<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>

截屏

在此处输入图像描述

于 2021-03-08T19:28:00.020 回答