QT-Quick按钮半径问题

Question

我对QT快速自定义按钮有问题。计划的行为是按钮背景，边框和文本在悬停和按压动作上更改颜色。颜色变化方面正在工作，但是按下按钮时，它似乎会丢失其半径设置（按钮状态）。我认为这可能与突出显示的设置有关，但是将其设置为false，并不能解决它。有什么想法可能导致这种行为？

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
        }
    }


}

编辑：不要认为这是半径的变化，在按压事件期间，在baackground上显示了一些东西，因为使用了更多对比颜色按钮边缘

编辑＃2 ：尝试使用@toho建议时的行为，但是考虑到这是使用它们的第一次尝试，可能会出现错误。

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"
        }
    }
}

Answer 1

您的问题是Hoverenabled是错误的（默认情况下），
正如我在评论中所说的那样，这不是最好的练习，而是一个有效的例子：

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
            }
        }


    }
}