Встроенные сообщения

Показ сообщений, связанных с содержимым приложения

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

Простое встроенное сообщение

У компонентов Kirigami.InlineMessage есть два важных свойства, которые следует учитывать:

visible: по умолчанию для него задано значение false, поэтому сообщение показывается только тогда, когда это явно требуется. Это можно изменить, присвоив ему значение true. Когда скрытое встроенное сообщение становится видимым, воспроизводится приятная анимация.
text: здесь задаётся текст встроенного сообщения.

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.Page {

    ColumnLayout {
        Kirigami.InlineMessage {
            id: inlineMessage
            Layout.fillWidth: true
            text: "Hello! I am a siiiiiiimple lil' inline message!"
        }

        Controls.Button {
            text: "Show inline message!"
            onClicked: inlineMessage.visible = !inlineMessage.visible
        }
    }
}

Окно с кнопкой, при нажатии на которую в верхней части приложения появляется встроенное сообщение со светло-синим фоном и текстом над ним

Различные типы

Обычные встроенные сообщения похожи на приведённые выше: у них синий фон и значок по умолчанию. Это можно изменить с помощью свойства type, которое позволяет задать другой тип встроенного сообщения. Доступны четыре типа:

Информация (Kirigami.MessageType.Information): используется по умолчанию. Имеет синий фон, значок «i» и служит для сообщения о результате или передачи пользователю общих сведений. Задавать его вручную не требуется.
Положительное (Kirigami.MessageType.Positive): имеет зелёный фон и значок галочки, и указывает, что всё прошло хорошо.
Предупреждение (Kirigami.MessageType.Warning): имеет оранжевый фон, значок с восклицательным знаком и позволяет предупредить пользователя о том, на что следует обратить внимание.
Ошибка (Kirigami.MessageType.Error): имеет красный фон, значок с крестом и позволяет сообщить пользователю о том, что что-то пошло не так.

ColumnLayout {

    Kirigami.InlineMessage {
        Layout.fillWidth: true
        text: "Hello! Let me tell you something interesting!"
        visible: true
    }

    Kirigami.InlineMessage {
        Layout.fillWidth: true
        text: "Hey! Let me tell you something positive!"
        type: Kirigami.MessageType.Positive
        visible: true
    }

    Kirigami.InlineMessage {
        Layout.fillWidth: true
        text: "Hmm... You should keep this in mind!"
        type: Kirigami.MessageType.Warning
        visible: true
    }
    
    Kirigami.InlineMessage {
        Layout.fillWidth: true
        text: "Argh!!! Something went wrong!!"
        type: Kirigami.MessageType.Error
        visible: true
    }

}

Окно со всеми четырьмя типами встроенных сообщений синего, зелёного, оранжевого и красного цвета

Настройка текста и значков

Встроенные сообщения поддерживают форматированный текст, который можно задать с помощью простой разметки в стиле HTML. Это позволяет добавить форматирование к тексту встроенного сообщения или даже, при желании, включить внешнюю веб-ссылку.

Kirigami.InlineMessage {
    Layout.fillWidth: true
    // Примечание: если в строке используются кавычки, их придётся экранировать!
    text: "Check out <a href=\"https://kde.org\">KDE's website!<a/>"
    onLinkActivated: Qt.openUrlExternally(link)
    visible: true
}

Встроенное сообщение с форматированным текстом и гиперссылкой

Значок, показываемый в левом верхнем углу сообщения, можно также настроить, указав имя общесистемного значка для свойства icon.source. Эти имена значков должны соответствовать значкам, установленным в системе; чтобы просмотреть и найти доступные в системе значки и узнать их имена, можно воспользоваться таким приложением, как Cuttlefish из состава plasma-sdk.

Kirigami.InlineMessage {
    Layout.fillWidth: true
    text: "Look at me! I look SPECIAL!"
    icon.source: "actor"
    visible: true
}

Использование действий во встроенных сообщениях

Если встроенные сообщения должны быть интерактивными, к ним можно прикрепить действия Kirigami. Как и со страницами, это делается присвоением свойству InlineMessage.actions значения Kirigami.Action либо массива, содержащего компоненты Kirigami.Action.

ColumnLayout {

    Kirigami.InlineMessage {
        id: actionsMessage
        Layout.fillWidth: true
        visible: true

        readonly property string initialText: "Something is hiding around here..."
        text: initialText

        actions: [
            Kirigami.Action {
                enabled: actionsMessage.text == actionsMessage.initialText
                text: qsTr("Add text")
                icon.name: "list-add"
                onTriggered: {
                    actionsMessage.text = actionsMessage.initialText + " Peekaboo!";
                }
            },
            Kirigami.Action {
                enabled: actionsMessage.text != actionsMessage.initialText
                text: qsTr("Reset text")
                icon.name: "list-remove"
                onTriggered: actionsMessage.text = actionsMessage.initialText
            }
        ]
    }
}

Кнопки закрытия

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

По умолчанию эта кнопка закрытия скрыта, но это можно изменить, присвоив свойству showCloseButton значение true.

Kirigami.InlineMessage {
    Layout.fillWidth: true
    text: "Please don't dismiss me..."
    showCloseButton: true
    visible: true
}

Встроенное сообщение с кнопкой закрытия справа

Компоновки форм

Панели действий