我在Ffltter应用程序中使用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'),
              ),

推荐答案

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

1.您是否在配置文件/发布模式下测试了速度?

出于显而易见的测试原因,调试模式下的加载速度比配置文件/发布模式下的加载速度慢得多.一些笨重的小部件和插件在调试时可能会表现得更差,但在生产中仍然是快速和准备好的.

2.您是否在真实设备上进行了测试?

出于与调试模式完全相同的原因,如果你是在为移动设备开发,Android/iOS模拟器比真实的设备场景要慢得多,因为我们模拟的是不同的架构.

3A.UI诀窍:"我不慢,我很优雅"

如果UI的某些元素在加载后需要一些时间才能正确显示,您可以为最终用户使用一个技巧:您可以"淡出"加载指示器.

使用FadeTransition(API here)或AnimatedOpacity(API here)以及像_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.用户界面技巧:"007:许可证预加载"方式

如果我们知道一些繁重的UI元素可能会被大量使用,您可以通过"预加载"HTML编辑器而不显示它来欺骗用户.

例如,如果您的用例是可以编辑HTML页面的Web浏览器,则可以使用Opacity(API here)类将编辑器隐藏在Stack(API here)中,同时仍在小部件子树中:

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

缺点是,很明显,整个初始父部件加载速度较慢.但如果能控制住就没问题了.

Flutter相关问答推荐

壁炉有序在Flutter

下拉图标未居中

本机调试符号包含无效的目录调试符号.目前仅支持Android ABI

Flutter BLoC et workmanager:如何创建独特的仓库初始化模式?

Ffmpeg_kit_fltter:^6.0.3版权问题

通过Ffltter应用程序与Docker服务器进行交互以进行身份验证

我怎样才能go 掉这个底部导航栏上的白色背景

在Ffltter中,我已经使用了Ffltter_BLOC Cupit和Pusher,但当获得新数据时,UI没有更新

如何在Flutter中将背景 colored颜色 更改为黑色?

无法应用插件com.chaquo.python

'type' Icon '不是类型' IconData '的子类型

更改 flutter listview 中的布局

如何从另一个页面访问 Firebase 值?

java.lang.IncompatibleClassChangeError:找到接口 com.google.android.gms.location.SettingsClient,

Android: 从 URI 获取音频元数据

如何在 cupertino switch flutter 中添加文本

通过点击缩略图加载全屏图像

Flutter如何从左到右连续 Select 多个列表项而不跳过任何

Flutter:如何将列表转换为字符串?

Flutter 用户过滤器