时间戳

首页 > 解决方案 > QML 进度条未显示在 UI 上

qt - QML 进度条未显示在 UI 上

问题描述

我有这个 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 上实际显示进度条？任何人都可以给我一个提示吗？

标签： qtqmlprogress-barqtquickcontrols

解决方案

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

有两种方法可以做到这一点。你可以

  1. 直接将您的项目添加为窗口的子项。
  2. 将您的项目放在一个单独的文件中，并在窗口下创建该文件的一个实例。

代码

方法一：直接加为Child

直接将您的代码块插入为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
    }
}

方法 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。我们将在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 文件不在同一个目录中，请确保在其他导入语句import "relative/path"中的文件顶部添加一个。Main.qml

例如，如果

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

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

结果

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

在启动时。

在启动时。

在背景上单击 3 次后。

在背景上单击 3 次后。

每次点击后还有控制台/调试输出：

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

推荐阅读