Controlling size of Items in Qml Styles



  • 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.


  • Moderators

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



  • @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.


  • Moderators

    @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"
                }
            }
        }
    }
    


  • @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



Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.