Skip to main content
Перейти к содержимому
Редактировать эту страницу See source code Создать задачу по документации Formatting guidelines Style guidelines

Элементы управления и интерактивные элементы

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

Kirigami использует широкий выбор различных интерактивных элементов Qt, которые можно применять в приложениях. У каждого типа немного различаются стили взаимодействия, визуальные стили и функциональность. Использование подходящего типа элемента управления в приложении помогает сделать пользовательский интерфейс более отзывчивым и интуитивно понятным.

Кнопки

В приложениях Kirigami используется Button из QtQuick Controls. Работа с ними довольно проста: задаётся свойство text, а действие, которое должно выполняться, задаётся свойством onClicked.

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

Kirigami.ApplicationWindow {
    title: "Controls.Button"
    width: 400
    height: 400
    pageStack.initialPage: Kirigami.Page {
        ColumnLayout {
            anchors.fill: parent
            Controls.Button {
                Layout.alignment: Qt.AlignCenter
                text: "Beep!"
                onClicked: showPassiveNotification("Boop!")
            }
        }
    }
}

Окно с кнопкой «Beep» в центре, при нажатии на которую в нижней части окна показывается пассивное уведомление «Boop»

Переключаемые кнопки

Поведение кнопок можно изменить, сделав их переключаемыми: в этом режиме они остаются нажатыми, пока по ним не щёлкнуть ещё раз. Этот режим включается присвоением свойству checkable значения true; кнопки можно также включить по умолчанию, присвоив свойству checked значение true.

Наиболее полно использовать переключаемые кнопки позволяет обработчик сигнала onCheckedChanged, который создаётся автоматически из сигнала checked. Он работает аналогично onClicked, но назначенное действие выполняется при изменении состояния кнопки. Это логическое свойство, которое пригодится в отдельных случаях.

В этом примере видимость встроенной выдвижной панели задаётся в зависимости от состояния переключаемой кнопки:

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

Kirigami.ApplicationWindow {
    title: "Controls.Button (toggleable version)"
    width: 400
    height: 400
    pageStack.initialPage: Kirigami.Page {
        ColumnLayout {
            anchors.fill: parent
            Controls.Button {
                Layout.alignment: Qt.AlignCenter
                text: "Hide inline drawer"
                checkable: true
                checked: true
                onCheckedChanged: myDrawer.visible = checked
            }

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

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

Окно с переключаемой кнопкой «Скрыть встроенную панель» в центре, которая при переключении скрывает встроенную панель «Peekaboo»

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

Существует особый тип кнопок, предназначенный для использования на панелях инструментов, — Controls.ToolButton. Наиболее очевидное отличие от обычной Button — оформление, причём кнопки панели инструментов плоские (хотя это можно изменить логическим свойством flat).

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

Kirigami.ApplicationWindow {
    title: "Controls.ToolButton"
    width: 600
    height: 600

    header: Controls.ToolBar {
        RowLayout {
            anchors.fill: parent
            Controls.ToolButton {
                icon.name: "application-menu-symbolic"
                onClicked: showPassiveNotification("Kirigami Pages and Actions are better!")
            }
            Controls.Label {
                text: "Global ToolBar"
                horizontalAlignment: Qt.AlignHCenter
                verticalAlignment: Qt.AlignVCenter
                Layout.fillWidth: true
            }
            Controls.ToolButton {
                text: "Beep!"
                onClicked: showPassiveNotification("ToolButton boop!")
            }
        }
    }
}

Окно с настраиваемой панелью инструментов в заголовке окна, имитирующей Kirigami.globalToolBar, со значком меню слева, который показывает пассивное уведомление «Страницы и действия Kirigami лучше!», и с кнопкой инструментов «Beep» справа, полностью плоской, имитирующей Kirigami.Action

Элементы выбора

Элементы выбора позволяют сделать выбор или указать параметр. Разные типы лучше всего подходят для разных ситуаций.

Флажки

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

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

Kirigami.ApplicationWindow {
    title: "Controls.CheckBox"
    width: 400
    height: 400
    pageStack.initialPage: Kirigami.Page {
        ColumnLayout {
            anchors.left: parent.left
            anchors.right: parent.right
            Controls.CheckBox {
                Layout.alignment: Qt.AlignHCenter
                text: "This checkbox is checked!"
                checked: true
            }
            Controls.CheckBox {
                Layout.alignment: Qt.AlignHCenter
                text: "This checkbox is not checked!"
                checked: false
            }
        }
    }
}

Окно с двумя флажками, в котором можно отметить более одного флажка одновременно

Как видно, пользоваться ими просто. Свойство checked хранит логическое значение, определяющее, включены ли они.

Радиокнопки

Controls.RadioButton предназначен для ситуаций, когда требуется выбрать один вариант из нескольких.

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

Как и флажки, их можно по умолчанию включить или выключить с помощью свойства checked.

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

Kirigami.ApplicationWindow {
    title: "Controls.RadioButton"
    width: 400
    height: 400
    pageStack.initialPage: Kirigami.Page {

        ColumnLayout {
            anchors.left: parent.left
            anchors.right: parent.right
            Controls.RadioButton {
                Layout.alignment: Qt.AlignCenter
                text: "Tick!"
                checked: true
            }
            Controls.RadioButton {
                Layout.alignment: Qt.AlignCenter
                text: "Tock!"
                checked: false
            }
        }
    }
}

Окно с двумя радиокнопками, из которых одновременно можно отметить только одна

Переключатели

На настольном компьютере для изменения параметров обычно требуется изменить параметр, а затем применить его нажатием кнопки «Применить» или «ОК». На мобильных устройствах вместо этого можно использовать Controls.Switch.

Переключатели можно переключать между включённым и выключенным состояниями. Переключить их можно щелчком или касанием, а также перетаскиванием в положение «включено» или «выключено». Как и раньше, с помощью свойства checked можно сделать переключатели включёнными или выключенными по умолчанию.

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

Kirigami.ApplicationWindow {
    title: "Controls.Switch"
    width: 400
    height: 400
    pageStack.initialPage: Kirigami.Page {
        ColumnLayout {
            anchors.fill: parent
            Controls.Switch {
                Layout.alignment: Qt.AlignCenter
                text: "Switchy"
                checked: true
            }
            Controls.Switch {
                Layout.alignment: Qt.AlignCenter
                text: "Swootchy"
                checked: false
            }
        }
    }
}

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

Ползунки

Ползунки позволяют выбирать определённые значения, перемещая ручку по дорожке. Существует несколько типов, из которых можно выбрать подходящий в зависимости от значений, которые должны выбирать пользователи в приложении.

Стандартные ползунки и ползунки с отметками

Стандартный Controls.Slider позволяет очень точно управлять выбором нужного значения.

В режиме «Слева направо» ползунки в горизонтальной ориентации перемещаются слева направо для увеличения значения, а в режиме «Справа налево» — в обратном направлении. В обоих режимах ползунки в вертикальной ориентации перемещаются снизу вверх.

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

Следует обратить внимание на несколько важных свойств ползунков:

  • value: содержит значение, на котором расположена ручка; его также можно задать вручную, чтобы указать начальное значение по умолчанию
  • to: определяет диапазон ползунка, задавая максимальное значение, до которого он может доходить
  • orientation: позволяет задать вертикальную ориентацию ползунка с помощью Qt.Vertical
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Controls.Slider"
    width: 400
    height: 400
    pageStack.initialPage: Kirigami.Page {
        ColumnLayout {
            anchors.fill: parent
            Controls.Slider {
                id: normalSlider
                Layout.alignment: Qt.AlignHCenter
                Layout.fillHeight: true
                orientation: Qt.Vertical
                value: 60
                to: 100
            }
            Controls.Label {
                Layout.alignment: Qt.AlignHCenter
                text: Math.round(normalSlider.value)
            }
        }
    }
}

Окно с вертикальным ползунком, под которым показано его текущее значение

Ещё одно полезное свойство — stepSize. Присвоение ему числового значения позволяет создать ползунок, который привязывается к значениям, кратным указанному stepSize, причём эти кратные значения отмечаются делениями. Так, если присвоить этому свойству значение 2.0, то при перетаскивании ручки ползунка можно будет выбрать только 0.0, 2.0, 4.0 и т. д. вплоть до значения, указанного в свойстве to.

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

Kirigami.ApplicationWindow {
    title: "Controls.Slider (with steps)"
    width: 400
    height: 400
    pageStack.initialPage: Kirigami.Page {
        ColumnLayout {
            anchors.fill: parent
            Controls.Slider {
                id: tickmarkedSlider
                Layout.alignment: Qt.AlignHCenter
                Layout.fillWidth: true
                orientation: Qt.Horizontal
                snapMode: Controls.Slider.SnapAlways
                value: 6.0
                to: 10.0
                stepSize: 2.0
            }
            Controls.Label {
                Layout.alignment: Qt.AlignHCenter
                text: tickmarkedSlider.value
            }
        }
    }
}

Окно с набором симметрично разделённых ползунков с отметками, где каждое деление называется шагом

Ползунки диапазона

QtQuick Controls также предоставляет Controls.RangeSliders. У них две ручки, что позволяет задать диапазон чисел между ними.

Следует помнить о двух новых свойствах: first.value и second.value, которые хранят значения двух ручек. Как и свойство value стандартных ползунков, их можно задать заранее.

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

Kirigami.ApplicationWindow {
    title: "Controls.RangeSlider"
    width: 400
    height: 400
    pageStack.initialPage: Kirigami.Page {
        ColumnLayout {
            anchors.fill: parent
            Controls.RangeSlider {
                id: rangeSlider
                Layout.alignment: Qt.AlignHCenter
                to: 10.0
                first.value: 2.0
                second.value: 8.0
                stepSize: 1.0
                snapMode: Controls.Slider.SnapAlways
            }
            RowLayout {
                Layout.alignment: Qt.AlignHCenter
                Layout.fillWidth: true
                Controls.Label {
                    Layout.fillWidth: true
                    text: "The slider's first value is: " + Math.round(rangeSlider.first.value)
                }
                Controls.Label {
                    Layout.fillWidth: true
                    text: "The slider's second value is: " + Math.round(rangeSlider.second.value)
                }
            }
            Controls.Label {
                Layout.alignment: Qt.AlignHCenter
                font.bold: true
                text: "Is the selected range between 2 and 8?"
            }
            Controls.Button {
                Layout.alignment: Qt.AlignHCenter
                icon.name: {
                    if (rangeSlider.first.value >= 2 && rangeSlider.second.value <= 8)
                        return "emblem-checked"
                    else
                        return "emblem-error"
                }
            }
        }
    }
}

Окно с ползунком диапазона, под которым расположено несколько меток, и кнопкой со значком галочки

Previous
Типы диалогов
Next
Компоновки форм