added mousearea to VerticalRadioButton

This commit is contained in:
vladimir.kuznetsov 2023-04-26 18:37:56 +03:00
parent 904e173037
commit cfc17cf290
3 changed files with 30 additions and 34 deletions

View file

@ -17,7 +17,7 @@ Item {
property string checkedBorderColor: "#FBB26A" property string checkedBorderColor: "#FBB26A"
property string checkedImageColor: "#FBB26A" property string checkedImageColor: "#FBB26A"
property string hoveredImageColor: "#A85809" property string pressedImageColor: "#A85809"
property string defaultImageColor: "transparent" property string defaultImageColor: "transparent"
property string imageSource: "qrc:/images/controls/check.svg" property string imageSource: "qrc:/images/controls/check.svg"
@ -40,6 +40,7 @@ Item {
id: indicator id: indicator
anchors.verticalCenter: checkBox.verticalCenter anchors.verticalCenter: checkBox.verticalCenter
anchors.horizontalCenter: checkBox.horizontalCenter anchors.horizontalCenter: checkBox.horizontalCenter
ColorOverlay { ColorOverlay {
id: imageColor id: imageColor
anchors.fill: indicator anchors.fill: indicator
@ -112,8 +113,8 @@ Item {
} }
onPressedChanged: { onPressedChanged: {
indicator.source = pressed ? imageSource : "" indicator.source = pressed ? imageSource : checkBox.checked ? imageSource : ""
imageColor.color = pressed ? hoveredImageColor : defaultImageColor imageColor.color = pressed ? pressedImageColor : checkBox.checked ? checkedImageColor : defaultImageColor
checkBoxBackground.color = pressed ? pressedColor : entered ? hoveredColor : defaultColor checkBoxBackground.color = pressed ? pressedColor : entered ? hoveredColor : defaultColor
} }

View file

@ -26,16 +26,21 @@ RadioButton {
property string defaultInnerCircleColor: "#FBB26A" property string defaultInnerCircleColor: "#FBB26A"
implicitWidth: background.implicitWidth + content.implicitWidth
implicitHeight: background.implicitWidth
hoverEnabled: true hoverEnabled: true
indicator: Rectangle { indicator: Rectangle {
id: background
implicitWidth: 56 implicitWidth: 56
implicitHeight: 56 implicitHeight: 56
radius: 16 radius: 16
color: { color: {
if (root.enabled) { if (root.enabled) {
if (root.hovered || contentMouseArea.entered) { if (root.hovered) {
return hoveredColor return hoveredColor
} else if (root.checked) { } else if (root.checked) {
return selectedColor return selectedColor
@ -51,6 +56,8 @@ RadioButton {
} }
Rectangle { Rectangle {
id: outerCircle
width: 24 width: 24
height: 24 height: 24
radius: 16 radius: 16
@ -114,12 +121,14 @@ RadioButton {
} }
} }
contentItem: ColumnLayout { contentItem: Item {}
ColumnLayout {
id: content id: content
anchors.left: indicator.right anchors.fill: parent
anchors.top: parent.top anchors.leftMargin: 8 + background.width
anchors.leftMargin: 8 anchors.topMargin: 4
spacing: 16 anchors.bottomMargin: 4
Text { Text {
text: root.text text: root.text
@ -150,31 +159,10 @@ RadioButton {
} }
MouseArea { MouseArea {
id: contentMouseArea anchors.fill: root
anchors.fill: content
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
hoverEnabled: true enabled: false
// onEntered: {
// checkBoxBackground.color = hoveredColor
// }
// onExited: {
// checkBoxBackground.color = defaultColor
// }
// onPressedChanged: {
// indicator.source = pressed ? imageSource : ""
// imageColor.color = pressed ? hoveredImageColor : defaultImageColor
// checkBoxBackground.color = pressed ? pressedColor : entered ? hoveredColor : defaultColor
// }
// onClicked: {
// checkBox.checked = !checkBox.checked
// indicator.source = checkBox.checked ? imageSource : ""
// imageColor.color = checkBox.checked ? checkedImageColor : defaultImageColor
// imageBorder.border.color = checkBox.checked ? checkedBorderColor : defaultBorderColor
// }
} }
} }

View file

@ -121,6 +121,7 @@ PageBase {
id: buttonGroup id: buttonGroup
spacing: 0 spacing: 0
HorizontalRadioButton { HorizontalRadioButton {
implicitWidth: (root.width - 32) / 2 implicitWidth: (root.width - 32) / 2
text: "ddsasdasd" text: "ddsasdasd"
@ -134,9 +135,15 @@ PageBase {
VerticalRadioButton { VerticalRadioButton {
text: "dsasd" text: "dsasd"
descriptionText: "asd"
checked: true
Layout.fillWidth: true
} }
VerticalRadioButton { VerticalRadioButton {
text: "dsasd" text: "dsasd"
Layout.fillWidth: true
} }
} }