Как правильно управлять диалогами в QML: Singleton + JavaScript Promise

Почему управление диалогами в QML почти всегда сделано плохо

Уже не первый раз сталкиваюсь в проектах на Qt QML с проблемой управления диалогами и всплывающими окнами.

QML — декларативный язык и это здорово! Мы описываем, что хотим видеть на экране, и, если всё сделали правильно, при запуске программы получаем желаемый результат.

Но иногда хочется динамики — и именно с диалогами начинаются проблемы, которые все решают по-разному. Кто-то продолжает так же декларативно описывать диалог для очередного экрана приложения. Да, так можно поступить, но у этого подхода есть несколько проблем.

Первая — код начинает разрастаться. Даже если вынести диалог в отдельный компонент, его всё равно придётся «тюнить» каждый раз перед отображением, что не очень удобно.

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

Другой вариант, который тоже часто встречается — это обёртка диалога в Component и его непосредственное создание в нужный момент. С точки зрения потребления памяти это уже лучше, но проблему лишнего кода это не решает. Зачастую из-за подготовки такого диалога кода может оказаться даже больше. К тому же нужно не забывать вызывать destroy() для всех динамически созданных объектов, когда они больше не нужны.

Всё становится ещё хуже, если один и тот же диалог нужен в нескольких местах. В большинстве случаев люди либо не парятся, либо им просто некогда — и в итоге мы видим обычную копипасту тут и там.

Я хочу предложить совсем другой вариант — более простой и удобный.

Singleton + JavaScript Promise

Я хочу предложить совсем другой вариант, который проще и удобнее: это связка QML Singleton и JavaScript Promise.

Создаем Singleton от QtObject и добавляем в него readonly property Component, в котором будет находится экземпляр нашего диалога, и который мы будем создавать только тогда, когда он нам действительно нужен. В качестве диалога я выбрал стандартный Dialog из модуля QtQuick.Controls. Быстрый и простой вариант выглядит так:

readonly property Component instancer: Component {
    Dialog {
        id: dlg
        anchors.centerIn: Overlay.overlay
        property variant context: null
        property string text: ""
        modal: true
        standardButtons: Dialog.Yes | Dialog.No
        closePolicy: Dialog.CloseOnEscape | Dialog.CloseOnPressOutside
        // Действия по кнопке сбросят контекст, чтобы не было повторного вызова
        // reject при закрытии диалога
        onAccepted: { context?.accept?.(); context = null; }
        onRejected: { context?.reject?.(); context = null; }
        Label { width: parent.width; text: dlg.text; visible: text }
    }
}

Здесь в качестве свойства context выступает обычный Object из JavaScript, в котором два свойства: accept и reject. Оба этих свойства — функции, которые связаны с нашим Promise.

Теперь добавим в наш Singleton функцию, которая будет показывать диалог и возвращать Promise:

function open(options, parent) {
    return new Promise((resolve, reject) => {
        const context = Object.freeze({
            accept: resolve,
            reject: reject,
        });
        options.context = context;
        const dialog = root.instancer.createObject(parent, options);
        dialog.closed.connect(() => {
            dialog.context?.reject?.();
            dialog.destroy();
        });
        dialog.open();
    });
}

Тут мы как раз создаем наш context, который передается в диалог и вызывает accept если пользователь подтверждает действие, либо reject в противном случае.

Дальше создаем наш диалог из компонента и подписываемся на его событие закрытия, чтобы вызвать destroy и освободить память. Здесь так же может вызваться reject, но только в том случае, если пользователь закрыл диалог не по кнопке, а, например, нажал ESC на клавиатуре.

Собственно, на этом все — нашим Singleton теперь можно пользоваться. Например вот так, по нажатию на кнопку:

Button {
    text: "Confirm"
    onClicked: {
        ConfirmDialog.open({
            title: "Dialog title",
            text: "Dialog body text",
        }, root)
        .then(() => console.log("Accepted"))
        .catch(() => console.log("Rejected"));
    }
}

Не забываем только добавить pragma Singleton в начало файла нашего Singleton и правильно зарегистрировать его в CMake:

set_source_files_properties(
    qml/ConfirmDialog.qml
    PROPERTIES
        QT_QML_SINGLETON_TYPE TRUE
)