QML - Урок 018. Завантажувач в QML Qt – Робота з динамічними компонентами

QML, QtQuick, Qt, Loader

Для організації динамічної зміни компонентів зручно використовувати компонент Loader, який входить у QML QtQuick і є контейнером для ваших компонентів у додатку, який допустимо необхідно періодично замінювати в інтерфейсі.

Якщо провести аналогію, наприклад, з розробкою на Java під Android, там є система фрагментів, які також можуть замінюватися в контейнері для них, слідуючи логіці програми, що розробляється. Допустимо, Ми клацаємо на кнопку і в певному контейнері у нас замінюється один фрагмент іншим, а якщо клацаємо на іншу кнопку, то з'являється третій фрагмент, який замінює другий фрагмент собою.

Тому зробимо додаток, який матиме 5 кнопок і натисканням кожної кнопки в Loader будуть змінюватися фрагменти.

Структура проекту для роботи з Loader

• QmlLoader.pro - профайл проекту;
• main.cpp - основний файл вихідних кодів програми;
• main.qml - основний файл кодів qml;
• Fragment1.qml - перший фрагмент для заміни в Loader;
• Fragment2.qml - другий фрагмент;
• Fragment3.qml - третій фрагмент.

main.cpp створюється за замовчуванням і не змінюється, тому його лістинг наводиться не буде, так само як і профайлу проекту.

main.qml

Установка компонентів Loader може здійснюватися декількома способами:

1. Через властивість source - у цьому випадку компонентом є файл QML та його вміст обмежений областю видимості у плані взаємодії з іншими елементами у файлі main.qml;
2. Через властивість sourceComponent - в даному випадку встановлюються об'єкти Component, які містяться у файлі main.qml та не обмежені областю видимості при взаємодії з іншими об'єктами у main.qml;
3. Встановлення через метод setSource() - в даному випадку є можливість задати додаткові параметри для об'єкта, наприклад рівень непрозорості, але не забувайте ці параметри встановлювати заново, інакше вони зберігаються навіть при установці нового компонента.

У наведеному нижче коді є шар з п'ятьма кнопками, об'єктом Loader , який є прямокутним контейнером, в який будуть розміщуватися наші фрагменти. Робота з розташуванням його у вікні програми виконується так, ніби це об'єкт типу Rectangle .

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    // Слой с кнопками, которые будут менять фрагменты
    RowLayout {
        id: rowLayout
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.margins: 5

        Button {
            text: qsTr("Фрагмент 1")
            // Загрузка компонента из файла
            onClicked: loader.source = "Fragment1.qml"
        }

        Button {
            text: qsTr("Фрагмент 2")
            // Загрузка компонента через метод setSource с установкой параметров фрагмента
            onClicked: loader.setSource("Fragment2.qml", {"opactity": 1 })
        }

        Button {
            text: qsTr("Фрагмент 3")
            // Загрузка компонента через метод setSource с установкой параметров фрагмента
            onClicked: loader.setSource("Fragment3.qml", {"opacity": 0.5})
        }

        Button {
            text: qsTr("Фрагмент 4")
            // Установка фрагмента из объекта Component
            onClicked: loader.sourceComponent = fragment4
        }

        Button {
            text: qsTr("Фрагмент 5")
            // Установка фрагмента из объекта Component
            onClicked: loader.sourceComponent = fragment5
        }
    }

    // Loader для загрузки фрагментов
    Loader {
        id: loader
        anchors.top: rowLayout.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.topMargin: 5
        source: "Fragment1.qml"
    }

    // Четвёртый фрагмент в качестве компонета
    Component {
        id: fragment4

        Rectangle {
            anchors.fill: parent
            color: "blue"

            Text {
                text: "Fragment 5"
                color: "white"
                anchors.top: parent.top
                anchors.right: parent.right
                anchors.margins: 50
                font.pixelSize: 30

                renderType: Text.NativeRendering
            }

        }
    }

    // Пятый фргамент в качестве компонента
    Component {
        id: fragment5

        Rectangle {
            anchors.fill: parent
            color: "black"

            Text {
                text: "Fragment 5"
                color: "white"
                anchors.top: parent.top
                anchors.right: parent.right
                anchors.margins: 50
                font.pixelSize: 30

                renderType: Text.NativeRendering
            }

        }
    }
}

Fragment1.qml та інші фрагменти

Код Fragment1.qml та інших фрагментів ідентичний крім того, що вони мають різний колір фону.

import QtQuick 2.5

Rectangle {
    anchors.fill: parent
    color: "green"

    Text {
        text: "Fragment 1"
        color: "white"
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.margins: 50
        font.pixelSize: 30

        renderType: Text.NativeRendering
    }

}

Підсумок

Після того, як Ви скомпонуєте вище написаний код, у Вас вийде програма, яка буде виглядати так, як показано на наступному рисунку. Демонстрацію роботи програми Ви можете побачити у відеоуроці.

Відеоурок