Qt-Quick button radius issue

Question

I'm having an issue with a Qt Quick custom button. The planned behaviour is the button background, border, and text changes color on hover and pressed actions. The color change aspect is working, but when the button is pressed, it appears to lose it's radius setting (image of button states). I thought this might be related to the highlighted setting, but setting that to false, doesn't fix it. Any ideas what might be causing this behaviour?

import QtQuick 2.15
import QtQuick.Controls 2.15

Button {
    id: customButton
    text: qsTr("Custom Button")
    highlighted: false
    flat: true
    implicitWidth: 200
    implicitHeight: 40

    // Custom Properties
    // Button Colors
    property color defaultButtonColor: "#DB8000"
    property color hoverButtonColor: "#784491"
    property color pressedButtonColor: "#315718"
    // Text Colors
    property color defaultTextColor: "#ffffff"
    property color hoverTextColor: "#ffffff"
    property color pressedTextColor: "#000000"


    QtObject {
        id: internal
        property var dynamicColor: if (customButton.down) {
                                       customButton.down ? pressedButtonColor : defaultButtonColor
                                   } else {
                                       customButton.hovered ? hoverButtonColor : defaultButtonColor
                                   }
        property var dynamicText: if (customButton.down) {
                                       customButton.down ? pressedTextColor : defaultTextColor
                                   } else {
                                       customButton.hovered ? hoverTextColor : defaultTextColor
                                   }
    }

    background: Rectangle {
        id:bg_customButton
        radius: 15
        color: internal.dynamicColor
        border.color: "#000000"
    }

    contentItem: Item {
        id: item1_customButton
        Text {
            id: text_customButton
            text: customButton.text
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            color: internal.dynamicText
        }
    }


}

Edit: Don't think it's the radius changing, something is being displayed over the baackground during the pressed event as the border is partial visible if more contrasting colors are used pressed button edges

Edit#2: Same behaviour when trying to use States, as suggested by @TOHO, but there could be errors in this given it's a first attempt as using them.

import QtQuick 2.15
import QtQuick.Controls 2.15

Button {
    id: customButton

    // Button Colors
    property color defaultButtonColor: "#DB8000"
    property color hoverButtonColor: "#784491"
    property color pressedButtonColor: "#315718"
    // Border Colors
    property color defaultBorderColor: "#ffffff"
    property color hoverBorderColor: "#ffffff"
    property color pressedBorderColor: "#FF0800"
    // Text Colors
    property color defaultTextColor: "#ffffff"
    property color hoverTextColor: "#ffffff"
    property color pressedTextColor: "#000000"

    text: qsTr("Custom Button")
    clip: false
    highlighted: false
    flat: true
    hoverEnabled: true
    implicitWidth: 200
    implicitHeight: 40

    onHoveredChanged: if (hovered) {bg_customButton.state = "HOVER"} else {bg_customButton.state = "DEFAULT"}
    onReleased: bg_customButton.state = "DEFAULT"
    onPressed: bg_customButton.state = "PRESS"

    background: Rectangle {
        id: bg_customButton
        radius: 15
        border.color: defaultBorderColor
        state: "DEFAULT"

        states: [
            State {
                name: "DEFAULT"
                PropertyChanges { target: bg_customButton; color: defaultButtonColor; border.color: defaultBorderColor}
                PropertyChanges { target: text_customButton; color: defaultTextColor}
            },
            State {
                name: "HOVER"
                PropertyChanges { target: bg_customButton; color: hoverButtonColor; border.color: hoverBorderColor}
                PropertyChanges { target: text_customButton; color: hoverTextColor}
            },
            State {
                name: "PRESS"
                PropertyChanges { target: bg_customButton; color: pressedButtonColor; border.color: pressedBorderColor}
                PropertyChanges { target: text_customButton; color: pressedTextColor}
            }
        ]
    }

    contentItem: Item {
        id: item1_customButton
        clip: true
        Text {
            id: text_customButton
            text: customButton.text
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            state: "DEFAULT"
        }
    }
}

works for me, if I put of course all the `property color *` inside QtObject — folibis, Jun 19 '22 at 13:15
you are taking the wrong path using JS for properties, try using states and transition https://doc.qt.io/qt-5/qml-tutorial3.html — ניר, Jun 19 '22 at 14:00
run your code here https://qmlonline.kde.org/ it worked for me (the second edit) and BTW you dont need to set the state explicitly, use the when property of State — ניר, Jun 20 '22 at 04:12
That works as expected, so clearly some Win11 weirdness on my side. Thansk. — CodgerCoder, Jun 20 '22 at 08:22

score 0 · Answer 1 · edited Jun 20 '22 at 02:28

your problem was that hoverEnabled was false (by default), and as I said in comments this is not best practice but here is a working example:

import QtQuick 2.15
import QtQuick.Controls 2.15

Rectangle {
    id: root
    anchors.fill: parent;
    color: "grey"
    Button {
        anchors.centerIn: parent;
        id: customButton
        text: qsTr("Custom Button")
        highlighted: false
        flat: true
        implicitWidth: 200
        implicitHeight: 40
        hoverEnabled: true
        // Custom Properties
        // Button Colors
        property color defaultButtonColor: "#DB8000"
        property color hoverButtonColor: "#784491"
        property color pressedButtonColor: "#315718"
        // Text Colors
        property color defaultTextColor: "#ffffff"
        property color hoverTextColor: "#ffffff"
        property color pressedTextColor: "#000000"
        readonly property color currentColor: down? pressedButtonColor: hovered ? hoverButtonColor : defaultButtonColor;
        readonly property color currentTextColor: down? pressedTextColor: hovered ? hoverTextColor : defaultTextColor;

        background: Rectangle {
            id:bg_customButton
            radius: 15
            color: customButton.currentColor
            border.color: "#000000"
        }

        contentItem: Item {
            id: item1_customButton
            Text {
                id: text_customButton
                text: customButton.text
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                color: customButton.currentTextColor
            }
        }


    }
}

There must be something odd going on with my system, if I try your code I still get the same behaviour when pressing the button. See a similar thing when trying to use States, but could have got something wrong with those as I've never used them before. — CodgerCoder, Jun 19 '22 at 19:54

Qt-Quick button radius issue

1 Answers1