Kleuren en thema's in Kirigami

Laat uw toepassing uw gebruikerskleurenschema volgen

Kirigami heeft een kleurenpalet dat de systeemkleuren volgt, om beter te integreren op het platform waarop het actief is (d.w.z. Plasma bureaublad, Plasma mobiel, GNOME, Android, etc.).

Alle QML componenten van Kirigami en alle Qt Quick Controls 2 QML componenten zullen al dit palet standaard volgen, dus zal gewoonlijk helemaal geen aangepaste kleuring nodig zijn voor deze besturingen.

Primitieve componenten zoals Rectangle zouden altijd gekleurd moeten zijn met het kleurpalet geleverd door Kirigami via de aangehangen eigenschap Thema .

Hard gecodeerde kleuren in QML, zoals #32b2fa of red zouden gewoonlijk vermeden moeten worden; als het echt noodzakelijk is om elementen met aangepaste kleuren te hebben, zou het in een gebied moeten zijn waar alleen aangepaste kleuren zijn gebruikt (gewoonlijk in het inhoudsgebied van de toepassing en nooit in het chroom zoals werkbalken of dialogen), bijvoorbeeld, een hard gecodeerd black als voorgrond kan niet gebruikt worden over een Kirigami.Theme.backgroundColor achtergrond, omdat als het platform een donker kleurenschema gebruikt het resultaat er slecht uitziet met contrast tussen zwart en bijna zwart.

Thema

Voor meer informatie over de Kirigami themaklasse, zie de API documenten

Kirigami.Theme is een aangehangen eigenschap, en is daarom beschikbaar voor gebruik in elk QML item. Het bevat als eigenschap alle kleuren beschikbaar in het palet en welk te gebruiken palet, als de eigenschap colorSet.

Voorbeeld:

import QtQuick 2.11
import org.kde.kirigami 2.9 as Kirigami

Rectangle {
    color: Kirigami.Theme.backgroundColor
}

Kleurenset

Afhankelijk van waar een besturing is gelokaliseerd, zou het een andere kleurset moeten gebruiken: bijvoorbeeld, (met het kleurenthema Breeze light) in itemviews, is de normale achtergrond bijna wit, terwijl in andere gebieden, zoals werkbalken of dialogen, de normale achtergrondkleur grijs is.

Als u een kleurenset voor een item instelt, zullen alle kind-items (recursief) het automatisch erven (tenzij de eigenschap inherit expliciet is ingesteld op false, wat altijd gedaan zou moeten worden wanneer de ontwikkelaars een specifieke kleurenset wil afdwingen) het is dus gemakkelijk kleuren te wijzigen voor een gehele hiërarchie van items zonder de items zelf aan te raken.

Kirigami.Theme ondersteunt 5 verschillende kleurensets:

  • Beeld: kleurenset voor item weergaven, gewoonlijk de lichtste van allen (in lichte kleurenthema's)
  • Venster: Standaard kleurenset voor vensters en "chroom" gebieden
  • Knop: kleurenset gebruikt door knoppen
  • Selectie: kleurenset gebruikt door geselecteerde gebieden
  • Tekstballon: kleurenset gebruikt door tekstballonnen
  • Complementair: kleurenset bedoeld om complementair te zijn aan venster: gewoonlijk is donker de tegenhanger van lichte thema's. Kan gebruikt worden voor "emphasis" in kleine gebieden van de toepassing

Voorbeeld:

import QtQuick 2.11
import QtQuick.Controls 2.2 as Controls
import org.kde.kirigami 2.9 as Kirigami

// De toelichting neemt aan dat het systeem het kleurenthema Breeze Light gebruikt
...
Rectangle {
    // Een grijze kleur zal gebruikt worden, omdat de standaard kleurenset venster is
    color: Kirigami.Theme.backgroundColor

    Controls.Label {
        // De tekst zal bijna zwart zijn, zoals gedefinieerd is in de kleurenset venster
        text: i18n("hello")
    }

    Rectangle {
        ...
        // De set voor ItemViews gebruiken
        Kirigami.Theme.colorSet: Kirigami.Theme.View  

        // Niet erven van de ouder
        Kirigami.Theme.inherit: false

        // Dit zal bijna wit zijn
        color: Kirigami.Theme.backgroundColor

        Rectangle {
            ...
            // Dit zal ook bijna wit zijn, omdat de kleurenset geërft wordt van de ouder en beeld
            // zal zijn
            color: Kirigami.Theme.backgroundColor

            Controls.Label {
                // De tekst zal bijna zwart zijn, zoals gedefinieerd is in de kleurenset beeld
                text: i18n("hello")
            }
        }
        Rectangle {
            ...
            // De complementaire set gebruiken
            Kirigami.Theme.colorSet: Kirigami.Theme.Complementary  

            // Niet erven van de ouder
            Kirigami.Theme.inherit: false

            // Dit zal bijna zwart zijn omdat in de complementaire kleurenset de achtergrondkleur
            // donker is.
            color: Kirigami.Theme.backgroundColor  

            Controls.Label {
                // De tekst zal bijna wit zijn, zoals gedefinieerd is in de complementaire
                // kleurenset
                text: i18n("hello")
            }
        }
    }
}

Sommige componenten, zoals labels, zullen automatisch standaard de kleurenset erven, sommige andere componenten hebben een vaste kleurenset, bijvoorbeeld, knoppen zijn vastgekoppeld aan de kleurenset Button. Als het gewenst is voor de knop om de kleurenset van de ouder te erven, dan moet de eigenschap inherit expliciet op true gezet worden:

import QtQuick 2.11
import QtQuick.Controls 2.2 as Controls
import org.kde.kirigami 2.9 as Kirigami

Controls.Button {
    Kirigami.Theme.inherit: true
    text: i18n("ok")
}

Schermafdruk van een vergelijking tussen een knop die erft en een die dat niet doet

Aangepaste kleuren gebruiken

Hoewel het ontmoedigd wordt om hard gecodeerde kleuren te gebruiken, biedt Kirigami een meer te onderhouden manier om een aangepaste hard gecodeerd palet aan een item en al zijn kinderen toe te kennen, dat biedt het definiëren van zulke aangepaste kleuren op alleen één plaats:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import QtQuick 2.11
import QtQuick.Controls 2.2 as Controls
import org.kde.kirigami 2.9 as Kirigami

Rectangle {
    Kirigami.Theme.inherit: false
    // NOTE: regardless of the color set used, it is recommended to replace 
    // all available colors in Theme, to avoid badly contrasting colors
    Kirigami.Theme.colorSet: Kirigami.Theme.Window
    Kirigami.Theme.backgroundColor: "#b9d795"
    Kirigami.Theme.textColor: "#465c2b"
    Kirigami.Theme.highlightColor: "#89e51c"
    // Redefine all the others

    // This will be "#b9d795"
    color: Kirigami.Theme.backgroundColor

    Rectangle {
        // This will be "#465c2b"
        anchors.centerIn: parent
        height: parent.height / 2
        width: parent.width / 2
        color: Kirigami.Theme.textColor
    }
}

Schermafdruk die de bovenstaande code toont met qmlscene, we kunnen twee rechthoeken zien met twee verschillende kleuren