Oblikujte delegate na vaših straneh z nastavitvami

Ustvarite elegantne strani z nastavitvami po meri.

Kirigami Addons je dodaten nabor vizualnih komponent, ki dobro delujejo na mobilnih in namiznih napravah ter so zajamčeno medplatformski. Pod pokrovom uporablja Kirigami za ustvarjanje njegovih komponent.

Naučili ste se, kako svoji aplikaciji dodati strani About in AboutKDE. Zdaj boste lahko uporabili njihove iste notranje komponente za ustvarjanje svoje strani z nastavitvami.

Struktura projekta bi morala izgledati takole:

addonsexample
├── CMakeLists.txt
├── main.cpp 
├── Main.qml
├── MyAboutPage.qml
└── SettingsPage.qml

Potrebne spremembe

Spremenite main.qml, da bo vključevala našo novo stran z nastavitvami:

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)
                }
            }
        }
    }
}

Zdaj lahko začnemo preverjati komponente, uporabljene za ustvarjanje naše strani nastavitev: kartica obrazca in njeni delegati.

Obrazec Delegati

FormCard in FormCardPage

FormCard.FormCard je glavna komponenta, ki jo bomo uporabili za združevanje vseh svojihpodrejenih komponent, delegatov.

Kartico obrazca smo uporabili v Kirigami Addons introduction že prej. Njen glavni namen je služiti kot vsebnik zadruge komponente, medtem ko sledi barvi, ki se razlikuje od ozadja, na podoben način kot Kirigami.Card.

Ustvarite novo datoteko SettingsPage.qml:

import QtQuick
import org.kde.kirigamiaddons.formcard as FormCard

FormCard.FormCardPage {
    FormCard.FormCard {
        // Sem gredo vsi naši delegati!
    }

    FormCard.FormCard {
        // Sem gredo vsi naši delegati!
    }
}

Ker izdelujemo ločeno datoteko QML za našo stran z nastavitvami in ker smo se pripraviti na morebitno drsenje po naši strani, uporabljamo FormCard.FormCardPage, ki podeduje Kirigami.ScrollablePage.

Dobra stvar pri strani s kartico obrazca je, da je opremljena z notranjo postavitvijo, tako da ni potreben dodaten ColumnLayout in naši delegati so lahko dodani neposredno vanjo.

Note

mogoče je uporabiti delegate FormCard neposredno s Kirigami.ScrollablePage, vendar boste v tem primeru morate dodati svoje lastne postavitve.

FormHeader

Za vsako FormCard, ki jo želite ustvariti, lahko ustvarite FormHeadertik pred njo. Glava uporablja krepko besedilo in se prikaže tik nad obrazcem kartice.

import org.kde.kirigamiaddons.formcard as FormCard

FormCard.FormCardPage {
    FormCard.FormHeader {
        title: i18n("General")
    }

    FormCard.FormCard {
        // Naši delegati gredo sem...
    }

    FormCard.FormHeader {
        title: i18n("Accounts")
    }

    FormCard.FormCard {
        // Naši delegati gredo sem...
    }
}

FormTextDelegate in FormSectionText

Začnimo preprosto, z navadnim besedilom.

FormSectionText preprosto doda tankega delegata, ki vsebuje oznako.FormTextDelegate ima besedilo in siv opis.

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 ™️")
        }
    }
}

Dodamo nekaj navideznega besedila za zaznavanje hipotetične teme. Če bi želeliimajo dejansko zaznavanje barvne sheme, bi lahko v prihodnosti naredili podobnov Neochat (koda tukaj), ki uporablja model C++z KColorSchemeManager.

V razdelku Online Accounts vidimo dodatno lastnost, leading. Lahko mu dodamo Element, tako da se pojavi pred besedilom. Njegova nasprotna lastnost, trailing, bi lahko prikazala element za njegovim besedilom, vendar ga v našem programu ne bomo uporabili.

Za poenostavitev uporabljamo Kirigami.Icon, toda ta se lahko izvede tudi z uporabo Kirigami.Avatar, ki zajema informacije iz modela, kot je storjeno v Neochatu tukaj.

Na koncu bi moralo videti takole:

FormButtonDelegate

FormButtonDelegate je vizualno podoben FormTextDelegate, a ga je mogoče klikniti in prikazuje puščico, ki kaže v desno. Uporabili smo ga v Kirigami Addons introduction že prej.

Medtem ko je imel FormTextDelegate lastnosti leading in trailing da pokaže element pred in za glavno vsebino, samo FormButtonDelegate ima lastnost leading, ker je desna stran zasedena s puščico.

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

Uporabljamo njegovo lastnost icon.name, da nastavimo ikono plus (+), ki se prikaže za prostorom, kjer bi se pojavil leading, in pred glavno vsebino. To je običajen vzorec, ki označuje vaš gumb, ki bo nekaj dodal na seznam.

Ker je ta primer preproste ilustrativne narave, se ne bomo poglabljali v to, kaj bi bilo storjeno, ko bi kliknili gumb: samo natisne »Kliknjeno!" na terminal. Lahko bi naredili novo stran za ustvarjanje računa, ki modelu doda drugega uporabnika, nato stran potisne v pogled, podobno kot kar smo naredili v Main.qml.

FormRadioDelegate, FormCheckDelegate in FormSwitchDelegate

RadioButton, CheckBox in Switch so zelo pogosto uporabljene komponente vpoljubnem uporabniškem vmesniku. Kirigami Addons jih ponuja kot FormRadioDelegate, FormCheckDelegate in FormSwitchDelegate.

Njihovi glavni lastnosti sta text in description. So drugačni v uporabi, ker vsi podedujejo [AbstractButton](docs:qtquickcontrols; QtQuick.Controls.AbstractButton), zato se pričakuje, da boste uporabili njegove signalein obdelovalci: checked in onChecked, preklopno in onToggled, kliknjeno in onClicked.

V naši aplikaciji želimo ustvariti nekaj funkcij samodejnega shranjevanja in želimo prikazati svoje nastavitve le, če je uporabnik omogočil to funkcijo. Ustvarite nov razdelek z FormCard in Glava obrazca, nato dodajteFormSwitchDelegate in FormRadioDelegate.

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

Vidnost vsakega izbirnega gumba povežemo s stikalom, tako da se le prikažejoko je stikalo omogočeno.

Najboljše prakse

Kliknite sem, da bi prebrali več

Če imate nekaj programskega znanja v jezikih, kot je C++, vas bo morda zamikalo, da nastavite lastnost checked stikala, da obrnete vidnost izbirnih gumbov na true z dodelitvijo JavaScript, npr. kot:

checked: {
    radio1.visible = true;
    radio2.visible = true;
    radio3.visible = true;
}

To ni zelo učinkovito za deklarativni jezik QML in njegove signale in reže. Poskusite uporabiti vezave QML kot v primeru visible: autosave.checked namesto izrazov JavaScript.

Poglejte this page za podrobnosti.

Če želite preizkusiti naše potrditveno polje, lahko dodamo nov FormCheckDelegate v naš Splošni del.

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

Tukaj uporabljamo onToggled obravnavalnik signalov za prikaz navideznega besedila za simulacijo ikone v pladnju, ki se pojavlja v sistemu. Če bi res želeli, bi to zlahka uresničili kot ikono pladnja z SystemTrayIcon.

Do sem bi morala naša aplikacija videti takole:

FormComboBoxDelegate

Skupno komponento ComboBox lahko ustvarite z FormComboBoxDelegate.

To kombinirano polje ima več uporabnih lastnosti, ki jih lahko uporabimo: editable, displayText in displayMode.

Nastavitev editable: true omogoča uporabniku urejanje besedila v kombiniranem polju,kar je uporabno, če je potrebno dodati nove možnosti kombiniranega polja:

Kadarkoli morate prikazati dodatno besedilo pred vsako možnostjo, lahko uporabitenekaj takega kot displayText: "Profil: " + currentText:

In najbolj zanimiva, ki jo bomo uporabili v našem primeru, jedisplayMode. Ima lahko tri možnosti:

FormComboBoxDelegate.ComboBox: standardno majhno polje, ki prikazuje seznam možnosti.

FormComboBoxDelegate.Dialog: pogovorno okno, ki prikazuje seznam možnosti v na sredini okna, kot Kirigami.OverlaySheet.

FormComboBoxDelegate.Page: nova stran s seznamom prikazanih možnosti v ločenem oknu.

Dodajte naslednje med "Current Color Scheme" in "Show Tray Icon" delegatov na vaši kartici obrazca "General".

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

S potrditvenim poljem bi morala biti naša stran z nastavitvami videti takole:

FormDelegateSeparator

Naša stran z nastavitvami dobiva obliko, vendar vsak razdelek postaja daljši. Dodamo lahko nekaj FormDelegateSeparators, da bo naša stran bolj urejena:

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

Na splošno lahko uporabite ločila, kadar koli opazite večje razlike med komponentami, čeprav je izbira, kje jih postaviti, na koncu vaše. Na primer, v razdelku General se potrditveno polje razlikuje od njegove prejšnje komponente, ker se ne začne z besedilom; v razdelku Autosave, ločilo združuje radijske gumbe; in v Accounts dodajanje ločila med zadnjim računom in gumbom, ki ga ponuja nekaj dodatnega poudarka na gumbu.

Lastnosti above in below sta precej samoumevni, ko gre zanje njihovo uporabo: posredujete id komponent nad in podločilom. Ko so nastavljeni, bo ločilo kadar koli hitro izginilo, zgornji ali spodnji element pa je označen/lebdi nad njim. Najbolj uporabni so za primer, ko morate dinamično generirati komponente in ne morete samodejno predpostaviti, kateri element bo prišel tik pred ali za ločilom. Tako bi bilo v razdelku Accounts naše aplikacijeko je bila logika za dodajanje novih računov dejansko implementirana, v tem primeruvedno lahko zgrabimo zadnji element v modelu, da to storimo.

Upoštevajte, da se ločilo nad nastavitvijo ikone na pladnju ne prikaže, ko miška lebdi nad njim.

FormCard o programu