Setting radio button as group box title - qt

Question

Is it possible to place radio button as group box header in qml. If yest can you give me some hint how can be done. I saw option to change title to check box but it doesn't feet my solution.

Answer 1

It's not currently possible to do this with GroupBox, as it doesn't offer a styling API. You have these options:
Use the checkable property, which gives you a CheckBox, not a RadioButton, as you know.
Use the private GroupBoxStyle type and then define your own checkbox component that is a RadioButton. This is private API though, which means it can change at any point.
Somehow place a non-interactive but visual item over the top of the CheckBox that is produced with the checkable property, and filter the events that would go to that checkbox. This is quite difficult, and I'm not sure if it would work.
Write your own GroupBox, using the code I linked to above as a starting point.

Answer 2

Ok so what I have done based on previous (i hope:)) things is:
style: GroupBoxStyle {
padding {
top: (control.title.length > 0 || control.checkable ? TextSingleton.implicitHeight : 0) + 5
left: 8
right: 8
bottom: 6
}
checkbox:Item {
implicitWidth: 18
implicitHeight: 18
BorderImage {
anchors.fill: parent
border.top: 6
border.bottom: 6
border.left: 6
border.right: 6
}
Rectangle {
width: Math.round(TextSingleton.implicitHeight)
height: width
gradient: Gradient {
GradientStop {color: "#eee" ; position: 0}
GradientStop {color: control.pressed ? "#eee" : "#fff" ; position: 0.4}
GradientStop {color: "#fff" ; position: 1}
}
border.color: control.activeFocus ? "#16c" : "gray"
antialiasing: true
radius: height/2
anchors.left: parent.left
anchors.leftMargin: 5
anchors.top: parent.top
anchors.topMargin: 2
Rectangle {
anchors.centerIn: parent
width: Math.round(parent.width * 0.5)
height: width
gradient: Gradient {
GradientStop {color: "#999" ; position: 0}
GradientStop {color: "#555" ; position: 1}
}
border.color: "#222"
antialiasing: true
radius: height/2
Behavior on opacity {NumberAnimation {duration: 80}}
opacity: control.checked ? control.enabled ? 1 : 0.5 : 0
}
}
BorderImage {
anchors.fill: parent
anchors.margins: -1
visible: control.activeFocus
border.left: 4
border.right: 4
border.top: 4
border.bottom: 4
opacity: 0
}
}
What I get is:
And I have one more question is there an options to be set to disable opacity on radio button and text
Maybe someone may review this solution and tell me if it is ok.
Update:
Additionaly if your add:
panel:Item{
anchors.fill: parent
Loader {
id: checkboxloader
anchors.left: parent.left
sourceComponent: control.checkable ? checkbox : null
anchors.verticalCenter: label.verticalCenter
width: item ? item.implicitWidth : 0
}
Rectangle {
anchors.fill: parent
anchors.topMargin: padding.top - 7
border.color: "gray";
radius: 7;
color: "transparent"
visible: !control.flat
z: -2
}
Rectangle {
anchors.top: parent.top
anchors.left: checkboxloader.right
anchors.margins: 4
width: label.width
height: label.height
color: parent.color
z: -1
}
Text {
id: label
anchors.top: parent.top
anchors.left: checkboxloader.right
anchors.margins: 4
text: control.title
color: textColor
renderType: Settings.isMobile ? Text.QtRendering : Text.NativeRendering
opacity: 1
z: 0
}
}
Group box looks like:
This solution was done based on Mitch post