有什么方法可以加快flutter中Quill HTML编辑器的加载时间吗？

Question

我在 flutter 应用程序中使用 QuillHtmlEditor 包，每当我使用编辑器导航到页面时，文本编辑器的加载时间大约需要 200-500 毫秒。有什么方法可以加快加载时间，让用户看不到它吗？

这就是我实例化它的方式：

QuillHtmlEditor(
                controller: controller,
                isEnabled: widget.enabled,
                ensureVisible: false,
                minHeight: 500,
                autoFocus: false,
                textStyle: widget.editorTextStyle,
                hintTextStyle: _hintTextStyle,
                hintTextAlign: TextAlign.start,
                padding: const EdgeInsets.only(left: 10, top: 10),
                hintTextPadding: const EdgeInsets.only(left: 20),
                backgroundColor: _backgroundColor,
                onEditingComplete: (s) => debugPrint('Editing completed $s'),
                loadingBuilder: (context) {
                  return const Center(
                      child: CircularProgressIndicator(
                    strokeWidth: 1,
                    color: Colors.red,
                  ));
                },
                onTextChanged: (text) => debugPrint('widget text change $text'),
                onEditorCreated: () {
                  debugPrint('Editor has been loaded');
                  setHtmlText(widget.controller?.text ?? '');
                },
                onEditorResized: (height) =>
                    debugPrint('Editor resized $height'),
              ),

Answer 1

据官方插件页面所述，您的实现是正确的，loadingBuilder 应该负责在加载数据时显示进度指示器。 但如果这 500 毫秒仍然是一个问题，让我们完成一些步骤。

1。您在配置文件/发布模式下测试过速度吗？

出于明显的测试原因，调试模式下的加载速度比配置文件/发布模式慢得多。一些重型小部件和插件在调试中可能表现较差，但在生产中仍然快速且准备就绪。

2。你在真机上测试过吗？

出于与调试模式完全相同的原因，如果您正在为移动设备进行开发，则 Android/iOS 模拟器比真实设备场景要慢得多，因为我们正在模拟不同的架构。

3a。 UI 技巧：“我不慢，我很优雅”方式

如果 UI 的某些元素在加载后需要一点时间才能正确显示，您可以为最终用户使用一个技巧：您可以“淡出”加载指示器。

使用

FadeTransition

（API此处）或

AnimatedOpacity

（API此处）以及像

_isHtmlEditorLoaded

这样的布尔变量，您可以使用动画来“减慢”加载页面的关闭速度：

AnimatedOpacity(
    opacity: _isHtmlEditorLoaded ? 0 : 1,
    duration: const Duration(milliseconds: 500),
    child: CircularProgressIndicator(...),
)

或者，更好的是，您还可以“减慢”编辑器的显示速度：

AnimatedOpacity(
    opacity: _isHtmlEditorLoaded ? 1 : 0,
    duration: const Duration(milliseconds: 500),
    child: QuillHtmlEditor(...),
)

3b。 UI 技巧：“007：预加载许可证”方式

如果我们知道某些繁重的 UI 元素可能会被大量使用，您可以通过“预加载”Html 编辑器而不显示它来欺骗用户。

例如，如果您的用例是可以编辑 HTML 页面的 Web 浏览器，则可以使用

Opacity

（API 此处）类将编辑器隐藏在

Stack

（API 此处）中，而仍然在小部件子树中：

bool _showEditor = false;

...

Stack(
  children: [
     Opacity(
       opacity: _showEditor ? 0.0 : 1.0,
       child: InAppBrowser(...),
     ),
     Opacity(
       opacity: _showEditor ? 1.0 : 0.0,
       child: QuillHtmlEditor(...),
     ),
  ]
)

...

void toggleHtmlEditor() {
  setState(() {
    _showEditor = !_showEditor;
  });
}

缺点是，显然，整个初始父小部件加载速度较慢。但如果管理得当，那就没有问题了。