QML进度栏未显示在UI上

Question

我有这个QML进度栏：

import QtQuick.Controls 2.0 as QQC20

Item {
    QQC20.ProgressBar {
        id: progressbar_id
        visible: false // even if "true", the progress bar does NOT show up on UI
        from: editorScene.progressbarMin
        to: editorScene.progressbarMax
        value: editorScene.progressbarVal

        onValueChanged: {
            console.log("Progressbar value changed: ", progressbar_id.value)
        }
        onVisibleChanged: {
            console.log("Progressbar visibility chanaged: ", progressbar_id.visible)
        }
    }
}

我可以确认进度条的值和可见性已被方法onValueChanged和更改onVisibleChanged。

但是，问题在于进度条没有显示在UI上！我实际上如何在UI上显示进度栏？有人可以给我提示吗？

Answer 1

现在，您要做的只是创建一个QML类型，您可以将其用作API的一部分。要真正看到它，您需要在ApplicationWindow或Window（或其他等效项，例如Canvas或Felgo的GameWindow）下创建它的实例。

有两种方法可以完成此操作。您可以

1. 将项目直接添加为窗口的子项。
2. Put your item in a separate file, and create an instance of that file under a window.

Lé Code

Method 1: Directly Adding as Child

Directly insert your codeblock as a child of an ApplicationWindow.

// Main.qml
import QtQuick 2.0             // for `Item`
import QtQuick.Window 2.0      // for `ApplicationWindow`
import QtQuick.Controls 2.0    // as QQC20 // no need to label a namespace unless disambiguation is necessary

ApplicationWindow {

    width: 480   // set the dimensions of the application window
    height: 320

    // here's your item
    Item {
        anchors.centerIn: parent   // place in centre of window

        ProgressBar {
            id: progressbar_id

            anchors.horizontalCenter: parent.horizontalCenter // horizontally align the progress bar

            from: 0    // don't know what editorScene is
            to: 100    // so I'm using raw values
            value: 5

            onValueChanged: {
                console.log("Progressbar value changed: ", progressbar_id.value)
            }
            onVisibleChanged: {
                // side note: I'm not getting any output from this handler
                console.log("Progressbar visibility chanaged: ", progressbar_id.visible)
            }
        }
    }

    // provide user-interaction for changing progress bar's value
    MouseArea {
        anchors.fill: parent            // clicking anywhere on the background
        onClicked: progressbar_id.value += 5;   // increments the progress bar
                                                // and triggers onValueChanged
    }
}

Method 2: Using a Separate File

Save your item into a new qml file.

// MyProgressBar.qml
import QtQuick 2.0              // for `Item`
import QtQuick.Controls 2.0     // for `ProgressBar`

// here is your item, it has grown up to be in a file of its own 
Item {

    property alias value: progressbar_id.value  // for user-interaction

    ProgressBar {
        id: progressbar_id

        anchors.horizontalCenter: parent.horizontalCenter  // centre horizontally

        from: 0
        to: 100
        value: 5

        onValueChanged: {
            console.log("Progressbar value changed: ", progressbar_id.value)
        }
        onVisibleChanged: {
            console.log("Progressbar visibility chanaged: ", progressbar_id.visible)
        }
    }
}

^{Note that you still need the import statements.}

Then call it from a window in Main.qml. We'll use an ApplicationWindow here.

// Main.qml
import QtQuick 2.0
import QtQuick.Window 2.0    // for `ApplicationWindow`

// import "relative/path/to/progressbar"  // use this if MyProgressBar.qml is not in the same folder as Main.qml

ApplicationWindow {

    width: 480
    height: 320

    MyProgressBar {
         id: progressbar_id
    }

    MouseArea {
        anchors.fill: parent
        onClicked: progressbar_id.value += 5;
    }
}

If your qml files aren't in the same directory, make sure you add an import "relative/path" at the top of the Main.qml file among the other import statements.

For example, if

• Your Qml project is in /Users/Lorem/Project,
• The full path to your Main.qml is /Users/Lorem/Project/qml/Main.qml, and
• The full path to your MyProgressBar.qml is /Users/Lorem/Project/qml/myControls/MyProgressBar.qml...

然后使用import "myControls"在Main.qml从导入项目myControls子目录。请记住，您只需要导入目录，而不是文件本身。

结果

这就是我从macOS运行时的结果。

在启动时。

3次单击后。

每次单击后，还会有控制台/调试输出：

Progressbar value changed: 10
Progressbar value changed: 15
Progressbar value changed: 20