Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Controlling size of Items in Qml Styles
QtWS25 Last Chance

Controlling size of Items in Qml Styles

Scheduled Pinned Locked Moved QML and Qt Quick
radiobuttonstyleradiobuttonstylqml
5 Posts 2 Posters 5.4k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • H Offline
    H Offline
    hookie
    wrote on 6 Oct 2015, 16:51 last edited by
    #1

    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.

    P 1 Reply Last reply 7 Oct 2015, 10:17
    0
    • H hookie
      6 Oct 2015, 16:51

      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.

      P Offline
      P Offline
      p3c0
      Moderators
      wrote on 7 Oct 2015, 10:17 last edited by
      #2

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

      157

      H 1 Reply Last reply 7 Oct 2015, 19:03
      0
      • P p3c0
        7 Oct 2015, 10:17

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

        H Offline
        H Offline
        hookie
        wrote on 7 Oct 2015, 19:03 last edited by
        #3

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

        P 1 Reply Last reply 8 Oct 2015, 06:13
        0
        • H hookie
          7 Oct 2015, 19:03

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

          P Offline
          P Offline
          p3c0
          Moderators
          wrote on 8 Oct 2015, 06:13 last edited by
          #4

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

          157

          H 1 Reply Last reply 15 Oct 2015, 18:31
          0
          • P p3c0
            8 Oct 2015, 06:13

            @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"
                        }
                    }
                }
            }
            
            H Offline
            H Offline
            hookie
            wrote on 15 Oct 2015, 18:31 last edited by
            #5

            @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

            1 Reply Last reply
            0

            • Login

            • Login or register to search.
            • First post
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • Users
            • Groups
            • Search
            • Get Qt Extensions
            • Unsolved