Setting radio button as group box title

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:

1. Use the checkable property, which gives you a CheckBox, not a RadioButton, as you know.
2. 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.
3. 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.
4. 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