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. QML GridLayout Variable Column For Varied Sized Items
Forum Updated to NodeBB v4.3 + New Features

QML GridLayout Variable Column For Varied Sized Items

Scheduled Pinned Locked Moved Solved QML and Qt Quick
2 Posts 1 Posters 505 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.
  • M Offline
    M Offline
    maydin
    wrote on last edited by
    #1
    GridLayout {
            id: grid
            anchors.horizontalCenter: parent.horizontalCenter
    //        width: 800
    //        columns: width > 200 ? 3 : 1
    
            onWidthChanged: {
                console.log("width:",childrenRect.width)
            }
    
            Repeater {
                id: repeater
                model: someModel
                delegate: Label {
                    text: modelData
                }
            }
        }
    

    My code is similar to this. Label text has varied sizes so I cannot hardcode columns attribute of GridLayout. If text is too long, there should be maximum 1 column or if text is small there can be 5 columns for example. This becomes a problem considering I have more than 10-15 rows.

    If I put a function for columns, it doesn't work well because GridLayout adds items one by one therefore there are many width changes until its done. For example it starts from 500px and goes to 1300px so if my page has maximum 1000px of width, I cannot set it like that.

    I am open to any suggestion. You don't have to be 100% confident, I can try different things if you have an idea.

    1 Reply Last reply
    0
    • M Offline
      M Offline
      maydin
      wrote on last edited by
      #2

      I found solution.

      Repeater {
                      id: repeater
                      model: someModel
                      delegate: MyRadioButton {
                          text: modelData
                      }
      
                      onItemAdded: {
                          if (item.width > maxWidth) {
                              maxWidth = item.width
                              var quotient = Math.floor(1000/maxWidth);
                              grid.columns = quotient
                          }
                      }
                  }
      
      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