Styling Qml desktop components

Question

Currently I'm working on a desktop application that supports touchscreen display. I use QML on Qt 4.8 and OpenSUSE 13.1 (I can't upgrade either Qt or the OS due to dependencies reason)

Because of the lack of main components, I use qml desktop component. However, I don't find a way to style those conveniently, like use CSS. Something like change the color of the button, change the border... seem complicated

I've read Qml styling guide, Qml integrating guide but can't find a satisfied answer.

Any ideas are appreciated :)

It is difficult to answer if we don't know exactly what you want to do. "Style a component" is too vague. — RafaelTSCS
Sorry for the late reply, it kinda like the effect of CSS on GUI components like QLineEdit, QPushButton... — Tiana987642

Istil Istil · Accepted Answer · 2017-01-20T09:20:24

sry for my english, You could make specific qml object for each type, like this

TimesItalic.qml

Text{
     FontLoader {
         id:timesNewRomanItalic;
         source:"qrc:/Assets/Fonts/times_italic"
         onStatusChanged: console.log("Font loaded " + name)
     }

     font.family: timesNewRomanItalic.name
     color : "#FFFFFF"
 }

and call this qml object each time you need it

TimesItalic{
    id:myText
    anchors.fill:parent
    text: "Times new roman italic"
}

(this example is not optimised)

Styling Qml desktop components

1 Answers