Groupboxes behaving as radiobuttons

Question

I know it is possible to have Radio Buttons (or any other item) in a GroupBox title, but the behavior of those is not linked.

Here is an image of my interface

Right now, the user can give confirmation either by clicking the "Create lesion" button, or clicking on an existing lesion in the list. I would like to let the user choose either one groupBox or the other, and disable the related information, so as to have a single confirmation button.

Answer 1

Use the label property to add the RadioButton, and ButtonGroup's attached group property to make the group boxes exclusive with each other:

import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3

ApplicationWindow {
    width: 640
    height: 480
    visible: true

    ButtonGroup {
        id: checkGroup
    }

    RowLayout {
        GroupBox {
            id: newLesionGroupBox
            title: "New lesion"

            label: RowLayout {
                RadioButton {
                    id: newLesionRadioButton
                    checked: true

                    ButtonGroup.group: checkGroup
                }
                Label {
                    text: newLesionGroupBox.title
                    font: newLesionGroupBox.font
                }
            }

            Column {
                enabled: newLesionRadioButton.checked

                Label {
                    text: "Some stuff"
                }
                Button {
                    text: "Blah"
                }
            }
        }
        GroupBox {
            id: existingLesionGroupBox
            title: "Existing lesion"

            label: RowLayout {
                RadioButton {
                    id: existingLesionRadioButton

                    ButtonGroup.group: checkGroup
                }
                Label {
                    text: existingLesionGroupBox.title
                    font: existingLesionGroupBox.font
                }
            }

            Column {
                enabled: existingLesionRadioButton.checked

                Label {
                    text: "Some stuff"
                }
                Button {
                    text: "Blah"
                }
            }
        }
    }
}

You can tidy this up a lot by making a reusable component out of the group box.

Each visual part of a control that can be customised has a link to the customisation docs, by the way. In this case, it links here:

https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-groupbox