Накладні аркуші
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
}
}
}
