QML - Урок 021. Переключение между окнами в QML

Qt, window, QtQuick, Quick, QML, Controls

В одной из статей довелось ответить на вопрос читателя, как реализовать переключение между окнами в Qt , так, чтобы при переключении неактивное окно скрывалось. По нажатию специальной кнопки открываем второе окно, а первое закрываем. И переключаемся обратно аналогичным образом.

А теперь задали тот же вопрос, но уже применительно для QML. Итак, посмотрим, как это реализовать на QML.

Структура проекта

• question4.pro - профайл проекта, создаётся по умолчанию и не изменяется;
• main.cpp - основной файл исходных кодов, создаётся по умолчанию и не изменяется;
• main.qml - основной файл qml с главным окном приложения;
• AnotherWindow.qml - тип второстепенных окон проекта.

AnotherWindow.qml

Пояснение кода начну с второстепенного окна приложения, поскольку передача информации о нажатии кнопки для открытия основного окна приложения реализуется с помощью сигнала. И удобнее будет описать этот момент в начале, прежде чем приступить к основному коду приложения.

Синтаксис сигнала выглядит следующим образом:

signal closeThisWindow

То есть объявляется сам signal и далее идёт его название. Обработчик же этого сигнала будет определяться в коде следующим образом:

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

А вызывается сигнал как функция, что и показано в ниже следующем программном коде второстепенного окна приложения.

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

А в данном файле реализована вся остальная логика приложения. В главном окне присутствуют две кнопки. В обработчике каждой кнопки открывается соответствующее второстепенное окно и скрывается основное окно. Тогда как в обработчике нажатия кнопки каждого второстепенного окна происходит закрытие данного окно и открытие основного окна приложения.

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()       // Показываем основное окно
        }
    }
}

Итог

В результате будет реализовано переключение между окнами приложения уже на QML, и при этом у Вас будет открыто всегда только одно окно приложения. Демонстрацию работы приложения Вы можете увидеть в видеоуроке.

Видеоурок