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.

Primitive components such as Rectangle should always be colored with the color palette provided by Kirigami via the Theme attached property.

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 (wgłąb) 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 {
        // Tekst będzie niemal czarny tak, jak jest to określone w zestawie barw okien
        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 {
            ...
            // Będzie to także barwa niemal białą, bo colorSet jest dziedziczony z rzeczy
            // nadrzędnej, a to będzie widok.
            color: Kirigami.Theme.backgroundColor

            Controls.Label {
                // Tekst będzie niemal czarny tak, jak jest to określone w zestawie barw widoków
                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

            // To będzie niemal czarne jako iż w zestawie barw uzupełniających, barwa tła jest
            // ciemna.
            color: Kirigami.Theme.backgroundColor  

            Controls.Label {
                // Tekst będzie niemal biały tak, jak jest to określone w uzupełniającym zestawie
                // barw
                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