Besturingen en interactive elementen

Kirigami biedt een brede selectie van verschillende interactieve elementen die u kunt gebruiken in uw toepassingen. Elk verschillend type heeft iets verschillende interactiestijlen, visuele stijlen en functionaliteit. Door het juiste type besturing in uw toepassing te gebruiken kan helpen om uw gebruikersinterface responsiever en intuïtiever te maken.

Knoppen

In Kirigami toepassingen gebruiken we knoppen uit QtQuick Controls. Deze gebruiken is tamelijk rechtlijnig: we zetten de tekst op de eigenschap text en een actie die we het willen laten uitvoeren wordt ingesteld op de eigenschap 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!")
    }

}

Omschakelbare knoppen

Het gedrag van knoppen kan gewijzigd worden om ze omschakelbaar te maken: in deze modus zullen ze ingedrukt blijven totdat er nog een keer op wordt geklikt. Deze modus kan geactiveerd worden door de eigenschap checkable op true te zetten; we kunnen knoppen ook standaard zetten op aan door de eigenschap checked op true te zetten.

We kunnen het meeste uit omschakelbare knoppen halen door de signaalbehandelaar onCheckedChanged te gebruiken die automatisch is gegenerateerd uit het signaal checked. Het werkt net als onClicked, behalve dat hier de toegekende actie uitgevoerd zal worden wanneer de status van de knop wijzigt. Het is een booleaanse eigenschap, die handig kan worden voor specifieke gebruiksgevallen.

In dit voorbeeld zetten we de zichtbaarheid van een in-line schuiflade volgens de status van een omschakelbare knop:

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

Werkbalkknoppen

Er is een specifiek type knop bedoelt voor gebruik in werkbalken, Controls.ToolButton . Het meest zichtbare verschil tussen deze en een conventionele Knop is de styling, met werkbalkknoppen die vlak zijn (hoewel dat is te wijzigen met de booleaanse eigenschap flat).

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

Selectiebesturing

Besturing van selectie laat gebruikers een keuze maken of een optie kiezen. Er zijn verschillende typen die het best geschikt zijn in verschillende situaties.

Keuzevakjes

Een Controls.CheckBox is bedoeld voor opties waarvan de keuzes niet-exclusief zijn en waar elke optie een helder alternatief heeft.

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

Zoals u kunt zien zijn ze eenvoudig te gebruiken. De eigenschap checked bevat een booleaanse waarde die bepaalt of ze wel of niet geactiveerd zijn.

Keuzerondjes

Een Controls.RadioButton is ontworpen voor situaties waar de gebruiker één optie uit een set van verschillende opties moet kiezen.

Keuzerondjes zijn standaard exclusief: slechts één knop kan geactiveerd zijn in hetzelfde hoofditem.

Net als keuzevakjes kunnen ze standaard op geactiveerd of niet-geactiveerd gezet worden met de eigenschap checked.

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

Schakelaars

Op het bureaublad betekent instellingen wijzigen gewoonlijk de instelling wijzigen en daarna de instelling toepassen door op een knop 'Toepassen' of 'OK' te klikken. Op een mobiel kunnen we in plaats daarvan Controls.Switch gebruiken.

Schakelaars kunnen omgeschakeld worden tussen aan en uit. Er kan op geklikt of getikt worden om ze om te schakelen of ze kunnen versleept worden naar de aan of uit positie. Nog eens, schakelaars kunnen standaard aan of uit gezet worden met de eigenschap checked.

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

Schuifknoppen

Schuifregelaars bieden gebruikers het selecteren van bepaalde waarden door een hendel te verschuiven langs een lijn. Er zijn verschillende typen waaruit u kunt kiezen afhankelijk van de waarden waaruit u uw gebruikers wilt laten kiezen in uw toepassing.

Standaard en vaste posities schuifregelaars

Een standaard Controls.Slider biedt de gebruiker een erg fijne controle over de selectie die deze wil maken.

In modus Links-naar-rechts, gaan schuifregelaar van links naar rechts om toe te nemen indien in horizontale oriëntatie, terwijl in modus Rechts-naar-links ze in de omgekeerde richting gaan. In beide modi gaan schuifregelaars in verticale oriëntatie van onder omhoog.

De kleuring biedt een visuele indicator over hoe groot de waarde is, die u selecteert.

Schuifregelaars hebben een paar belangrijke eigenschappen waar we aandacht aan moeten besteden:

• value: bevat de waarde waarop de hendel geplaatst wordt en kan ook handmatig ingesteld worden, gewoonlijk om een standaard startwaarde te leveren
• to: definieert de reeks van de schuifregelaar door de maximale waarde te specificeren waar deze naar toe kan gaan
• orientation: biedt de schuifregelaar om gezet te worden een verticale oriëntatie met Qt.Vertical

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

Nog een nuttige eigenschap die we kunnen gebruiken is stepSize. Deze op een numerieke waarde zetten biedt ons het maken van een schuifregelaar die klikt op waarden die meervouden zijn van de gespecificeerde stepSize, waarbij deze meervouden aangegeven worden met markeringen. Dus als we deze eigenschap op 2,0 zetten, zal de gebruiker bij het slepen van de hendel, alleen in staat zijn om 0,0, 2,0, 4,0, etc. te selecteren tot de waarde gespecificeerd in de eigenschap to.

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

Schuifregelaar met reeks

QtQuick Controls biedt ook Controls.RangeSliders . Deze hebben twee hendels, waarmee u een reeks getallen tussen de twee hendels definieert.

Twee nieuwe eigenschappen zijn belangrijk om te onthouden: first.value en second.value, die de waarden van de twee hendels bevatten. Net als de eigenschap value van de standaard schuifregelaars, kunnen deze vooraf ingesteld worden.

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

We kunnen ook een schuifregelaar maken met markeringen door de eigenschap stepSize op een waarde van een getal te zetten, op exact dezelfde manier als een standaard schuifregelaar.

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