Controlling size of Items in Qml Styles

hookie

Hi all,
I'd like to create my own styled RadioButton, but I'm having difficulty controlling the size of the components used in the RadioButtonStyle that I am using. I want to put my RadioButton in a GridLayout and have the RadioButton take up all the available space (as if I were setting Layout.fillWidth and Layout.fillHeight to true)

To start off with, I am using the RadioButtonStyle code from the Qt docs inside a GridLayout:

GridLayout {

    columns: 3
    anchors.fill: parent

    RadioButton {
        text: "Radio Button"
        style: RadioButtonStyle {
            indicator: Rectangle {

                    implicitWidth: 16
                    implicitHeight: 16

                    Rectangle {
                        anchors.fill: parent
                        visible: control.checked
                        color: "#555"

                    }
            }
        }
     }
}

we can see that implicitWidth and implicitHeight of the indicator Rectangle are set int literals. I want to size the indicator Rectangle to fill the space provided by the layout.

I would like the width and height of the indicator Rectangle to track the width and height of the RadioButton, which in turn tracks the width and height of the GridLayout cell containing it.

Thanks in advance for any help

PS: I posted this on stackoverflow earlier but wondered whether Qt Forums would be a better place to post it.

p3c0

@hookie So why dont you want to use Layout.* properties ?

hookie

@p3c0 Hi,
Thanks for the reply!
I've tried putting the Layout.fillWidth/Height in the indicator item in the style.

Like so..

            GridLayout {
                anchors.fill: parent
                columns: 2
               // ExclusiveGroup { id: tabPositionGroup }


                RadioButton {

                    id: rdbt

                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    Layout.maximumWidth: 200
                    Layout.maximumHeight: 200

                    property alias exclusiveGroup: rdbt.exclusiveGroup


                    style: RadioButtonStyle {
                        id: ab

                        indicator: Rectangle {

                            color: "blue"
//                            height: control.height
//                            width: control.width

                            Layout.fillHeight: true
                            Layout.fillWidth: true

When I launch the app I see no blue square

However, when I do this...

                RadioButton {

                    id: rdbt

                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    Layout.maximumWidth: 200
                    Layout.maximumHeight: 200

                    property alias exclusiveGroup: rdbt.exclusiveGroup


                    style: RadioButtonStyle {
                        id: ab

                        indicator: Rectangle {

                            color: "blue"
                            height: control.height
                            width: control.width

I get a blue square with max size [200,200]

If i omit the Layout.maximumWidth/Height, the QML goes into an infinite loop trying to set the dimensions.

p3c0

@hookie Check if the following works:

GridLayout {
    columns: 3
    anchors.fill: parent
    RadioButton {
        id: button
        Layout.fillWidth: true
        Layout.fillHeight: true
        style: RadioButtonStyle {
            indicator: Rectangle {
                implicitWidth: button.width/2 //reduce to half of radiobutton's width
                implicitHeight: button.height/2
                border.width: 1
                Rectangle {
                    anchors.fill: parent
                    visible: control.checked
                    color: "#555"
                    anchors.margins: 4
                }
            }
            label: Text {
                text: "RadioButton"
            }
        }
    }
}

hookie

@p3c0 Thanks for the suggestion. Sorry about the delay in replying.

I can achieve a good result by dividing by 1.1 instead of 2. Using 1.1 I get blue box just a little bit smaller than the radio button itself.

For some reason if I make the ration 1.01, the blue box exceeds the size of the radio button.

If I simple divide by 1.0, the application fails to get out of bed.

Thanks

James