Formu delegitojn en viaj agordaj paĝoj
Kirigami Addons estas plia aro de vidaj komponantoj, kiuj bone funkcias ĉe poŝtelefono kaj labortablo kaj estas garantiitaj esti transplatformaj. Ĝi uzas Kirigami sub la kapuĉo por krei siajn komponentojn.
Vi lernis kiel aldoni Pri kaj Pri KDE-paĝojn al via aplikaĵo. Nun vi povos uzi iliajn samajn internajn komponantojn por krei viajn agordajn paĝojn.
La projekta strukturo devus aspekti jene:
addonsexample
├── CMakeLists.txt
├── main.cpp
├── resources.qrc
└── contents/
└── ui/
├── main.qml
├── MyAboutPage.qml
└── SettingsPage.qml
Bezonataj Ŝanĝoj
Aldonu novan linion al nia resources.qrc:
<!DOCTYPE RCC>
<RCC version="1.0">
<qresource prefix="/">
<file alias="main.qml">contents/ui/main.qml</file>
<file alias="MyAboutPage.qml">contents/ui/MyAboutPage.qml</file>
<file alias="SettingsPage.qml">contents/ui/SettingsPage.qml</file>
</qresource>
</RCC>
Kaj ŝanĝu main.qml por inkluzivi nian novan paĝon de Agordoj:
import QtQuick 2.15
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20 as Kirigami
import org.kde.kirigamiaddons.formcard 1.0 as FormCard
import org.kde.about 1.0
Kirigami.ApplicationWindow {
id: root
width: 600
height: 700
Component {
id: aboutkde
FormCard.AboutKDE {}
}
Component {
id: aboutpage
MyAboutPage {}
}
Component {
id: settingspage
SettingsPage {}
}
pageStack.initialPage: Kirigami.ScrollablePage {
ColumnLayout {
FormCard.FormCard {
FormCard.FormButtonDelegate {
id: aboutKDEButton
icon.name: "kde"
text: i18n("About KDE Page")
onClicked: root.pageStack.layers.push(aboutkde)
}
FormCard.FormButtonDelegate {
id: aboutPageButton
icon.name: "applications-utilities"
text: i18n("About Addons Example")
onClicked: root.pageStack.layers.push(aboutpage)
}
FormCard.FormButtonDelegate {
id: settingsButton
icon.name: "settings-configure"
text: i18n("Single Settings Page")
onClicked: root.pageStack.layers.push(settingspage)
}
}
}
}
}
Ni nun povas komenci pritrakti la komponantojn uzatajn por krei nian Agordan paĝon: la Formularo-Karto kaj ĝiaj Delegitoj.
Formu Delegitojn
FormCard kaj FormCardPage
FormCard.FormCard estas la ĉefa ero, kiun ni uzos por grupigi ĉiujn ĝiajn infanajn komponantojn, la Delegitojn.
Ni antaŭe uzis formularkarton en la Kirigami Addons-enkonduko antaŭe. Ĝia ĉefa celo estas servi kiel ujo por aliaj komponantoj sekvante diferencan koloron de la fono, en simila maniero al Kirigami.Karto .
Kreu novan dosieron contents/ui/SettingsPage.qml:
import QtQuick 2.15
import org.kde.kirigamiaddons.formcard 1.0 as FormCard
FormCard.FormCardPage {
FormCard.FormCard {
// Ĉi tie iras ĉiuj niaj delegitoj!
}
FormCard.FormCard {
// Ĉi tie iras ĉiuj niaj delegitoj!
}
}
Ĉar ni faras apartan QML-dosieron por nia Agorda paĝo, kaj ĉar ni devas prepari por eventuala movo en nia paĝo, ni uzas `FormCard.FormCardPage', kiu heredas Kirigami.ScrollablePage .
La agrabla afero pri la formularkartpaĝo estas, ke ĝi venas kun interna aranĝo, do ne necesas plia ColumnLayout kaj niaj delegitoj povas esti aldonitaj rekte al ĝi.
Noto
Eblas uzi FormCard-delegitojn rekte kun Kirigami.ScrollablePage, sed tiukaze vi devos aldoni viajn proprajn aranĝojn.FormHeader
Por ĉiu FormCard kiun vi volas krei, vi povas krei [FormHeader](https://api.kde.org /frameworks/kirigami-addons/html/classFormHeader.html) tuj antaŭ ĝi. La kaplinio uzas grasan tekston kaj aperas ĝuste super la formularkarto.
import org.kde.kirigamiaddons.formcard 1.0 as FormCard
FormCard.FormCardPage {
FormCard.FormHeader {
title: i18n("General")
}
FormCard.FormCard {
// Niaj delegitoj iras ĉi tien...
}
FormCard.FormHeader {
title: i18n("Accounts")
}
FormCard.FormCard {
// Niaj delegitoj iras ĉi tien...
}
}
FormTextDelegate kaj FormSectionText
Ni komencu simple, kun simpla teksto.
FormSectionText simple aldonas maldikan delegiton enhavantan etikedon. FormTextDelegate havas tekston kaj grizigitan priskribon.
import QtQuick 2.15
import org.kde.kirigami 2.20 as Kirigami
import org.kde.kirigamiaddons.formcard 1.0 as FormCard
FormCard.FormCardPage {
FormCard.FormHeader {
title: i18n("General")
}
FormCard.FormCard {
FormCard.FormTextDelegate {
text: i18n("Current Color Scheme")
description: "Breeze"
}
}
FormCard.FormHeader {
title: i18n("Accounts")
}
FormCard.FormCard {
FormCard.FormSectionText {
text: i18n("Online Account Settings")
}
FormCard.FormTextDelegate {
leading: Kirigami.Icon {source: "user"}
text: "John Doe"
description: i18n("The Maintainer ™️")
}
}
}
Ni aldonas iom da falsa teksto por la hipoteza temo-detekto. Se ni volus havi efektivan kolorskemon detekton, estonte ĝi povus esti farita simile al Neochat ([kodo ĉi tie](https://github.com/KDE /neochat/blob/master/src/colorschemer.cpp)), uzante C++-modelon kun KColorSchemeManager .
En la sekcio de Interretaj Kontoj, ni vidas plian proprecon, ĉefa. Ni povas aldoni
Item
al ĝi por ke ĝi aperu antaŭ la teksto. Ĝia kontraŭa propreco, trailing, povus montri Eron post la teksto, sed ni ne uzos ĝin en nia programo.
Ni uzas Kirigami.Icon ĉi tie por simpleco, sed ĉi tio ankaŭ povus esti efektivigita per Kirigami.Avatar kiu prenas la informojn de modelo, kiel estas farita. en Neochat ĉi tie.
Ĝi devus fini aspekti jene:
FormButtonDelegate
La FormButtonDelegate estas vide simila al FormTextDelegate, sed ĝi estas klakebla kaj montras sagon indikantan dekstren. Ni uzis ĝin en la Kirigami Addons-enkonduko antaŭe.
Dum la FormTextDelegate havis la "ĉefajn" kaj "malantaŭajn" ecojn por montri eron antaŭ kaj post la ĉefa enhavo, la FormButtonDelegate nur havas la "ĉefan" proprecon, ĉar la dekstra flanko estas okupata de la sago.
import QtQuick 2.15
import org.kde.kirigami 2.20 as Kirigami
import org.kde.kirigamiaddons.formcard 1.0 as FormCard
FormCard.FormCardPage {
FormCard.FormHeader {
title: i18n("General")
}
FormCard.FormCard {
FormCard.FormTextDelegate {
text: i18n("Current Color Scheme")
description: "Breeze"
}
}
FormCard.FormHeader {
title: i18n("Accounts")
}
FormCard.FormCard {
FormCard.FormSectionText {
text: i18n("Online Account Settings")
}
FormCard.FormTextDelegate {
leading: Kirigami.Icon {source: "user"}
text: "John Doe"
description: i18n("The Maintainer ™️")
}
FormCard.FormButtonDelegate {
icon.name: "list-add"
text: i18n("Add a new account")
onClicked: console.info("Clicked!")
}
}
}
Ni uzas ĝian proprecon icon.name por agordi pli (+) piktogramon por aperi post la spaco kie la ĉefa aperus, kaj antaŭ la ĉefa enhavo. Ĉi tio estas ofta ŝablono por indiki ke via butono aldonos ion al listo.
Ĉar ĉi tiu ekzemplo estas por simplaj ilustraj celoj, ni ne enprofundiĝas pri tio, kio estus farita post kiam la butono estas klakita: ĝi nur presas "Klakita!" al la terminalo. Ni povus fari novan paĝon por kreado de konto kiu aldonas alian uzanton al modelo, tiam puŝi la paĝon en vido, simile al tio, kion ni faris en main.qml.
FormRadioDelegate, FormCheckDelegate kaj FormSwitchDelegate
La RadioButton, CheckBox kaj Ŝaltilo estas tre ofte uzataj komponantoj en iu ajn uzantinterfaco. Kirigami Addons provizas ilin kiel FormRadioDelegate, [FormCheckDelegate](https://api.kde.org/frameworks/kirigami- addons/html/classFormCheckDelegate.html) kaj FormSwitchDelegate.
Iliaj nuraj ĉefaj trajtoj estas teksto kaj priskribo. Ili estas malsamaj laŭ uzo ĉar ili ĉiuj heredas
AbstractButton
, kaj do oni atendas, ke oni uzu ĝiajn signalojn kaj prizorgilojn: checked kaj onChecked, toggled kaj onToggled, clicked kaj onClicked.
Ni volas krei iun aŭtomatan konservadon en nia aplikaĵo, kaj ni volas nur montri ĝiajn agordojn se la uzanto ebligis ĉi tiun funkcion. Kreu novan sekcion uzante FormCard kaj [FormHeader](https://api.kde.org/frameworks/ kirigami-addons/html/classFormHeader.html), tiam aldonu FormSwitchDelegate kaj [FormRadioDelegate](https:// api.kde.org/frameworks/kirigami-addons/html/classFormRadioDelegate.html).
FormCard.FormHeader {
title: i18n("Autosave")
}
FormCard.FormCard {
FormCard.FormSwitchDelegate {
id: autosave
text: i18n("Enabled")
}
FormCard.FormRadioDelegate {
text: i18n("After every change")
visible: autosave.checked
}
FormCard.FormRadioDelegate {
text: i18n("Every 10 minutes")
visible: autosave.checked
}
FormCard.FormRadioDelegate {
text: i18n("Every 30 minutes")
visible: autosave.checked
}
}
Ni ligas la videblecon de ĉiu radiobutono al ŝaltilo, do ili aperas nur kiam la ŝaltilo estas ebligita.
Plej bonaj Praktikoj
Alklaku ĉi tie por legi pli
Se vi havas iom da programado en nepraj lingvoj kiel ekzemple C++, vi povus esti tentata agordi la markita' proprecon de la ŝaltilo por turni la videblecon de la radiobutonoj al vera` kun JavaScript-tasko kiel ekzemple:
checked: {
radio1.visible = true;
radio2.visible = true;
radio3.visible = true;
}
Ĉi tio ne estas tre efika por la deklara lingvo de QML kaj ĝiaj signaloj kaj fendoj. Provu uzi QML-ligojn kiel en la kazo de visible: autosave.checked kiel eble plej multe anstataŭ JavaScript-esprimoj.
Vidu ĉi tiun paĝon por detaloj.
Por testi nian markobutonon, ni povas aldoni novan FormCheckDelegate al nia Ĝenerala sekcio.
FormCard.FormHeader {
title: i18n("General")
}
FormCard.FormCard {
FormCard.FormTextDelegate {
text: i18n("Current Color Scheme")
description: "Breeze"
}
FormCard.FormCheckDelegate {
text: i18n("Show Tray Icon")
onToggled: {
if (checkState) {
console.info("A tray icon appears on your system!")
} else {
console.info("The tray icon disappears!")
}
}
}
}
Ĉi tie ni uzas la `onToggled' signaltraktilo por montri iun ŝajnan tekston por simuli pletan piktogramon aperantan en la sistemo. Se vi vere volis, vi povus facile efektivigi pletan piktogramon uzante SystemTrayIcon.
Ĝis nun nia aplikaĵo devus aspekti jene:
FormComboBoxDelegate
La komuna ComboBox-komponento povas esti kreita per FormComboBoxDelegate.
Ĉi tiu kombokesto havas plurajn utilajn ecojn, kiujn ni povas uzi: redaktebla, displayText kaj displayMode.
Agordo redaktebla: vera permesas al la uzanto redakti la tekston de la kombokesto, kio estas utila se aldoni novajn kombokeston-opciojn necesas:
Kiam ajn vi bezonas montri plian tekston antaŭ ĉiu opcio, vi povas uzi ion kiel displayText: "Profile: " + currentText:
Kaj la plej interesa, kiun ni uzos en nia ekzemplo, estas displayMode. Ĝi povas havi tri eblojn:
- FormComboBoxDelegate.ComboBox: la norma malgranda skatolo montranta liston de opcioj.
- FormComboBoxDelegate.Dialog: dialogo montranta liston de elektebloj en la mezo de la fenestro, kiel Kirigami.OverlaySheet .
- FormComboBoxDelegate.Page: nova paĝo enhavanta liston de elektebloj montritaj en aparta fenestro.
Aldonu la jenon inter la delegitoj "Nuna Kolorskemo" kaj "Montri Pleto-piktogramon" en via "Ĝenerala" formularkarto.
FormCard.FormComboBoxDelegate {
text: i18n("Default Profile")
description: i18n("The profile to be loaded by default.")
displayMode: FormCard.FormComboBoxDelegate.ComboBox
currentIndex: 0
editable: false
model: ["Work", "Personal"]
}
Kun la markobutono, nia paĝo de Agordoj devus aspekti jene:
FormDelegateSeparator
Nia Agorda paĝo formiĝas, sed ĉiu sekcio komencas longiĝi. Ni povas aldoni kelkajn FormDelegateSeparators por igi nian paĝon pli ordigita:
import QtQuick 2.15
import org.kde.kirigami 2.20 as Kirigami
import org.kde.kirigamiaddons.formcard 1.0 as FormCard
FormCard.FormCardPage {
FormCard.FormHeader {
title: i18n("General")
}
FormCard.FormCard {
FormCard.FormTextDelegate {
text: i18n("Current Color Scheme")
description: "Breeze"
}
FormCard.FormComboBoxDelegate {
id: combobox
text: i18n("Default Profile")
description: i18n("The profile to be loaded by default.")
displayMode: FormCard.FormComboBoxDelegate.ComboBox
currentIndex: 0
editable: false
model: ["Work", "Personal"]
}
FormCard.FormDelegateSeparator {
above: combobox
below: checkbox
}
FormCard.FormCheckDelegate {
id: checkbox
text: i18n("Show Tray Icon")
onToggled: {
if (checkState) {
console.info("A tray icon appears on your system!")
} else {
console.info("The tray icon disappears!")
}
}
}
}
FormCard.FormHeader {
title: i18n("Autosave")
}
FormCard.FormCard {
FormCard.FormSwitchDelegate {
id: autosave
text: i18n("Enabled")
}
FormCard.FormDelegateSeparator {
above: autosave
below: firstradio
visible: autosave.checked
}
FormCard.FormRadioDelegate {
id: firstradio
text: i18n("After every change")
visible: autosave.checked
}
FormCard.FormRadioDelegate {
text: i18n("Every 10 minutes")
visible: autosave.checked
}
FormCard.FormRadioDelegate {
text: i18n("Every 30 minutes")
visible: autosave.checked
}
}
FormCard.FormHeader {
title: i18n("Accounts")
}
FormCard.FormCard {
FormCard.FormSectionText {
text: i18n("Online Account Settings")
}
FormCard.FormTextDelegate {
id: lastaccount
leading: Kirigami.Icon {source: "user"}
text: "John Doe"
description: i18n("The Maintainer ™️")
}
FormCard.FormDelegateSeparator {
above: lastaccount
below: addaccount
}
FormCard.FormButtonDelegate {
id: addaccount
icon.name: "list-add"
text: i18n("Add a new account")
onClicked: console.info("Clicked!")
}
}
}
Ĝenerale, vi povas uzi apartigilojn kiam ajn vi vidas gravajn distingojn inter komponantoj, kvankam la elekto de kie meti ilin finfine estas via. Ekzemple, en la sekcio Ĝenerala, la markobutono diferencas de siaj antaŭaj komponantoj ĉar ĝi ne komenciĝas per teksto; en la Aŭtomatkonserva sekcio, la apartigilo grupigas la radiobutonojn kune; kaj en la sekcio Kontoj, aldoni apartigilon inter la lasta konto kaj la butono provizas iom da plia fokuso al la butono.
La "supraj" kaj "malsupraj" ecoj estas sufiĉe memklarigeblaj kiam temas pri ilia uzo: vi pasas la "id" de la komponantoj super kaj sub la apartigilo. Kiam ili estas fiksitaj, la apartigilo rapide malaperos kiam ajn la supra aŭ malsupra elemento estas elstarigita/ŝvebita. Ili estas plej utilaj, ekzemple, kiam vi bezonas generi komponantojn dinamike kaj vi ne povas aŭtomate supozi, kiu objekto venos tuj antaŭ aŭ post la apartigilo. Tio estus la kazo en la sekcio Kontoj de nia aplikaĵo post kiam la logiko por aldoni novajn kontojn efektive estus efektivigita, en kiu kazo ni ĉiam povus kapti la lastan eron en la modelo por fari tion.
Rimarku kiel la apartigilo super la pleta piktograma agordo ne aperas dum ĝi ŝvebas.