Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/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:

    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 ?



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

    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.


Log in to reply