Styling QML senza marcatura manualmente ogni proprietà essere in stile

Question

so che QML non supporta stile CSS, come i widget fanno, e ho letto su approcci alternativi per lo styling/tematizzazione:

• https://qt-project.org/wiki/QmlStyling
• http://www.slideshare.net/BurkhardStubert/practical-qml-key-navigation/34

comune per questi approcci è che richiedono agli sviluppatori di specificare le parti del QML che può essere uno stile, sia legandosi a un immobile in un “file QML styling/Singleton”, oppure utilizzando un Loader caricare un diverso Componente QML in base al nome dello stile. Quello che vorrei è qualcosa che funziona come il selettore "id" in CSS invece del selettore "class", in modo che i singoli file QML non debbano sapere se saranno disegnati in un secondo momento o meno.

mio approccio attuale fanno tutti i file QML aspetto simile a questo (utilizzando approccio link 2):

Main.qml

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

Quello che vorrei fare è:

Main.qml

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

e poi hanno un file di stile che definisce (o simili)

Main.qml #background.color: red 

Questo è possibile in questo momento, o qualcosa che è in cantiere per un futuro versione di Qt, o sarà il modo preferito di styling continuare a essere qualcosa di simile all'approccio descritto nei link sopra?

Answer 1

Il metodo preferito non è applicare uno stile sui componenti predefiniti, ma derivare da questi componenti per creare componenti personalizzati pre-designati.

Quello che faccio per i miei progetti:

In primo luogo, creo un file centralizzato 'tema', come un modulo condiviso JavaScript:

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

Successivamente, creare componenti personalizzati che si basano su di esso:

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

Poi, posso usare la mia componente pre-stile in tutto il mondo con una sola riga di codice:

MyRoundedRect { } 

E questo metodo ha un enorme vantaggio: è davvero orientato agli oggetti, non semplice skinning.

Se vuoi puoi anche aggiungere oggetti nidificati nel tuo componente personalizzato, come testo, immagine, ombra, ecc ... o anche qualche logica dell'interfaccia utente, come il cambio colore al passaggio del mouse.

PS: si si può usare QML singleton invece del modulo JS, ma richiede il file qmldir extra ed è supportato solo da Qt 5.2, che può essere limitato. Ovviamente, anche un QObject C++ all'interno di una proprietà di contesto funzionerebbe (ad es. Se si desidera caricare le proprietà della skin da un file sul disco ...).

Answer 2

Potrebbe anche essere utile osservare Qt Quick Controls Styles

Quando si utilizza Controlli stili non è necessario assegnare esplicitamente ogni proprietà nel controllo di destinazione. Tutte le proprietà possono essere definite in un componente [ControlName]Style separato (ad esempio ButtonStyle).
Quindi nel componente target (ad esempio Button) è sufficiente fare riferimento al componente di stile in una riga di codice.

L'unico svantaggio qui è che i componenti di stile sono disponibili solo per Qt Quick Controls. Non per qualsiasi componente Qt.