QtQuick.Controls: style changes

morte

I want change an piece of style (for example, CheckBox's text color from black to white), if i redefine color (for label property) via CheckBoxStyle this involves changes of whole style of CheckBox, not only text color.

Is there way to change an style detail (color, font, etc.) while keep others same?

Rolias

I'm not positive what you're asking but here's a complete example that changes the text of the checkbox from white to black when the state of a different control changes.

@import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Paint It Black")

Column{
    CheckBox{
        id: cbId
        text: "I want it painted black."
    }

    CheckBox {
        style: CheckBoxStyle {
            label: Text {
                color: cbId.checked? "black" : "white"
                text: "I start off white and hard to see"
            }
        }
    }
}

}

@

morte

Your example demonstrates the problem:
when we change an part of style (label text color) - that involves changes in other parts of style and whole control appearance becomes different (i also edited first post).

Rolias

I'm not following you. The code I posted changes the text color of the checkbox from white to black. That is what I thought you were after and it's all I see that changes, I don't see other parts of the style or the control changing in the image below. Maybe I'm missing it. What else do you see change? Perhaps Attaching some images of what you get versus what you want would help.

!https://dl.dropboxusercontent.com/u/41770120/PaintItBlack.png(Example Result)!

morte

On Android they looks pretty different:
!http://s7.postimg.org/41xsbrvd7/image.png(image)!

morte

!http://s10.postimg.org/jlzz0ddvd/Untitled.png(img)!

Torgeir

There is no way to do partial styling of QtQuick Controls. If you put a style on them, they use a common platform independent style as base.

Maybe you can do the Text element as a separate Item next to the CheckBox:

@
Row {
spacing: 10
CheckBox {}
Text {
color: "white"
text: "I want it painted white"
}
}
@

Rolias

So what you're asking is how to keep two separate checkboxes looking similar when you apply a style to only one of them? I don't know what constraints you're under, and I'm not set up to test on Android. Can you just assign an empty style to the other checkbox? I know under windows this will give them both a similar checkmark style when checked.

@ Column{
CheckBox{
id: cbId
style:CheckBoxStyle{}
text: "I want it painted black."
}

    CheckBox {
        style: CheckBoxStyle {
            label: Text {
                color: cbId.checked? "black" : "white"
                text: "I start off white and hard to see"
            }
        }
    }@

morte

[quote author="Torgeir" date="1415654763"]
Maybe you can do the Text element as a separate Item next to the CheckBox:

@
...
@ [/quote]
Thats what i have done yet, but its an kludge, it would be nice to have ability to modify control style keeping it platform-native, in next releases of Qt.

[quote author="Rolias" date="1415685921"]So what you're asking is how to keep two separate checkboxes looking similar when you apply a style to only one of them? I don't know what constraints you're under, and I'm not set up to test on Android. Can you just assign an empty style to the other checkbox? I know under windows this will give them both a similar checkmark style when checked.
@
...
@
[/quote]

Not just similar, i want modify control appearance keeping its native style. You can see that applying styles on Windows also brings different appearance.
!http://s28.postimg.org/s95lp3pe1/pic.png(img)!

tomasl

I've noticed the same thing as well. It's all or nothing when it comes to the native style. I see now you've added a bugreport on this: https://bugreports.qt-project.org/browse/QTBUG-42615

Inspired by the answer in http://stackoverflow.com/questions/22464651/how-to-switch-qt5-controls-qml-styles-in-realtime, I extracted the default style. However, any attempt I've done to change properties on this has failed.

My real objective is to use the "native" Android cursor and selection handles introduced in Qt 5.4 and use them for selection, and then implement copy/paste menu in my own TextField and TextArea controls. These are styled to fit the rest of the app.

Any other input on this is highly appreciated.

tomasl

I've noticed the same thing as well. It's all or nothing when it comes to the native style. I see now you've added a bugreport on this: https://bugreports.qt-project.org/browse/QTBUG-42615

Inspired by the answer in http://stackoverflow.com/questions/22464651/how-to-switch-qt5-controls-qml-styles-in-realtime, I extracted the default style. However, any attempt I've done to change properties on this has failed.

My real objective is to use the "native" Android cursor and selection handles introduced in Qt 5.4 and use them for selection, and then implement copy/paste menu in my own TextField and TextArea controls. These are styled to fit the rest of the app.

Any other input on this is highly appreciated.