Important: Please read the Qt Code of Conduct -

Use custom elements as rows in a GridLayout

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


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


    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 ?

  • 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 ;)

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


    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:


    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:


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


    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.

Log in to reply