English Spanish Italiano Magyar

Abbellimenti in QML

QML fornisce diversi meccanismi per l’abbellimento di un’interfaccia utente. Qui di seguito sono elencati tre approcci comuni.

Approccio 1: Componente Personalizzato

QML supporta la definizione di propri componenti personalizzati [doc.qt.nokia.com]. Di seguito, creiamo un componente personalizzato TitleText che possiamo utilizzare ogni volta che la nostra interfaccia utente richiede un titolo. Se vogliamo cambiare l’aspetto di tutti i titoli della nostra interfaccia utente, possiamo editare TitleText.qml, e le modifiche si applicheranno ovunque esso venga utilizzato.

  1. // TitleText.qml
  2. Text {
  3.     horizontalAlignment: Text.AlignHCenter
  4.     font.pixelSize: 50
  5.     color: "green"
  6. }
  7.  
  8. // in uso
  9. TitleText {
  10.     text: "Title 1"
  11. }

Approccio 2: Oggetto di stile

In questo approccio definiamo un oggetto Style che contenga la definizione delle proprietà dello stile. Questo oggetto è istanziato nel componente principale, per cui è disponibile in tutta l’applicazione.

  1. // Style.qml
  2. QtObject {
  3.     property int textSize: 20
  4.     property color textColor: "green"
  5. }
  6.  
  7. // componente principale
  8. Rectangle {
  9.     ...
  10.     Style { id: style }
  11.     ...
  12. }
  13.  
  14. // in use
  15. Text {
  16.     font.pixelSize: style.textSize
  17.     color: style.textColor
  18.     text: "Hello World"
  19. }

Approccio 3: Ibrido (Oggetto di stile + Componente personalizzato)

In questo approccio, abbiamo un oggetto Style che è usato in un componente personalizzato.

  1. // Style.qml
  2. QtObject {
  3.     property int titleAlignment: Text.AlignHCenter
  4.     property int titleFontSize: 50
  5.     property color titleColor: "green"
  6. }
  7.  
  8. // componente principale
  9. Rectangle {
  10.     ...
  11.     Style { id: style }
  12.     ...
  13. }
  14.  
  15. // TitleText.qml
  16. Text {
  17.     horizontalAlignment: style.titleAlignment
  18.     font.pixelSize: style.titleFontSize
  19.     color: style.titleColor
  20. }
  21.  
  22. // in uso
  23. TitleText {
  24.     text: "Title 1"
  25. }