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. Use custom elements as rows in a GridLayout
QtWS25 Last Chance

Use custom elements as rows in a GridLayout

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
gridlayout
3 Posts 3 Posters 621 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.
  • P Offline
    P Offline
    plaristote
    wrote on 26 Feb 2021, 23:36 last edited by
    #1

    Greetings !

    I'm trying to build a GridLayout with custom rows. I would want the children of my custom element to be aligned on the grid, as if they were direct children of the grid... though I have no idea if that's even possible.

    To better explain myself, here's what I would like my QML to look like:

    InteractiveTable.qml

    import QtQuick 2.12
    import QtQuick.Layouts 2.12
    
    GridLayout {
      columns: 3
    
      Repeater {
        model: 23
        delegate: MyRow { rowNum: index }
      }
    }
    

    MyRow.qml

    import QtQuick 2.12
    import QtQuick.Controls 2.12
    
    Item {
      property int rowNum
    
      Label { text: rowNum }
      TextInput { text: "my input" }
      Button { text: "my button" }
    }
    

    I would like the Label, TextInput and Button elements from MyRow.qml to be aligned on the GridLayout, instead of their parent Item.

    Is there an easy way to achieve what I want ?

    1 Reply Last reply
    1
    • M Offline
      M Offline
      Markkyboy
      wrote on 2 Mar 2021, 15:45 last edited by
      #2

      Perhaps to give us a visual idea of what you're looking for?, something mocked up in Paint perhaps? ........a picture paints a thousand words ;)

      Don't just sit there standing around, pick up a shovel and sweep up!

      I live by the sea, not in it.

      1 Reply Last reply
      0
      • S Offline
        S Offline
        stefano.m
        wrote on 8 Apr 2021, 10:29 last edited by stefano.m 4 Aug 2021, 11:01
        #3

        I'm also looking for a solution to the same issue.

        I think what @plaristote meant was, let's say I have a custom QML component with a Label and a Button in a RowLayout:

        Custom.qml

        import QtQuick 2.11
        import QtQuick.Controls 2.4
        import QtQuick.Layouts 1.3
        
        Item {
        	id: root
        	implicitWidth:  rowLayout.implicitWidth
        	implicitHeight: rowLayout.implicitHeight
        
        	property string text: ""
        
        	RowLayout {
        		id: rowLayout
        		anchors.fill: parent
        
        		Label {
        			text: root.text
        		}
        
        		Button {
        			id: button
        			Layout.fillWidth: true
        			Layout.fillHeight: true
        			text: "Press me"
        		}
        	}
        }
        
        

        I want to put 2 Custom.qml items on top of each other:

        main.qml

        import QtQuick 2.11
        import QtQuick.Window 2.2
        import QtQuick.Layouts 1.3
        
        Window {
        	visible: true
        	width: 640
        	height: 480
        
        	ColumnLayout {
        		Custom {text: "Short label"}
        		Custom {text: "Very very long label"}
        	}
        }
        

        The output is the following:

        qt_wrong.png

        Instead I'd like the children of my Custom.qml item to be aligned like this:

        qt_good.png

        I could align the elements by setting a fixed preferredWidth to the Label of my Custom.qml, but I'd like to know if a more flexible solution exists.

        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