© EVILEG 2015-2018
Рекомендует хостинг
TIMEWEB

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

Qt, QML, window, Quick, Controls, QtQuick

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

Видеоурок

Комментарии

23 ноября 2017 г. 20:17

Спасибо за урок. Очень понравился. Подскажите если знаете сейчас везде системы управления автомобилей (выбор песни, навигатор, климат контроль (BMW, MERCEDES, etc))  делают с помощью Qt + Qml, там так же примерно сделан переход между окнами ?

24 ноября 2017 г. 9:13

Нет. Там приложения работает в однооконном режиме, скорее всего в качестве базы используются объекты типа Rectangle, которые кастомизированы до состояния диалоговых окон. Также могут использоваться всякие StackView, SwipeView, Loader и т.д.


Хотя... Если там стоит полноценная Ubuntu с приложением в полноэкранном режиме, то вполне возможно наличие диалогов и окон, как в этой статье. Я могу только предполагать, как это работает, но у меня такие мысли на этот счёт.

Для Django рекомендую VDS-хостинг TIMEWEB

12 января 2018 г. 7:45

Добрый день! Подскажите пожалуйста. В учебных целях занимаюсь реализацией игры в шахматы, пока пишу игру для двух пользователей. Использую CPP + QML. Хочу сделать несколько окон. Главное окно с кнопками Игра и Просмотреть историю.

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    Logic logic;
    QQmlApplicationEngine engine;
    engine.rootContext()->setContextProperty("logic", &logic);
    engine.load(QUrl(QStringLiteral("qrc:/qml/main.qml")));

    return app.exec();
}
В классе Logic у меня прописана логика фигур и обработка ходов. Отрисовка доски с фигурами реализована на QML. При нажатии кн. Игра хочу открывать окно с  QQmlApplicationEngine (так как реализовано у меня сейчас в однооконном режиме) и при закрытии окна с игрой возвращаться в главное окно. Вопрос в следующем: можно реализовать это с помощью QML или лучше создавать окна как описано https://evileg.com/post/112/ ?
12 января 2018 г. 8:03

Добрый день!
Это всё можно реализовать средствами QML, однако я немного недопонимаю вашего вопроса в следующем отношении.
Вы хотите сделать это сохранив одноконный режим? (Что в рамках игры вполне логично, поскольку в большинстве случаев они делаются однооконными), или хотите повторить то, что сделано в этой статье?
В этой статье также используется только один QQmlApplicationEngine даже для двух окон, если ещё раз посмотрите статью, то можете обратить внимание на то, что там вызов окон осуществляется из файла main.qml.
Если хотите однооконный режим, то Вам может помочь Loader

Для Django рекомендую VDS-хостинг TIMEWEB

12 января 2018 г. 8:13
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    Logic logic;
    QQmlApplicationEngine engine;
    engine.rootContext()->setContextProperty("logic", &logic);
    engine.load(QUrl(QStringLiteral("qrc:/qml/main.qml")));

    return app.exec();
}

Добрый день, этот код не ваш, я видел этот код так как тоже его делал. Это задание для прохождения на собеседование в одну из крупных украинских IT компаний. Для переключения между окнами используйте Loader QML Type . И на будущее если используете чужой код, изменяйте его, так как не честно использовать чужое, или хотя бы указывайте что код не мой. Будут вопросы пишите.
12 января 2018 г. 9:13

Все верно, я и не говорил что этот кусок кода лично мое произведение. Это тоже верно:

Это задание для прохождения на собеседование в одну из крупных украинских IT компаний.
Логику написал и уперся в окна. Я же не прошу написать за меня, хочу разобраться сам, спашиваю совета. Если кого обидел - прошу прощения. Спасибо огромное за совет.
12 января 2018 г. 9:16

Ничего сложного, делаете по тех заданию 3 файла qml, называете их как указанно в тех задании, потом из первого окна через Loader их переключаете, в окне 2 и 3 делаете сигналы которые при закрытии формы вызывают первое окно, подключаете потом к ним логику. Готово.

16 января 2018 г. 12:40

Спасибо всем. Все получилось. Прикручиваю логику.

Комментарии

Только авторизованные пользователи могут оставлять комментарии.
Пожалуйста, Авторизуйтесь или Зарегистрируйтесь
24 сентября 2018 г. 17:42
edorofeeva

C++ - Тест 001. Первая программа и типы данных

  • Результат 100баллов,
  • Очки рейтинга10
24 сентября 2018 г. 17:37
edorofeeva

C++ - Тест 001. Первая программа и типы данных

  • Результат 66баллов,
  • Очки рейтинга-1
23 сентября 2018 г. 14:38
No Names

C++ - Тест 001. Первая программа и типы данных

  • Результат 60баллов,
  • Очки рейтинга-1
Последние комментарии
24 сентября 2018 г. 15:09
Евгений Легоцкой

Qt Linux - Урок 001. Автозапуск Qt приложения под Linux

А вот здесь у меня есть пример использования supervisor. https://evileg.com/ru/post/3/ Вся статья вам там не интересна, интересен только шаг с настройкой supervisor. Он получается ...
24 сентября 2018 г. 15:00
avovana

Qt Linux - Урок 001. Автозапуск Qt приложения под Linux

Не могли бы дать ссылку на пример? Какое-то рабочее использование. Т.е. у меня есть Qt Gui App, которое я бы хотел запускать при старте системы и в случае, если оно грохнется. Если о чем Вы го...
24 сентября 2018 г. 14:55
Евгений Легоцкой

Qt Linux - Урок 001. Автозапуск Qt приложения под Linux

Если честно, то я не уверен, что это вообще можно реализовать через *.desktop файл. Я сделал предположение на основе того, что вы сказали про *.desktop и рестарт. Все варианты, котор...
24 сентября 2018 г. 14:47
avovana

Qt Linux - Урок 001. Автозапуск Qt приложения под Linux

Просто сейчас правлю сам файл example.desktop. Пытаюсь понять какую пару key=value мне нужно дописать.
24 сентября 2018 г. 14:42
Евгений Легоцкой

Qt Linux - Урок 001. Автозапуск Qt приложения под Linux

Ну я имел ввиду, что дописать в коде вот сюда то, о чём вы говорили про рестарт QString autorunContent("[Desktop Entry]\n" "Type=Application\n" ...
Сейчас обсуждают на форуме
24 сентября 2018 г. 16:47
Евгений_Канусовский@1981

Чтение файлов в python

Добрый вечер Евгений и форумчане! Столкнулся с проблемой чтения файлов в python: файлы с обычным текстом в формате las и txt читаются, например: ~Version information VERS.          ...
24 сентября 2018 г. 13:29
Евгений Легоцкой

Трансляция видео с помощью VLC по RTP

Добрый день! Я не сталкивался, но предположу, что нужно настроить Input Codec в VLC. В настройках есть секция Input Codec, возможно, что там установлено низкое разрешение. ...
21 сентября 2018 г. 8:25
Евгений Легоцкой

Прокси-модель, содержащая на 1 столбец больше, чем модель-источник.

Попробуйте ещё PySide 2 - это официально поддерживаемый пакет привязок Python к Qt, возможно, что там не будет таких проблем.
20 сентября 2018 г. 20:06
Евгений Легоцкой

Qt Installer Framework

Добрый день. Зачем собирать Qt Installer Framework-то из исходников? Я ещё понимаю Qt собирают из исходников статически (хотя тоже считаю по большей части бесполезной тратой времени),...
Присоединяйтесь к нам в социальных сетях