Lé代码

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的{{3 }}。

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

直接将您的商品添加为窗口的子项。
将您的商品放在单独的文件中，然后在窗口下创建该文件的实例。

Lé代码

方法1：直接添加为子级

直接将您的代码块作为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"中的Main.qml从myControls子目录导入项目。请记住，您只需要导入目录，而不是文件本身。

结果

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

启动时。

GameWindow

在背景上单击3次。

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

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

QML进度栏未显示在用户界面上

1 个答案:

Lé代码

方法1：直接添加为子级

方法2：使用单独的文件

结果