UI 上未显示 QML 进度条

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 or Window (or anything else equivalent, e.g. Canvas or Felgo's GameWindow).

下创建它的一个实例

您可以通过两种方式完成此操作。你可以

直接将您的项目添加为 window 的 child。
将您的项目放在一个单独的文件中，并在 window.

that

Lé 代码

方法一：直接添加为Child

直接插入您的代码块作为 ApplicationWindow 的 child。

// 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
    }
}

方法 2：使用单独的文件

将您的项目保存到新的 qml 文件中。

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

^{请注意，您仍然需要 import 语句。}

然后从 Main.qml 中的 window 调用它。我们将在这里使用 ApplicationWindow。

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

如果您的 qml 文件不在同一目录中，请确保在 Main.qml 文件的顶部添加 import "relative/path" 以及其他导入语句。

例如，如果

您的 Qml 项目位于 /Users/Lorem/Project、
您 Main.qml 的完整路径是 /Users/Lorem/Project/qml/Main.qml，
您 MyProgressBar.qml 的完整路径是 /Users/Lorem/Project/qml/myControls/MyProgressBar.qml...

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

结果

这是我从 macOS 运行得到的结果。

启动时。

背景点击3次后

每次点击后还有console/debug输出：

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

UI 上未显示 QML 进度条

QML progress bar is NOT showing up on UI

qt

qml

progress-bar

qtquickcontrols

Lé 代码

方法一：直接添加为Child

方法 2：使用单独的文件

结果