Colors i temes creats amb el Kirigami
El Kirigami té una paleta de colors que segueix els colors del sistema, per a integrar-se millor amb la plataforma en la qual s'executa (és a dir, Escriptori Plasma, Plasma mòbil, GNOME, Android, etc.)
Tots els components QML de Kirigami i tots els components QML de Qt Quick Controls 2 ja seguiran de manera predeterminada aquesta paleta, de manera que normalment no es necessitaran colors personalitzats per a cap d'aquests controls.
Els components primitius com Rectangle
sempre s'han d'acolorir amb la paleta de colors proporcionada pel Kirigami a través de la propietat adjunta
Theme
En general, s'han d'evitar els colors codificats en el QML, com #32b2fa
o red
. Si realment és necessari tenir elements amb colors personalitzats, haurà de ser una àrea on només s'utilitzin colors personalitzats (generalment a l'àrea de contingut de l'aplicació, i mai en el cromat com les barres d'eines o els diàlegs), per exemple, un primer pla black
codificat no es pot utilitzar sobre un fons Kirigami.Theme.backgroundColor
, perquè si la plataforma empra un esquema de color fosc, el resultat tindrà un contrast pobre del negre sobre gairebé negre.
Tema
Per a obtenir més informació sobre la classe Kirigami Theme, vegeu la documentació de l'API
Kirigami.Theme
és una propietat adjunta, per tant, està disponible per a utilitzar-la en qualsevol element QML. Conté com propietats tots els colors disponibles a la paleta i quina paleta emprar, així com la propietat colorSet
.
Exemple:
import QtQuick 2.11
import org.kde.kirigami 2.9 as Kirigami
Rectangle {
color: Kirigami.Theme.backgroundColor
}
Conjunt de colors
Depenent d'on s'ubiqui un control, haureu d'utilitzar un conjunt de colors diferent: per exemple, (amb el tema de color Brisa clara) en les vistes d'elements, el fons normal és gairebé blanc, mentre que en altres regions, com les barres d'eines o diàlegs, el color de fons normal és gris.
Si establiu un conjunt de colors per a un element, tots els seus elements fill (de manera recursiva) l'heretaran automàticament (llevat que la propietat inherit
s'hagi establert explícitament a false
, el qual sempre s'ha de fer quan el desenvolupador vol forçar un conjunt de colors específic), de manera que és fàcil canviar els colors de tots una jerarquia d'elements sense tocar cap dels elements en si.
Kirigami.Theme
admet 5 conjunts de colors diferents:
- View: conjunt de colors per a les vistes d'elements, generalment el més clar de tots (en els temes de colors clars)
- Window: conjunt de colors predeterminats per a les finestres i les àrees «cromades»
- Button: conjunt de colors utilitzat pels botons
- Selection: conjunt de colors utilitzat per les àrees seleccionades
- Tooltip: conjunt de colors utilitzat per als consells d'eina
- Complementary: conjunt de colors destinat a ser complementari a Window: generalment és fosc fins i tot en els temes clars. Pot emprar-se per a «emfatitzar» en les àrees petites de l'aplicació
Exemple:
import QtQuick 2.11
import QtQuick.Controls 2.2 as Controls
import org.kde.kirigami 2.9 as Kirigami
// Els comentaris assumeixen que el sistema utilitza el tema de color Brisa clara
...
Rectangle {
// S'utilitzarà un color gris, ja que el conjunt de colors predeterminat és Window
color: Kirigami.Theme.backgroundColor
Controls.Label {
// El text serà gairebé negre, com es defineix en el conjunt de colors Window
text: i18n("hello")
}
Rectangle {
...
// Usar el conjunt per a ItemViews
Kirigami.Theme.colorSet: Kirigami.Theme.View
// No heretar del pare
Kirigami.Theme.inherit: false
// Aquest serà un color gairebé blanc
color: Kirigami.Theme.backgroundColor
Rectangle {
...
// Aquest també serà un color gairebé blanc, ja que el colorSet s'hereta del pare i serà
// View
color: Kirigami.Theme.backgroundColor
Controls.Label {
// El text serà gairebé negre, com es defineix en el conjunt de colors View
text: i18n("hello")
}
}
Rectangle {
...
// Usar el conjunt complementari
Kirigami.Theme.colorSet: Kirigami.Theme.Complementary
// No heretar del pare
Kirigami.Theme.inherit: false
// Serà gairebé negre, ja que en el conjunt de colors Complementary el color de fons és
// fosc.
color: Kirigami.Theme.backgroundColor
Controls.Label {
// El text serà gairebé blanc, com es defineix en el conjunt de colors Complementary
text: i18n("hello")
}
}
}
}
Alguns components, com les Labels, de manera predeterminada heretaran automàticament el conjunt de colors, alguns altres components tenen un conjunt de colors fix, per exemple, els botons es fixen al conjunt de colors Button
. Si es desitja que el botó hereti el conjunt de colors pare, la propietat inherit
s'haurà d'establir explícitament a true
:
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")
}
Usar colors personalitzats
Tot i que es desaconsella utilitzar colors codificats, el Kirigami ofereix una forma més fàcil de mantenir per a assignar una paleta codificada personalitzada a un element i a tots els seus elements fills, el qual permetrà definir aquests colors personalitzats en un lloc i només en un:
|
|