Use custom elements as rows in a GridLayout

plaristote

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 ?

Markkyboy

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

stefano.m

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:

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.