Накладні аркуші

Kirigami.OverlaySheet є простим компонентом, яким ви можете скористатися для надання даних, які буде показано на сторінці програми. Їх розроблено для показу довгих вертикальних даних, і вони можуть накопичувати дані довші, ніж саме вікно програми.

Їх можна закривати клацанням або торканням поза областю накладки, а також клацанням на піктограмі «x» у заголовку аркуша.

Знайомимося із аркушем

Щоб скористатися аркушем-накладкою, вам слід створити його на сторінці Kirigami, на якій він має з'явитися.

import QtQuick 2.15
import QtQuick.Controls 2.15 as Controls
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20 as Kirigami

Kirigami.Page {
    id: page
    Layout.fillWidth: true

    Kirigami.OverlaySheet {
        id: mySheet
        Controls.Label {
            Layout.fillWidth: true
            wrapMode: Text.WordWrap
            text: "Weeeeee, overlay sheet!"
        }
    }
}

У аркушах-накладках передбачено методи, якими можна скористатися для відкриття ( open() ) або закриття ( close() ) цих аркушів на вимогу. Типово, аркуші-накладки приховано, отже, принаймні, нам потрібно буде скористатися методом open().

Controls.Button {
    text: "Open mySheet"
    onClicked: mySheet.open()
}

У відкритому стані цей аркуш-накладку буде показано центрованим вертикально і горизонтально на його батьківській сторінці. Горизонтально його буде обмежено його батьківським елементом, навіть якщо ширина його вмісту перевищуватиме ширину батьківського елемента. Якщо вертикальна довжина аркуша перевищує вертикальну довжину батьківського елемента, аркуш буде показано з його верхньої позиції і буде передбачено гортання.

Загальний аркуш

Якщо вам потрібно показати аркуш як загальний — такий, що вкриває усю ширину вікна програми, незалежно від сторінки, дочірнім елементом якої він є — слід змінити батьківський елемент нашого аркуша-накладки на властивість накладки вікна програми. Зробити це можна за допомогою властивості parent.

Kirigami.OverlaySheet {
    id: mySheet

    parent: applicationWindow().overlay

    Controls.Label {
        Layout.fillWidth: true
        wrapMode: Text.WordWrap
        text: "Weeeeee, overlay sheet!"
    }
}

Фіксований розмір

Аркуш є жадібним і захоплюватиме максимальну можливу ширину на сторінці, якщо у цьому виникне потреба. Уникнути цього можна заданням властивості implicitWidth або властивості Layout.preferredWidth](https://doc.qt.io/qt-6/qml-qtquick-layouts-layout.html#preferredWidth-attached-prop) для його дочірніх елементів. Таким чином буде обмежено можливості зі зростання ширини аркуша.

Kirigami.OverlaySheet {
    id: mySheet
    Controls.Label {
        Layout.preferredWidth: Kirigami.Units.gridUnit * 25
        wrapMode: Text.WordWrap
        text: "Weeeeee, overlay sheet! I'm so excited!! WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE!!!!!"
    }
}

Шапки і підвали

Типові аркуші-накладки містять header , на якій розташовано лише кнопку для закриття аркуша-накладки. Мона додати Kirigami.Heading як заголовок до шапки аркуша, щоб спростити розуміння користувачами призначення аркуша. Зробити це можна за допомогою встановлення відповідного значення властивості header — слід пов'язати із нею компонент шапки Kirigami.

Kirigami.OverlaySheet {
    id: mySheet

    header: Kirigami.Heading {
        text: "My Overlay Sheet"
    }

    Controls.Label {
        Layout.fillWidth: true
        wrapMode: Text.WordWrap
        text: "Weeeeee, overlay sheet!"
    }
}

Ми також можемо надати нашому аркушу-накладці підвал або нижній колонтитул. Підвали у аркушах-накладках є доволі гнучкими елементами, але часто їх використовують для надання аркушам-накладкам певної можливості швидкого інтерактивного надання даних, подібного до того, який надають модальні діалогові вікна (наприклад кнопок для дій «Застосувати», «Гаразд», «Скасувати» тощо)

Підвали можна налаштувати майже у той самий спосіб, що і шапки:

Kirigami.OverlaySheet {
    id: mySheet

    header: Kirigami.Heading {
        text: "My Overlay Sheet"
    }

    footer: Controls.DialogButtonBox {
        standardButtons: DialogButtonBox.Close
        onRejected: mySheet.close()
    }

    Controls.Label {
        Layout.fillWidth: true
        wrapMode: Text.WordWrap
        text: "Weeeeee, overlay sheet!"
    }
}

Користування панелями делегата і моделі

Оскільки аркуші-накладки було розроблено для вертикального показу вмісту, вони можуть бути особливо корисними при використанні у поєднанні із компонентами, подібними до панелей списків . При показі вмісту, який є довшим за вікно програми, на аркушах-накладках з'являється смужка гортання:

Kirigami.OverlaySheet {
    id: mySheet

    ListView {
        model: 100
        implicitWidth: Kirigami.Units.gridUnit * 30
        delegate: Kirigami.BasicListItem {
            label: "Item in sheet " + modelData
        }
    }
}