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, і при цьому у Вас буде відкрито завжди лише одне вікно програми. Демонстрацію роботи програми Ви можете побачити у відеоуроці.

Відеоурок