Rzeczy sterujące i z którym można oddziaływać

Kirigami daje szeroki wybór różnych rzeczy, które umożliwiają oddziaływanie z twoją aplikacją. Każda rzecz umożliwia trochę inne oddziaływanie, trochę inaczej wygląda i trochę inaczej działa. Użycie właściwej rzeczy w swojej aplikacji może ci pomóc stworzyć bardziej żywy i intuicyjny interfejs.

Przyciski

W aplikacjach Kirigami, używamy przycisków z QtQuick Controls. Używanie ich jest całkiem proste: ustawiamy tekst we właściwości text i dowolne działanie jakie chcemy, aby wykonał na właściwości onClicked.

import QtQuick 2.0
import QtQuick.Controls 2.2 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.5

Kirigami.Page {

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

}

Przestawialne przyciski

Zachowanie przycisków można zmienić tak, aby stały się przestawialne: w tym trybie, pozostaną naciśnięte do ponownego naciśnięcia. Ten tryb można włączyć, ustawiając właściwość checkable na true; możemy także ustawić przyciski, aby przełączały się domyślnie, ustawiając właściwość checked na true.

Z przestawianych przycisków uzyskamy najwięcej, używając właściwości onCheckedChanged. Działa ona podobnie do onClicked, z tym, że przypisane działanie zostanie wykonane, gdy zmianie ulegnie właściwość checked. checked jest właściwością logiczną, która może się przydać w szczególnych przypadkach.

W tym przykładzie, ustawimy widoczność półki w wierszu w zależności od stanu przycisku przełączanego:

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

Przyciski paska narzędzi:

istnieje szczególny rodzaj przycisku przeznaczony do użycia na paskach narzędzi, Controls.ToolButton. Najoczywistszą różnicą pomiędzy tym i zwykłym przyciskiem jest wygląd, gdzie przyciski toolbuttons są płaskie (jednakże można to zmienić poprzez właściwość logiczną flat).

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

Pola zaznaczane

Rzeczy sterujące zaznaczeniem umożliwiają użytkownikowi wybór lub wybranie ustawienia. Istnieją różne rodzaje, które najlepiej opowiadają danemu przypadkowi.

Pola zaznaczania

Pola zaznaczane są przeznaczone dla ustawień, w których wybór jest niewykluczający się i w których każde ustawienie ma jasny zamiennik.

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

Jak widzisz, są one łatwe w użyciu. Właściwość checked przechowuje zmienną logiczną, określającą czy zostały one zaznaczone, czy nie.

Przyciski radio

Przyciski radio są stworzone dla przypadków, w których użytkownik musi wybrać jedno ustawienie z zestawu kilku ustawień.

Przyciski radio są domyślnie wykluczające: można zaznaczyć tylko jeden przycisk, z przycisków należących do tej samej rzeczy nadrzędnej.

Tak jak pola zaznaczane, można je ustawić na domyślnie zaznaczone lub niezaznaczone poprzez właściwość checked.

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

Przełączniki

Przełączniki zostały stworzone główne z myślą o urządzeniach przenośnych.

Na komputerach biurkowych, zmiana ustawień zazwyczaj wiąże się ze zmianą ustawienia, a następnie naciśnięciem przycisku 'Zastosuj' lub 'OK'. Na urządzeniach przenośnych możemy możemy do tego użyć przełączników.

Przełączniki można przełączać pomiędzy stanami włączenia i wyłączenia. Można je nacisnąć lub stuknąć, aby je przełączyć, można je także przeciągać do położeń 'włączony' lub 'wyłączony'. Przełączniki można ustawić, aby domyślnie były włączone lub wyłączone przy użyciu właściwości checked.

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

Suwaki

Suwaki umożliwiają użytkownikom zaznaczenie pewnych wartości poprzez przesuwanie uchwytu wzdłuż szyny. Dzięki QtQuick Controls, istnieje kilka rodzajów do wyboru w zależności od tego jakie wartości chcesz, aby użytkownik mógł wybrać w twojej aplikacji.

Suwaki zwyczajne i z naniesionymi kresami

Standardowy suwak daje użytkownikom bardzo dokładną możliwość przesuwania.

Domyślnie, suwaki idą od lewej do prawej, aby coś zwiększyć (oraz z dołu do góry, aby coś zwiększyć w pionie). Zabarwienie wzrokowo wskazuje jak dużą wartość wybierasz.

Suwaki mają kilka istotnych właściwości, na które musimy zwrócić uwagę:

• value: zawiera wartość, przy której umieszczony jest uchwyt i która może być ustawiona ręcznie, aby określić domyślną wartość początkową
• to: określa zakres suwaka, określając największą dopuszczalną wartość, którą może osiągnąć
• orientation: umożliwia suwakom ustawienie swojego położenia przy użyciu Qt.Vertical

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

Kolejną użyteczną własnością, której możemy użyć, jest stepSize. Ustawienie tego na wartość numeryczną umożliwia nam utworzenie suwaka, który przyciąga się do wartości, które są wielokrotnością danego stepSize, gdzie wielokrotności te są oznaczane kresami. Stąd, jeśli ustawimy tę wartość na 2.0, to gdy użytkownik przeciągnie uchwyt suwaka, to będzie w stanie zaznaczyć 0.0, 2.0, 4.0, itd. aż do wartości określonej we właściwości to.

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

Suwak zakresu

QtQuick Controls dostarcza także suwaków zakresu. Mają one dwa uchwyty, które umożliwiają określenie zakresu liczb pomiędzy dwoma uchwytami.

Ważne, aby zapamiętać dwie nowe właściwości: first.value oraz second.value, które przechowują wartości dwóch uchwytów. Można je nastawić, tak samo jak właściwość value zwyczajnych suwaków.

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

Możemy także stworzyć suwak z kresami poprzez ustawienie właściwości stepSize na jakąś liczbę, w ten sam sposób, co w zwyczajnym suwaku.

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