【问题标题】:Flutter web app progress indicator before loading app?在加载应用程序之前 Flutter Web 应用程序进度指示器?
【发布时间】:2019-12-04 04:35:53
【问题描述】:

您好,我是一名移动应用程序开发人员,对 Web 开发不太熟悉,在加载诸如 Gmail 加载屏幕之类的 Flutter Web 应用程序之前,我正在寻找任何实现进度指示器的方法。 Flutter web 很酷,但在加载应用程序之前需要一些时间。我们可以为这个加载持续时间添加任何指标吗?在 Flutter 中实现的任何代码都将是 Flutter 应用程序的一部分,它不会工作,应该有另一种方法来实现这一点。

【问题讨论】:

    标签: flutter flutter-web


    【解决方案1】:

    除了@Shahzad 和@BambinoUA 的回答,我还需要为 main.dart.js 脚本标签添加 defer 关键字。

    <script defer src="main.dart.js" type="application/javascript"></script>

    以下是我需要这样做的场景:

    • 应用托管在 Gitlab 页面上
    • 浏览器是 Chrome(网速很慢)

    在这种情况下,在下载整个脚本之前,只能看到空白屏幕。然后动画仅可见 0.5 秒,然后立即加载颤振小部件。因此未能达到加载动画的目的。这在本地测试中不会发生。

    我也尝试将动画 div 放在所有脚本之前,但没有帮助。

    【讨论】:

      【解决方案2】:

      如果你想只用 JS 删除加载 div,请使用此代码

        <script>
          window.onload = (event) => {
            console.log('page is fully loaded');
            var element = document.getElementById("loader");
            element.parentNode.removeChild(element);
          };
        </script>
      

      请注意,它假定 loader 是 &lt;div id="loader"&gt;&lt;/div&gt; 标记

      【讨论】:

        【解决方案3】:

        在@Abhilash 的帮助下,我能够做到这一点。我从w3schools 获得加载程序代码。

        我的project/web/index.html是这样的。

        <html>
        
        <head>
          <meta charset="UTF-8">
          <title>Title</title>
          <script defer src="index.dart.js" type="application/javascript"></script>
        
          <style>
            .loading {
              display: flex;
              justify-content: center;
              align-items: center;
              margin: 0;
              position: absolute;
              top: 50%;
              left: 50%;
              -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
            }
            
            .loader {
              border: 16px solid #f3f3f3;
              border-radius: 50%;
              border-top: 16px solid blue;
              border-right: 16px solid green;
              border-bottom: 16px solid red;
              border-left: 16px solid pink;
              width: 120px;
              height: 120px;
              -webkit-animation: spin 2s linear infinite;
              animation: spin 2s linear infinite;
            }
            
            @-webkit-keyframes spin {
              0% {
                -webkit-transform: rotate(0deg);
              }
              100% {
                -webkit-transform: rotate(360deg);
              }
            }
            
            @keyframes spin {
              0% {
                transform: rotate(0deg);
              }
              100% {
                transform: rotate(360deg);
              }
            }
          </style>
        </head>
        
        <body>
          <div class="loading">
            <div class="loader"></div>
          </div>
        
          <script src="main.dart.js" type="application/javascript"></script>
        </body>
        
        </html>

        【讨论】:

          【解决方案4】:

          除了@Shahzad Akram 的回答,您还应该删除loading div,因为在Safari 浏览器中它可能会导致闪烁。因此,在第一个屏幕中,您需要实现以下代码(例如,在initState 方法中):

          import 'package:universal_html/html.dart'
          
          ...
          
          @override
          void initState() {
            super.initState()
            // Remove `loading` div
            final loader = document.getElementsByClassName('loading');
            if(loader.isNotEmpty) {
              loader.first.remove();
            }
          }
          

          附:对于不错的加载器,您可以访问loading.io

          【讨论】:

          • 是否可以在 Flutter 2.2 中仅从 index.html 中的 js 实现?
          • @AdamSmaka,如果您知道 什么时候 flutter 完成了应用初始化所需的所有脚本的下载,是的,
          • 这很有趣。 ? 我可以看到上面提到的颤振版本可能有更多的代码。将所有内容都放在一个文件中会很好。
          【解决方案5】:

          在你提到的问题中

          在 Flutter 中实现的任何代码都将是 Flutter 应用程序的一部分,它不会工作,...

          我假设您尝试为 android 或 IOS 添加启动屏幕方法。由于flutter-web 只是一个index.html 和几个js 文件(例如main.dart.js),你或许应该尝试CSS 加载动画技巧。由于您没有共享任何代码,因此我没有编写任何代码,但以下将是我的方法,正如这个红色订书机 video 所解释的那样。他/她好心地提供了很多基于CSS 的动画here 以及为此的codepen 实现。

          下面是我在flutter_web_project\web\index.html 文件中的步骤。

          1. index.html 的主体中添加span 元素以显示css 动画本身。
          2. 创建一个div 包装器以将跨度动画定位在您的index.html 中。
          3. 然后收听窗口的onLoad 事件并从您的页面中移除div 元素或按照视频中的说明将其淡出。

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2012-04-10
            • 2021-06-06
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2021-10-03
            相关资源
            最近更新 更多