QML - Lektion 021. Wechseln zwischen Fenstern in QML

Qt, window, QtQuick, Quick, QML, Controls

In einem der Artikel hatte ich die Gelegenheit, die Frage eines Lesers zu beantworten, wie man das Umschalten zwischen Fenstern in Qt implementiert , damit beim Umschalten ein inaktives Fenster entsteht ist versteckt. Durch Drücken einer speziellen Taste öffnen wir das zweite Fenster und schließen das erste. Und wir schalten auf die gleiche Weise zurück.

Und jetzt haben sie die gleiche Frage gestellt, aber schon in Bezug auf QML. Sehen wir uns also an, wie man es in QML implementiert.

Projektstruktur

• question4.pro - Projektprofil, wird standardmäßig erstellt und ändert sich nicht;
• main.cpp - Hauptquellcodedatei, wird standardmäßig erstellt und ändert sich nicht;
• main.qml - Haupt-qml-Datei mit dem Hauptanwendungsfenster;
• AnotherWindow.qml - Art der sekundären Fenster im Projekt.

AnotherWindow.qml

Ich beginne mit der Erklärung des Codes mit dem sekundären Anwendungsfenster, da die Übermittlung der Informationen über das Drücken einer Schaltfläche zum Öffnen des Hauptanwendungsfensters über ein Signal implementiert wird. Und es ist bequemer, diesen Punkt am Anfang zu beschreiben, bevor Sie mit dem Hauptanwendungscode fortfahren.

Die Signalsyntax ist wie folgt:

signal closeThisWindow

Das heißt, Signal selbst wird deklariert, gefolgt von seinem Namen. Der Handler für dieses Signal wird im Code wie folgt definiert:

onCloseThisWindow: {
    // Какой-то код
}

Und das Signal wird als Funktion aufgerufen, was im folgenden Programmcode des sekundären Fensters der Anwendung gezeigt wird.

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Window 2.2

Window {
    id: anotherWindow
    signal signalExit   // Задаём сигнал
    width:480
    height:320

    // Кнопка для открытия главного окна приложения
    Button {
        text: qsTr("Главное окно")
        width: 180
        height: 50
        anchors.centerIn: parent
        onClicked: {
            anotherWindow.signalExit() // Вызываем сигнал
        }
    }
}

main.qml

Und in dieser Datei wird der Rest der Anwendungslogik implementiert. Das Hauptfenster hat zwei Schaltflächen. Im Handler jeder Schaltfläche wird das entsprechende sekundäre Fenster geöffnet und das Hauptfenster ausgeblendet. Wohingegen im Schaltflächen-Klick-Handler jedes sekundären Fensters dieses Fenster geschlossen und das Hauptanwendungsfenster geöffnet wird.

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

ApplicationWindow {
    id: mainWindow
    visible: true
    width: 640
    height: 480
    title: qsTr("Переключение между окнами в QML")

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

        GridLayout {
            id: grid
            anchors.fill: parent

            rows: 2
            columns: 1

            Rectangle {
                Layout.fillHeight: true
                Layout.fillWidth: true
                Layout.column: 1
                Layout.row: 1

                // Кнопка для открытия первого второстепенного окна приложения
                Button {
                    text: qsTr("Первое окно")
                    anchors.centerIn: parent
                    width: 300
                    height: 50

                    onClicked: {
                        firstWindow.show()  // Открываем первое окно
                        mainWindow.hide()   // Скрываем основное окно
                    }
                }
            }

            Rectangle {
                Layout.fillHeight: true
                Layout.fillWidth: true
                Layout.column: 1
                Layout.row: 2

                // Кнопка для открытия второго второстепенного окна приложения
                Button {
                    text: qsTr("Второе окно")
                    anchors.centerIn: parent
                    width: 300
                    height: 50

                    onClicked: {
                        secondWindow.show() // Открываем второе окно
                        mainWindow.hide()   // Скрываем основное окно
                    }
                }
            }
        }
    }

    AnotherWindow {
        id: firstWindow
        title: qsTr("Первое окно")

        // Обработчик сигнала на открытие основного окна
        onSignalExit: {
            firstWindow.close()     // Закрываем первое окно
            mainWindow.show()       // Показываем основное окно
        }
    }

    AnotherWindow {
        id: secondWindow
        title: qsTr("Второе окно")

        // Обработчик сигнала на открытие основного окна
        onSignalExit: {
            secondWindow.close()    // Закрываем второе окно
            mainWindow.show()       // Показываем основное окно
        }
    }
}

Insgesamt

Dadurch wird das Umschalten zwischen Anwendungsfenstern bereits in QML implementiert und gleichzeitig haben Sie immer nur ein Anwendungsfenster geöffnet. Sie können eine Demonstration der Anwendung im Video-Tutorial sehen.

Videoanleitung