PhBsa
PhBsa

Reputation: 63

How change the color of "Qt Quick - Control 2 RoundButton"

Anybody know how I can change the color of the control "RoundButton", present in the present in Qt Controls since 2.1.

I tried changing the background, but if I put "Rectangle" at the item the RoundButton became rectangular and I don't know what to put instead.

RoundButton {
    id: roundButton
    x: 243
    y: 244
    width: 20
    height: 20

    text: "ah"
    wheelEnabled: false

    background: Rectangle {
        color: "yellow"
        height: 50
        width: 50
    }
}

Upvotes: 3

Views: 4656

Answers (2)

user16776498
user16776498

Reputation:

You should use radius

The roundButton is just a Button (as stated here) with radius property set to 360 so in your example it will be:

RoundButton {
    id: roundButton
    x: 243
    y: 244
    width: 20
    height: 20

    text: "ah"
    wheelEnabled: false

    background: Rectangle {
        color: "yellow"
        implicitHeight: 50
        implicitWidth: 50
       radius: 360
    }
}

Note that it basically useless to do this as you could just use a Button and set the radius to 360 and it will be the same...

Upvotes: 0

Mitch
Mitch

Reputation: 24416

With Qt 5.10 you can use the palette property to avoid having to override the background:

import QtQuick 2.9
import QtQuick.Controls 2.3

ApplicationWindow {
    visible: true

    RoundButton {
        id: button
        text: "ah"

        palette.button: "salmon"
    }
}

Not all styles currently respect the palette property though: the Default and Fusion styles do, and the Imagine style does, where it can (mostly text colours, as it's an image-based style).

If you're curious which palette role to use for a particular style, it's probably easiest to look to the source code:

http://code.qt.io/cgit/qt/qtquickcontrols2.git/tree/src/imports/controls/Button.qml#n77

Although the list of roles is documented:

https://doc.qt.io/qt-5.10/qml-palette.html#qtquickcontrols2-palette

Upvotes: 7

Related Questions