Pagina's uitleggen
Onze toepassing (app)
In de vorige inleiding waren we in staat om onze eerste Kirigami toepassing op te zetten, te bouwen, en te compileren. Met de basis op zijn plaats, kunne we onze reis beginnen naar het maken van een toepassing met volledige mogelijkheden.
Deze inleidingen zullen focussen op het maken van een toepassing die de gebruiker laat zien hoeveel dagen er over zijn tot een gebeurtenis naar keuze. Dat betekent niet dat u er niet vanaf zou moeten wijken en uw eigen ding proberen te maken! Zorg er voor dat u er eerst streng op toeziet hoe dingen werken, zodat u kunt aanpassen wanneer dingen in uw eigen code anders zijn. We bevelen u ook aan om de Kirigami galerij te bekijken, die een aantal nuttige UI-voorbeelden levert en gemakkelijke toegang tot alle code.
In deze sectie leggen we de focus op pagina's, een van de voornaamste structurele elementen van elke Kirigami toepassing.
Pagina's
Kirigami toepassingen zijn typisch georganiseerd in Pagina's . Dit zijn de verschillende "screens" van een toepassing. U zult een pagina willen hebben toegewijd aan specifieke aspecten van de interactie met uw toepassing en om de zaken eenvoudiger te maken kunt u verschillende QML bestanden aanmaken, één voor elke pagina.
Pagina's zijn georganiseerd in een paginastapel waar ze ingestopt en uitgehaald kunnen worden. Op een telefoon wordt alleen de bovenste pagina getoond, terwijl op een groter scherm (bureaublad of tablet), indien gewenst, meerdere pagina's naast elkaar getoond kunnen worden.
Notitie
KDE heeft een Human Interface Guidelines (HIG) die in details gaat over hoe het beste uw toepassing te ontwerpen. De richtlijnen daar zullen u helpen om te verzekeren dat uw toepassing bruikbaar, consistent en esthetisch blijft.
Een Kirigami.Page erft van een Controls.Page , en als zodanig kunt u ook de eigenschappen van de laatste gebruiken.
Laten we teruggaan naar het bestand main.qml
dat we gemaakt hebben in onze vorige inleiding:
|
|
We zorgen dat onze toepassing start op onze Kirigami.Page . Alles wat we erin hebben ingevoegd is een label met "Hello World" erin, maar we gaan de zaken een beetje opfleuren.
Het idee achter onze toepassing is dat we in staat zullen zijn om een aantal aftellingen aan de gebruiker te tonen. Het probleem met een normale Kirigami.Page is dat het een vaste verticale grootte heeft, maar geen getob: Kirigami ondersteunt ook schuifbare pagina's. Kirigami.ScrollablePage gaat onze hoofdpagina nu vervangen.
Waarschuwing
Als u wat vooruit hebt gekeken in de inleiding, dan kunt u hebben opgemerkt dat er zoiets is als een ding ScrollView die u kunt gebruiken om uw componenten te bevatten. Stop echter NIET eenScrollView
binnen een ScrollablePage
omdat dat problemen kan veroorzaken. Kinderen van een ScrollablePage
zijn functioneel al in een ScrollView
.
|
|
Kirigami pagina's hebben ook nette titels geplaatst in de werkbalk, snel aan de gebruiker laten zien in welke pagina zij zijn. Alles wat we moeten doen is een paginatitel instellen met de eigenschap title
van
Kirigami.ScrollablePage
. In dit geval, gebruikten we er een van de functies i18nc()
, die we hiervoor bekeken hebben in onze vorige inleiding.
Notitie
U zou ook uw pagina binnen zijn eigen QML-document kunnen definiëren. Om dat zo te doen, creëert u het nieuwe QML-bestand, bijvoorbeeld "StartPage.qml", voegt het toe aan uw bestand resources.qrc
en stelt de eerste pagina in om het te laden, zoals:
pageStack.initialPage: Qt.resolvedUrl("StartPage.qml")
pageStack.initialPage
stelt de initiële pagina van de paginastapel van de toepassing en
Qt.resolvedUrl
converteert de relatieve URL van het QML-bestand in een absolute.
Er is verdere informatie over alternatieve paginastructuren in onze Kirigami documentatie.