Stylizacja QML bez ręcznego znakowania każdej właściwości do stylizacji

Question

Stylizacja QML bez ręcznego znakowania każdej właściwości do stylizacji

Wiem, że QML nie obsługuje stylizacji CSS tak jak widgety, i przeczytałem o alternatywnych podejściach do stylizacji/tematyki:

Wspólne dla tych podejść jest to, że wymagają one od programisty określenia części QML, które mogą być stylizowane, albo poprzez powiązanie z właściwością w " pliku stylowania QML/singleton", lub poprzez użycie loadera do załadowania innego komponentu QML na podstawie nazwy stylu. Chciałbym coś, co działa jak selektor" id "w CSS zamiast selektora" class", aby poszczególne pliki QML nie musiały wiedzieć, czy będą później stylizowane, czy nie.

Moje obecne podejście sprawia, że wszystkie pliki QML wyglądają podobnie do tego (używając podejścia w linku 2):

Main.qml

Rectangle {
    Id: background
    color: g_theme.background.color 
    //g_theme is defined in root context and loaded dynamically
}

Co chciałbym zrobić jest:

Main.qml

Rectangle {
    Id: background
    color: “green” // default color
}

A następnie mieć plik stylizacji, który definiuje (lub podobny)

Main.qml #background.color: red

Czy jest to w tej chwili możliwe, czy coś, co jest w przygotowaniu do przyszłej wersji Qt, czy też preferowany sposób stylizacji będzie nadal czymś podobnym do podejścia opisanego w linkach powyżej?

14

css styling qt qml

Author: jesperhh, 2014-09-15

Source

2 answers

Pomocne może być również spojrzenie na Qt Quick Controls Style

Podczas używania stylów kontrolek nie jest konieczne jawne przypisywanie każdej właściwości kontrolki docelowej. Wszystkie właściwości mogą być zdefiniowane w oddzielnym składniku [ControlName]Style (np. ButtonStyle).
Następnie w komponencie docelowym (np. Button) możesz po prostu odwołać się do komponentu stylu w jednej linii kodu.

Jedynym minusem jest to, że komponenty stylu są dostępne tylko dla Qt Quick Controls. Nie dla żadnego Qt Komponent.

0

Author: Alexander Stepaniuk,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-31 08:34:10

score 11 · Accepted Answer

Preferowanym sposobem nie jest stosowanie stylu na komponentach domyślnych, ale wyprowadzanie z tych komponentów do tworzenia wstępnie stylizowanych komponentów niestandardowych.

Co robię dla moich projektów:

Najpierw tworzę jeden scentralizowany plik 'theme', jako współdzielony moduł JavaScript:

// MyTheme.js
.pragma library;
var bgColor   = "steelblue";
var fgColor   = "darkred";
var lineSize  = 2;
var roundness = 6;

Następnie tworzę niestandardowe komponenty, które bazują na nim:

// MyRoundedRect.qml
import QtQuick 2.0;
import "MyTheme.js" as Theme;
Rectangle {
    color: Theme.bgColor;
    border {
        width: Theme.lineSize;
        color: Theme.fgColor;
    }
    radius: Theme.roundness;
}

Wtedy mogę używać mojego wstępnie stylizowanego komponentu wszędzie z pojedynczą linią kodu:

MyRoundedRect { }

I ta metoda ma ogromną zaletę : to naprawdę obiektowe, a nie zwykłe skórowanie.

Jeśli chcesz, możesz nawet dodać zagnieżdżone obiekty w swoim niestandardowym komponencie, takie jak tekst, obraz, cień itp... lub nawet logiki interfejsu użytkownika, jak zmiana koloru po najechaniu myszą.

PS: tak, można użyć QML singleton zamiast modułu JS, ale wymaga on dodatkowego pliku qmldir i jest obsługiwany tylko z Qt 5.2, co może być ograniczające. I oczywiście, QObject C++ wewnątrz właściwości kontekstu również będzie działać (np. jeśli chcesz załadować właściwości skóry z plik na dysku...).