Индикатор прогресса 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.

Однако проблема в том, что индикатор выполнения НЕ отображается в пользовательском интерфейсе! Как я могу показать индикатор выполнения на интерфейсе? Кто-нибудь может дать мне подсказку?

Answer 1

Прямо сейчас все, что вы делаете, это создаете тип QML, который вы можете использовать как часть вашего API.Чтобы на самом деле увидеть его, вам нужно создать его экземпляр под ApplicationWindow или Window (или любым другим эквивалентом, например Canvas или Felgo's GameWindow).

Есть два способа сделать это.Вы можете

1. напрямую добавить свой элемент как дочерний элемент окна.
2. поместить свой элемент в отдельный файл и создать экземпляр этого файла вокно.

Код 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.

При запуске.

После 3-х нажатий на фоне.

После каждого клика также выводится консоль / отладка:

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