Диалоговые окна и меню

Работа с диалоговыми окнами и меню в интерфейсе

ConfirmDialog

Диалоговое окно для подтверждения действия имеет заголовок, описание и две кнопки — accept и reject.

title # заголовок 
description # описание 
acceptText # текст кнопки принять 
rejectText # текст кнопки отменить 
dangerous # стилизация для таких действий как Удаление и тп. 
string iconSource # можно установить иконку 
int iconSize # размер иконки 
Component body # для кастомизации диалога, кнопки остаются 
Component icon # для кастомизации иконки 
 
# доступ к кнопкам для кастомизации 
primaryButton 
secondaryButton 
 
signal accept 
signal reject

Пример

import QtQuick 2.15 
import QtQuick.Controls 2.15 
 
import RosaTheme 1.0 as Rosa 
import RosaControls 1.0 
 
Page { 
    id: root 
    title: "Init Page" 
 
    header: PageHeader { 
        title: root.title 
 
        contextMenu: ContextMenu { 
 
            ContextMenuItem { 
                text: "Delete" 
                icon.source: Rosa.Theme.icon('24/trash-color') 
                dangerous: true 
                onTriggered: { 
                    deleteConfirm.open() 
                } 
            } 
        } 
    } 
 
    ConfirmDialog { 
        id: deleteConfirm 
        title: "Delete item?" 
        description: "This action cannot be undone. Are you sure you want to delete this item?" 
        acceptText: "Delete" 
        rejectText: "Cancel" 
        dangerous: true 
     
        onAccept: { 
            //Do something 
        } 
    } 
 
... 
 
}

ContextMenu

Выпадающий список используется как для локального вызова, так и в PageHeader. Он применяет как Action, так и ContextMenuItem. ContextMenu наследуется от Menu и имеет минимальные отличия от него, используя ContextMenuItem в качестве делегата. Вызов меню осуществляется через функцию open().

Компонент ContextMenuItem поддерживает свойство visible. Также можно установить свойство dangerous для пунктов, требующих повышенного внимания (например, удаление данных).

Пример

import QtQuick 2.15 
import QtQuick.Controls 2.15 
 
import RosaTheme 1.0 as Rosa 
import RosaControls 1.0 
 
Page { 
    id: root 
    title: "Init Page" 
 
    header: PageHeader { 
        title: root.title 
 
        Action { 
            text: "Go to Simple Page" 
            onTriggered: { 
                applicationWindow().pushPage("qrc:/qml/SimplePage.qml", {title: "First Simple Page"}) 
            } 
        } 
 
        contextMenu: ContextMenu { 
 
            Action { 
                text: "Item 1" 
                onTriggered: { 
                    //Do something 
                } 
            } 
 
            ContextMenuItem { 
                text: "Item 2" 
                icon.source: Rosa.Theme.icon("24/search-dark") 
                onTriggered: { 
                    //Do something 
                } 
            } 
 
            ContextMenuItem { 
                text: "Delete" 
                icon.source: Rosa.Theme.icon('24/trash-color') 
                dangerous: true 
                visible: isItemsSelected 
                onTriggered: { 
                    //Do something 
                } 
            } 
        } 
    } 
 
... 
 
}

Drawer

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

title # текст заголовка 
textButton # текст кнопки 
showTopLine # отображает декоративную линию сверху 
topTitle # элемент заголовка 
closeButton # элемент нижней кнопки 
color backgroundColor # цвет фона

Пример

Контент Drawer размещается в ColumnLayout, поэтому для позиционирования компонентов нужно использовать Layout.property: val.

Button { 
    text: "Drawer open" 
    onClicked: drawer.open() 
} 
 
Drawer { 
    id: drawer 
    title: i18n("Drawer title") 
    textButton: i18n("Close") 
 
    onClosed: { 
        // Do something 
    } 
 
    ItemDelegate { 
        Layout.fillWidth: true 
        text: i18n("Item 1") 
    } 
 
    ItemDelegate { 
        Layout.fillWidth: true 
        text: i18n("Item 2") 
        showSeparator: false 
    } 
}

Toast

Всплывающее сообщение отображается снизу экрана и скрывается автоматически по таймеру или по клику пользователя.

property string text # текст сообщения 
property color textColor: dangerous ? Rosa.Theme.textColorError : Rosa.Theme.textColor 
property color backgroundColor: Rosa.Theme.bgColorPanel 
property bool dangerous: false # обычно используется для отображения ошибок 
property bool autohide: true # скрывать автоматически 
property int intervalHide: 3000 // ms # скрывать через N ms 
 
function showMessage(text, isError) # показывает всплывающее сообщение

Button { 
    text: i18n("Show toast") 
    onClicked: toast.showMessage("This is a toast") 
} 
 
Toast { 
    id: toast 
}