BusyIndi​​cator 不显示 [英] BusyIndicator does not show up

问题描述

我想显示一个 BusyIndi​​cator 在一个漫长的过程中.问题是当我让它运行时它不显示，然后在过程完成时显示.根据文档

I want to show a BusyIndicator while a long process is going on. The problem is it does not show up when I make it run and shows afterwards when the process is completed. According to the docs

忙碌指示符应用于指示正​​在加载内容或 UI 被阻塞等待资源可用时的活动.

The busy indicator should be used to indicate activity while content is being loaded or the UI is blocked waiting for a resource to become available.

我创建了一个基于原始代码的最小代码

I have created a minimal code that based upon the original code

Window {
    id: win
    width: 300
    height: 300

    property bool run : false

    Rectangle {
        anchors.fill: parent
        BusyIndicator {
            anchors.centerIn: parent
            running: run
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                run = true
                for(var a=0;a<1000000;a++) { console.log(a) }
                run = false
            }
        }
    }
}

因此，当单击 Rectangle 时，我想在计算完成之前显示 BusyIndi​​cator.

So when the Rectangle is clicked I want to display the BusyIndicator for the time till the calculations gets completed.

例如，我在这里使用了 for 循环.在实际场景中，我通过 ContextProperty 调用一个函数(将大约 1000 行插入数据库).但在这种情况下，BusyIndi​​cator 也不会显示.

For example purpose I have used the for loop here. In actual scenario I call a function (which inserts some 1000 rows into the Database) through the ContextProperty. But in that case too the BusyIndicator is not displayed.

我做对了吗?或者最好的方法是什么?

Am I doing it the right way? Or what would be the best way to do it?

推荐答案

有一种方法可以使用 QQuickWindow 的 afterSynchronizing 信号:

There is a way to do this using QQuickWindow's afterSynchronizing signal:

import QtQuick 2.4
import QtQuick.Controls 1.3

ApplicationWindow {
    width: 400
    height: 400
    visible: true

    Component.onCompleted: print(Qt.formatDateTime(new Date(), "mm:ss:zzz"), "QML loaded")

    onAfterSynchronizing: {
        print(Qt.formatDateTime(new Date(), "mm:ss:zzz"), "Window content rendered")
        if (!loader.item) {
            loader.active = true
        }
    }

    Item {
        anchors.fill: parent

        BusyIndicator {
            running: !loader.item
            anchors.centerIn: parent
        }

        Loader {
            id: loader
            active: false
            anchors.fill: parent
            sourceComponent: Text {
                wrapMode: Text.Wrap

                Component.onCompleted: {
                    for (var i = 0; i < 500; ++i) {
                        text += "Hello, ";
                    }
                }
            }
        }
    }
}

这个想法是使用 Loader 来控制何时发生昂贵的操作.您还可以通过 Qt.createQmlObject() 或 Qt.createComponent() 使用动态加载的组件在单独的文件中动态加载组件.

The idea is to use a Loader to have control over when the expensive operation happens. You could also use a dynamically loaded component via Qt.createQmlObject(), or Qt.createComponent() to dynamically load a component in a separate file.

如果你运行这个例子，你会看到你得到以下输出:

If you run the example, you'll see that you get the following output:

qml: 58:12:356 QML 已加载
qml: 58:12:608 呈现的窗口内容

qml: 58:12:356 QML loaded
qml: 58:12:608 Window content rendered

我们使用 QQuickWindow 的 afterSynchronizing 信号知道窗口的内容何时已显示，并且仅在第一次对其进行操作(通过 if (!loader.item)).

当信号最初发出时，我们可以确定 BusyIndi​​cator 已经开始了它的动画，所以用户实际上会看到一个旋转的图标.

When the signal is initially emitted, we can be sure that the BusyIndicator has started its animation, so the user will actually see a spinning icon.

Loader 完成文本加载后，其 item 属性将变为非 null，BusyIndi​​cator 将消失.

Once the Loader has finished loading the text, its item property will become non-null and the BusyIndicator will disappear.

这篇关于BusyIndi​​cator 不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！