Керування і інтерактивні елементи

Kirigami пропонує вам широкий діапазон різних інтерактивних елементів, якими ви можете скористатися у ваших програмах. Різні типи мають дещо різні стилі взаємодії, візуальні стилі та функціональні можливості. Використання належного типу засобу керування у вашій програмі може допомогти зробити інтерфейс користувача зручнішим та інтуїтивно зрозумілішим.

Кнопки

У програмах Kirigami ми використовуємо кнопки з QtQuick Controls. Користування кнопками є доволі простим: ми призначаємо фрагмент тексту для властивості text, усі дії, які слід виконати вписуємо у властивість onClicked .

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

Kirigami.Page {

    Controls.Button {
        text: "Beep!"
        onClicked: showPassiveNotification("Boop!")
    }

}

Кнопки-перемикачі

Змінити поведінку кнопок можна зробивши їх кнопками-перемикачами: у цьому режимі вони лишатимуться натиснутими, аж доки їх не буде натиснуто ще раз. Цей режим можна активувати встановленням для властивості checkable значення true; ми можемо також зробити кнопки типово перемкнутими встановленням для властивості checked значення true.

Отримати максимум від кнопок-перемикачів можна за допомогою обробника сигналу onCheckedChanged, який буде автоматично створено з сигналу checked. Вона працює подібно до onClicked, але тут пов'язану дію буде виконано, коли змінюється стан кнопки. Це булева властивість, яка може бути надзвичайно зручною у певних випадках.

У цьому прикладі ми встановлюємо видимість вбудованої панелі за станом кнопки-перемикача:

Controls.Button {
    text: "Toggle!!"
    checkable: true
    checked: true
    onCheckedChanged: myDrawer.visible = checked
}

Kirigami.OverlayDrawer {
    id: myDrawer
    edge: Qt.BottomEdge
    modal: false

    contentItem: Controls.Label {
        text: "Peekaboo!"
    }
}

Кнопки панелі інструментів

Існує специфічний тип кнопок, який призначено для використання на панелях користувачів, Controls.ToolButton . Найочевиднішою відмінністю між цією кнопкою і звичайною кнопкою є стилізація — кнопки інструментів плоскі (хоча це і можна змінити за допомогою булевої властивості flat).

Controls.ToolButton {
    text: "Tool beep..."
    onClicked: showPassiveNotification("Tool boop!")
}

Засоби позначення

За допомогою засобів позначення користувачі можуть зробити вибір або вибрати певний варіант. Існують різні типи, які пристосовано до різних ситуацій.

Позначки

Controls.CheckBox призначено для випадків, коли вибір не є взаємовиключним, а кожний пункт має чітку альтернативу.

Controls.CheckBox {
    text: "Beep!"
    checked: true
}
Controls.CheckBox {
    text: "Boop!"
    checked: false
}

Як можна бачити, ними просто користуватися. Властивість checked містить булеве значення, що визначає, чи було пункт позначено.

Кнопки варіантів

Controls.RadioButton призначено для випадків, коли користувач має вибрати варіант із набору з декількох варіантів.

Кнопки варіантів є типово взаємно виключними: одночасно у батьківському елементі може бути позначено лише одну кнопку.

Подібно до кнопок-позначок, для них можна типово встановити стан позначеності або непозначеності за допомогою властивості checked.

ColumnLayout {
    Controls.RadioButton {
        text: "Tick!"
        checked: true
    }
    Controls.RadioButton {
        text: "Tock!"
        checked: false
    }
}

Перемикачі

На звичайному комп'ютері зміна параметрів, зазвичай, включає зміну параметра, а потім застосування параметра натисканням кнопки «Застосувати» або «Гаразд». На мобільному пристрої ми можемо замість цих кнопок можна скористатися Controls.Switch .

Перемикачі можна перемикати між увімкненим і вимкненим станами. Їх можна натискати або торкатися їх, їх можна також перетягувати між позиціями «увімкнено» і «вимкнено». Знову ж таки, типово для перемикачів можна встановлювати стани «увімкнено» і «вимкнено» за допомогою властивості checked.

Controls.Switch {
    text: "Switchy"
    checked: true
}
Controls.Switch {
    text: "Swootchy"
    checked: false
}

Повзунки

За допомогою повзунків користувачі можуть вибрати певні значення перетягуванням елемента керування уздовж доріжки. Маємо декілька типів, один з яких ви можете вибрати, залежно від значень, які користувачі мають вибирати у вашій програмі.

Стандартні повзунки і повзунки із позначками

За допомогою стандартного Controls.Slider користувач може точно вказати вибране значення.

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

Розфарбовування є візуальним індикатором того, наскільки великим є вибране значення.

У повзунків декілька важливих властивостей, на які слід звернути увагу:

• value: містить значення, на якому розташовано повзунок, і яке може бути встановлено вручну для надання типового початкового значення
• to: визначає діапазон повзунка, вказуючи максимальне значення, до якого його можна пересунути
• orientation: надає змогу встановлювати вертикальну орієнтацію повзунка за допомогою Qt.Vertical

Controls.Slider {
    id: normalSlider
    orientation: Qt.Vertical
    value: 5.0
    to: 10.0
}

Ще однією корисною властивістю є stepSize. Встановлення для цієї властивості числового значення надає нам змогу створити повзунок, який прилипатиме до значень, кратних до вказаного значення stepSize, а самі ці кратні значення вказуються позначками на лінії руху повзунка. Отже, якщо ми встановимо для властивості значення 2.0, коли користувач перетягуватиме повзунок, він зможе вибрати лише значення 0.0, 2.0, 4.0 тощо, аж до значення, яке вказано за допомогою властивості to.

Controls.Slider {
    id: tickmarkedSlider
    value: 6.0
    to: 10.0
    stepSize: 2.0
}

Повзунки із діапазоном

До складу QtQuick Controls включено також Controls.RangeSliders . Такі повзунки мають два елементи керування, отже надає вам змогу визначити діапазон чисел між цими двома елементами керування.

Слід звернути увагу на дві нові властивості: first.value і second.value, у яких зберігаються значення для двох елементів керування. Подібно до властивості value стандартних повзунків, ці значення цих властивостей можна вказати наперед.

Controls.RangeSlider {
    id: rangeSlider
    to: 10.0
    first.value: 3.0
    second.value: 6.0
}

Ми також можемо додати на лінію повзунка позначки встановленням для властивості stepSize числового значення у точно такий самий спосіб, що і для стандартного повзунка.

Controls.RangeSlider {
    id: rangeTickmarkedSlider
    to: 10.0
    first.value: 4.0
    second.value: 6.0
    stepSize: 2.0
}