QML Styling Issues

richterX

I've read the "Styling in QML":http://qt-project.org/wiki/QmlStyling web page and I have not been able to make it work as described.

The first approach, Custom Components, works fine but would require me to generate a large number of small files specifically for styling. I find this undesirable.

The second approach, Style Object, does not seem to work - at least for my application. I have many files in my application already and some of them are dynamically loaded. The article states that "This object is instantiated in the root component, so it is available throughout the application." However, when I instantiate my style object within the root element it does not seem to be valid when used.

Here is a snapshot of my code:

@// Style.qml

QtObject {
id: style

property color fontColor: "green"
property variant style

}@

Now, I have a few questions about this, as it is based off the example in the article:

How can I make a group of properties?
What does having the variant property do for me if anything?
Do I initialize fontColor here, as shown, or when I instantiate a Style in the root object?

I have experimented with several combinations of initialization and have not gotten this to work yet. In my app's root object, I have this:

@//App.qml
Rectangle {
id: app
width: 800; height: 600

Style {
    id: style
    fontColor: "white"
}...@

When I try to use Style in another file and connect a font color to this object it returns an error:

@//dialog.qml

...
Text{
id: aLabel
text: "A:"
color: style.fontColor
...
@

The error I get is "Unable to assign [undefined] to QColor color" and the text appears black by default.

I think there are some things about QML scope that I don't have a good understanding of yet and this may be the source of my confusion because it seems like Style does not exist when I need it to.

task_struct

Hello,

to make your style visible in all qml in your application try this:

@
//App.qml
Rectangle {
id: app
width: 800; height: 600

property Style appStyle {
    id: style
    fontColor: "white"
}

@

On your third question: Values set where component is defined are default ones. If you set value to something else where you use your component, this value will be used for this instance.

richterX

Thanks. I think I got that part working somewhat. Your code needed slight modification.

@Rectangle {
id: app
width: 800; height: 600

property variant appStyle: Style {
    id: style
   fontColor: "white"
}@

Using the above code, I can get to it from anywhere in the application (even dynamically loaded objects) using the syntax below:

@appStyle.fontColor@

So, that partially solves my problem and the article is not really correct because it does not show that property variant is needed to make it work.

The lingering question now, for me is, how do you make groups of properties?

task_struct

AFAIK group properties can be created only from C++

richterX

Ok. I think I've found an ok solution:

In the below example, Style.qml can contain top level and group styles. The trick was that the "groups" can be QtObject and things that have groups under them have to be Items. The group names have to be exposed through a property (see dlgAtts exposing attributes below).
@//Style.qml

Item {
id: style

property alias dlgAtts: attributes

property color fontColor: "green"

QtObject {
     id: attributes
     property string name: "something"
     property int size: 38
}

}@

In the root element, then a Style has to be created and exposed with a "property variant".

@//Main.qml
Rectangle {
id: app
width: 800; height: 600

property variant appStyle: Style {
    id: style
}

@

Finally, from anywhere in the application, you can reference as shown in the following. The autocomplete does not seem to always work correctly, however.

@//Dialog.qml
font.pixelSize: appStyle.dlgAtts.size
@

So, the "Styling in QML":http://qt-project.org/wiki/QmlStyling article is not completely correct because it is missing some important details. Other than that, this issue is solved, but I don't know how to mark the thread as Solved.