Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

Forums

OverviewFelgo 2 Support (Qt 5) › qml grid with different column widths

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #14846

    Bas

    hi,

    is there an easy way to create a grid with different column widths?

    thanx,

    Bas

    #14855

    Günther
    Felgo Team

    Hi Bas!

    The Grid type automatically sizes it’s columns based on the content, so you can create a grid with different columns widths with something like that:

    Grid {
        columns: 3
    
        // first col: width 100
        Rectangle {
          color: "blue"
          width: 100
          height: 30
        }
    
        // 2nd col: width 200
        Rectangle {
          color: "green"
          width: 200
          height: 30
        }
    
        // 3rd col: width 150
        Rectangle {
          color: "orange"
          width: 150
          height: 30
        }
      }

    If you want to have different column width in each row, you can also combine the Column and Row types manually:

    // one column that holds several rows
      Column {
        
        // first row with independent col widths
        Row {
          // first col item
          Rectangle { }
          
          // 2nd col item
          Rectangle { }
          
          // 3rd col item
          Rectangle { }
        }
        
        // second row with independent col widths
        Row {
          // first col item
          Rectangle { }
          
          // 2nd col item
          Rectangle { }
          
          // 3rd col item
          Rectangle { }
        }
        
        // more rows ...
      }

     

    Another option, that is very flexible, would be to use QML Layouts, e.g. a GridLayout. It essentially works like a grid, but allows to specify your desired preferred or minimum cell width/height with attached properties like Layout.preferredWidth.

    Best,
    Günther

     

     

    #14860

    Marcin
Viewing 3 posts - 1 through 3 (of 3 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded