Formu delegitojn en viaj agordaj paĝoj

Kreu elegantajn proprajn agordojn paĝojn.

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 
├── Main.qml
├── MyAboutPage.qml
└── SettingsPage.qml

Bezonataj Ŝanĝoj

Ŝanĝu Main.qml por inkluzivi nian novan paĝon de Agordo:

import QtQuick
import QtQuick.Layouts

import org.kde.kirigami as Kirigami
import org.kde.kirigamiaddons.formcard 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 SettingsPage.qml:

import QtQuick
import org.kde.kirigamiaddons.formcard 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 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
import org.kde.kirigami as Kirigami
import org.kde.kirigamiaddons.formcard 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
import org.kde.kirigami as Kirigami
import org.kde.kirigamiaddons.formcard 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.

Since this example is for simple illustrative purposes, we don't delve deep into what would be done once the button is clicked: it just prints "Clicked!" to the terminal. We could make a new page for account creation that adds another user to a model, then push the page into view, similarly to what we did in 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 {
    id: root

    title: i18nc("@title", "Settings")

    FormCard.FormHeader {
        title: i18nc("@title:group", "General")
    }

    FormCard.FormCard {
        FormCard.FormTextDelegate {
            text: i18nc("@info", "Current Color Scheme")
            description: "Breeze"
        }

        FormCard.FormComboBoxDelegate {
            id: combobox
            text: i18nc("@label:listbox", "Default Profile")
            description: i18nc("@info:whatsthis", "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: i18nc("@option:check", "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: i18nc("@title:group", "Autosave")
    }

    FormCard.FormCard {
        FormCard.FormSwitchDelegate {
            id: autosave
            text: i18nc("@option:check", "Enabled")
        }
        FormCard.FormDelegateSeparator {
            above: autosave
            below: firstradio
            visible: autosave.checked
        }
        FormCard.FormRadioDelegate {
            id: firstradio
            text: i18nc("@option:radio", "After every change")
            visible: autosave.checked
        }
        FormCard.FormRadioDelegate {
            text: i18nc("@option:radio", "Every 10 minutes")
            visible: autosave.checked
        }
        FormCard.FormRadioDelegate {
            text: i18nc("@option:radio", "Every 30 minutes")
            visible: autosave.checked
        }
    }

    FormCard.FormHeader {
        title: i18nc("@title:group", "Accounts")
    }

    FormCard.FormCard {
        FormCard.FormSectionText {
            text: i18nc("@info:whatsthis", "Online Account Settings")
        }
        FormCard.FormTextDelegate {
            id: lastaccount
            leading: Kirigami.Icon {source: "user"}
            text: "John Doe"
            description: i18nc("@info:credit", "The Maintainer ™️")
        }
        FormCard.FormDelegateSeparator {
            above: lastaccount
            below: addaccount
        }
        FormCard.FormButtonDelegate {
            id: addaccount
            icon.name: "list-add"
            text: i18nc("@action:button", "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.

FormCard Pri paĝoj