Ovládacie prvky a interaktívne elementy

Urobte vaše aplikácie interaktívnejšie pomocou tlačidiel, ovládacích prvkov výberu, posuvníkov a textových polí.

Kirigami využíva širokú paletu rôznych interaktívnych prvkov z Qt, ktoré môžete použiť vo svojich aplikáciách. Každý typ má mierne odlišné interaktívne štýly, vizuálne štýly a funkčnosť. Použitie správneho typu ovládacieho prvku vo vašej aplikácii môže pomôcť urobiť vaše používateľské rozhranie responzívnejším a intuitívnejším.

Tlačidlá

V aplikáciách Kirigami používame Button z QtQuick Controls. Ich použitie je pomerne jednoduché: nastavíme vlastnosť text a akúkoľvek akciu, ktorú chceme vykonať, nastavíme do vlastnosti 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!")
            }
        }
    }
}

A window containing a button "Beep" in the center, which when clicked shows a passive notification "Boop" at the bottom of the window

Prepínače

Volanie KIconTheme::initTheme() musí byť vykonané pred vytvorením QApplication a umožňuje aplikácii nájsť ikony Breeze na použitie. Nastavenie QStyle na Breeze je potrebné, pretože sme použili QApplication pre našu aplikáciu namiesto QGuiApplication. Skutočné ovládacie prvky rozhrania v okne ako tlačidlá a zaškrtávacie políčka budú nasledovať Breeze pomocou qqc2-desktop-style.

QQmlApplicationEngine nám umožňuje načítať aplikáciu zo súboru QML, čo urobíme na ďalšom riadku. V engine.loadFromModule("org.kde.tutorial", "Main"); načítame náš QML z importu URI definovaného v CMake.

Ďalej skontrolujeme, či náš engine správne načítal súbor QML kontrolou, že zoznam rootObjects() enginu nie je prázdny. Potom môžeme spustiť našu aplikáciu pomocou app.exec().

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!"
                }
            }
        }
    }
}

A window containing a toggleable button "Hide inline drawer" in the center which when toggled hides the "Peekaboo" inline drawer

Poznámka

V našom úvodnom tutoriáli sme použili CMake ako zostavovací systém pre našu aplikáciu, ale skutočne sme venovali pozornosť iba jednému z našich súborov CMakeLists.txt. Tu si podrobnejšie prejdeme, ako funguje.

Prepínače

CMake je užitočný, pretože nám umožňuje automatizovať väčšinu vecí, ktoré sa musia urobiť pred kompiláciou.

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!")
            }
        }
    }
}

A window showing a custom toolbar in the window header simulating a Kirigami.globalToolBar, with a left menu icon that shows a passive notification "Kirigami Pages and Actions are better!" and a right toolbutton "Beep" which is completely flat simulating a Kirigami.Action

Ovládače výberu

Možno si pamätáte tento súbor CMakeLists.txt z prvého tutoriálu:

Zaškrtávacie políčka

Prvý riadok cmake_minimum_required() nastavuje verziu CMake, ktorú budeme volať.

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
            }
        }
    }
}

A window showing two checkboxes where more than one checkbox can be ticked at the same time

Potom project(kirigami-tutorial) definuje názov projektu.

Prepínače

Potom sa dostaneme k sekcii, kde zahrnieme niekoľko nevyhnutných nastavení CMake a KDE pomocou extra-cmake-modules. Poskytujú sadu užitočných nástrojov:

KDEInstallDirs poskytuje praktické premenné ako ${KDE_INSTALL_TARGETS_DEFAULT_ARGS}, ${KDE_INSTALL_QMLDIR}, ${KDE_INSTALL_BINDIR} a ${KDE_INSTALL_LIBDIR}.

KDECMakeSettings poskytuje veci ako CMAKE_AUTORCC ON, cieľ uninstall, ktorý sa dá použiť s cmake --build build/ --target uninstall, a ENABLE_CLAZY.

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
            }
        }
    }
}

A window showing two radio buttons where only one radio button can be ticked at the same time

Prepínače

KDECompilerSettings poskytuje minimálny štandard C++, príznaky kompilátora ako -pedantic a makrá osvedčených postupov ako -DQT_NO_CAST_FROM_ASCII vyžadujúce explicitné konverzie ako QStringLiteral().

ECMFindQmlModule poskytuje spôsob, ako zabezpečiť, že runtime závislosť QML sa nájde v čase kompilácie.

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
            }
        }
    }
}

A window showing two evenly-spaced switches that function as toggles

Posuvníky

ECMQmlModule poskytuje príkazy CMake ako ecm_add_qml_module() a ecm_target_qml_sources().

Štandardné posuvníky a posuvníky so značkami

Nasledujúca sekcia je dôležitá, pretože určuje, aké závislosti privedieme v čase kompilácie. Pozrime sa na prvú:

find_package() nájde a načíta externú knižnicu a jej komponenty.

REQUIRED povie CMake, aby skončil s chybou, ak balík nemožno nájsť.

COMPONENTS je parameter, ktorý predchádza konkrétnym komponentom frameworku, ktoré zahrnieme.

Každé slovo za COMPONENTS odkazuje na konkrétny komponent knižnice.
Ak chcete do vašej aplikácie pridať akékoľvek komponenty uvedené v dokumentácii KDE API, môžete skontrolovať pravý bočný panel, ako pridať komponent pomocou CMake. Napríklad pre Kirigami nájdete niečo ako find_package(KF6Kirigami), čo s pridaním ECM vyzerá takto:
Venujte veľkú pozornosť zahrnutým komponentom, pretože vynechanie tých, ktoré sa používajú v našom kóde, zastaví kompiláciu našej aplikácie.

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)
            }
        }
    }
}

A window showing a vertical slider with its current value underneath it

Riadok install inštruuje CMake na inštaláciu súboru desktop do ${KDE_INSTALL_APPDIR}, čo sa na Linuxe prekladá na $XDG_DATA_DIRS/applications, zvyčajne /usr/share/applications, a na Windows sa prekladá na C:/Program Files/${PROJECT_NAME}/bin/data/applications:

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
            }
        }
    }
}

A window showing a set of tickmarked sliders that are symmetrically divided, with each division being called a step

Posuvníky

Posledný riadok umožňuje CMake vypísať, aké balíky našiel, a spôsobí okamžité zlyhanie kompilácie, ak narazí na chybu:

A nad tým add_subdirectory(src) nasmeruje CMake do priečinka src/, kde nájde ďalší súbor CMakeLists.txt.

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"
                }
            }
        }
    }
}

A window showing a range slider, followed by a few labels underneath and a button with a checkmark icon

Typy dialógov

Rozloženia