Besturingen en interactive elementen

Uw toepassingen interactiever maken door knoppen, selectiebesturingen, schuifregelaars en tekstvelden te gebruiken.

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

}
Een zojuist-aangeklikte knop

Omschakelbare knoppen

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 eigenschap onCheckedChanged te gebruiken. Het werkt net als onClicked, behalve dat hier de toegekende actie uitgevoerd zal worden wanneer de eigenschap checked van de knop wijzigt. checked 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!"
    }
}
A om te schakelen knop

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 stijling, met werkbalkknoppen zie vlak zijn (hoewel dat is te wijzigen met de booleaanse eigenschap flat).

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

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

Keuzevakjes zijn 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
}
Een set keuzevakjes

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

Keuzerondjes

Keuzerondjes zijn 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
    }
}
Een set keuzerondjes

Schakelaars

Schakelaars zijn primair ontworpen voor gebruik op mobiele apparaten.

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 schakelaars 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
}
Een set schakelaars

Schuifknoppen

Schuifregelaars bieden gebruikers het selecteren van bepaalde waarden door een hendel te verschuiven langs een lijn. Dankzij QtQuick Controls zijn er 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 schuifregelaar biedt de gebruiker een erg fijne controle over de selectie die deze wil maken.

Standaard bewegen schuifregelaars van links naar rechts om te verhogen (en omhoog om te verhogen wanneer verticaal). 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 kan gaan
  • orientation: biedt de schuifregelaar om naar een verticale oriëntatie met Qt.Vertical
Controls.Slider {
    id: normalSlider
    orientation: Qt.Vertical
    value: 5.0
    to: 10.0
}
Een set schuifregelaars

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
}
Een set schuifregelaars met markeringen

Schuifregelaar met reeks

QtQuick Controls biedt ook schuifregelaars met een reeks. 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
}
Een set schuifregelaars met reeks

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
}