Barwy i tryby barw w Kirigami

Spraw, aby twoja aplikacja podążała za zestawem barw użytkownika

Kirigami ma paletę barw, która przestrzega barw systemowych, aby lepiej wtopić się na platformie, na której zostało uruchomione (tj. Pulpit Plazmy, Przenośna Plazma, GNOME, Android, itp.).

Wszystkie składniki QML oraz Qt Quick Controls 2 QML będą już domyślnie przestrzegać tej palety, więc zazwyczaj nie będzie potrzeby stosowania własnych barw dla tych rzeczy obsługujących.

Podstawowe składniki takie jak Rectangle powinny zawsze być zabarwione paletą barw dostarczoną do Kirigami poprzez doczepioną właściwość Theme .

Powinieneś unikać barw zakodowanych w QML na sztywno, takich jak #32b2fa lub red; jeśli konieczne jest posiadanie rzeczy o własnych barwach, to powinien to być obszar, w którym używane są tylko własne barwy (zazwyczaj w obszarze aplikacji z treścią i nigdy w miejscach takich jak paski narzędzi, czy okna dialogowe), na przykład zakodowanej na sztywno barwy pierwszoplanowej dla black nie można użyć w tle Kirigami.Theme.backgroundColor, bo gdy platforma używa ciemnego trybu, to wynikiem będzie słabo kontrastujący czarny na prawie czarnym.

Wygląd

Po więcej szczegółów o klasie Kirigami Theme, zajrzyj do dokumentacji API

Kirigami.Theme jest dołączoną właściwością, strąd jest dostępna do użytku z dowolnej rzeczy QML. Zawiera, jako właściwości, wszystkie barwy dostępne w palecie i to jakiej palety użyć jako właściwości colorSet.

Przykład:

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

Rectangle {
    color: Kirigami.Theme.backgroundColor
}

Zestaw barw

W zależności od tego, gdzie rzecz obsługująca jest umieszczona, to powinna mieć nadaną inną barwę: na przykład, (przy jasnym trybie Bryzy) w itemviews, zwyczajne tło jest prawie białe, podczas gdy w innych obszarach, takich jak paski narzędzi lub okna, zwyczajne tło jest szare.

Jeśli nadasz zestaw barw dla rzeczy, to wszystkie jej podrzędne rzeczy (rekursywnie) odziedziczą ją samoczynnie (chyba, że właściwość inherit została jednoznacznie ustawiona na false, co należy zawsze robić, gdy programista, chce wymusić dany zestaw barw), więc łatwo jest zmieniać barwy dla całej hierarchii rzeczy bez dotykania samych rzeczy po kolei.

Kirigami.Theme obsługuje 5 różnych zestawów barw:

  • Widok: Zestaw barw dla widoków rzeczy, zazwyczaj najjaśniejszy (w jasnych trybach barw)
  • Okno: Domyślny zestaw barw dla okien oraz obszarów “chromowanych”
  • Przycisk: Zestaw barw używany przez przyciski
  • Zaznaczenie: Zestaw barw użyty przez zaznaczone obszary
  • Wskazówka: Zestaw barw używany przez wskazówki
  • Uzupełnienie: Zestaw barw stanowi uzupełnienie do Okna: zazwyczaj jest ciemny nawet w jasnym trybie. Może być używany do “uwypuklenia” czegoś w małych obszarach aplikacji

Przykład:

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

// Uwagi zakładają, że system używa zestawu barw Jasnej Bryzy
...
Rectangle {
    // Zostanie użyta szara barwa, bo domyślnym zestawem barw jest ten z okien
    color: Kirigami.Theme.backgroundColor

    Controls.Label {
        // The text will be near-black, as is defined in the Window  color set
        text: i18n("hello")
    }

    Rectangle {
        ...
        // Użyj zestawu dla widoków ItemViews
        Kirigami.Theme.colorSet: Kirigami.Theme.View  

        // Nie dziedzicz z nadrzędnego
        Kirigami.Theme.inherit: false

        // To będzie niemal biała barwa
        color: Kirigami.Theme.backgroundColor

        Rectangle {
            ...
            // This will be a near-white color too, as the colorSet  is inherited from the parent
            // and will be View
            color: Kirigami.Theme.backgroundColor

            Controls.Label {
                // The text will be near-black, as is defined in the View  color set
                text: i18n("hello")
            }
        }
        Rectangle {
            ...
            // Użyj uzupełniającego zestawu
            Kirigami.Theme.colorSet: Kirigami.Theme.Complementary  

            // Nie dziedzicz z nadrzędnego
            Kirigami.Theme.inherit: false

            // This will be near-black as in the Complementary color set  the background color is
            // dark.
            color: Kirigami.Theme.backgroundColor  

            Controls.Label {
                // The text will be near-white, as is defined in the  Complementary color set
                text: i18n("hello")
            }
        }
    }
}

Niektóre ze składników, takie jak etykiety, samoczynnie odziedziczą zestaw barw, niektóre ze składników mają zestaw barw ustawiony na sztywno, np. przyciski są usztywnione względem zestawu barw Button. Aby przycisk odziedziczył zestaw barw rzeczy nadrzędnej, to właściwość inherit powinna być jednoznacznie ustawiona na 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")
}

Zrzut ekranu zestawiający przycisk, który dziedziczy i który nie dziedziczy

Używanie własnych barw

Mimo, że odradza się używania barw zakodowanych na sztywno, Kirigami trochę bardziej niezawodny sposób na przypisanie własnej zakodowanej na sztywno palety do rzeczy i ich rzeczy podrzędnych, która umożliwi określenie takich własnych barw w jednym miejscu i tylko w jednym miejscu:

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

Zrzut ekranu, pokazujący kod powyżej w qmlscene, widzimy dwa prostokąty w dwóch różnych barwach