Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Place items in GridLayout leaving empty column



  • I want to organize my elements in the following manner:

    |______text___button|

    So the text is centered and button aligned to right.

    My code:

    GridLayout 
            {
                Layout.fillWidth: true
                columns: 3
    
                Item {                
                	Layout.row: 0
                    Layout.column: 0
                }
                Text
                {
                    Layout.alignment: Qt.AlignHCenter
                    horizontalAlignment: Text.AlignHCenter
                    text: "text"
                    color: "white"
                    Layout.row: 0
                    Layout.column: 1
                }
                Button
    			{
                   
                    Layout.alignment: Qt.AlignRight
    				
                   
                    implicitHeight: 35
    	        implicitWidth: 35
                    Layout.row: 0
                    Layout.column: 2
    			}
            }
    

    But it organizes them like:
    |text___button___________|

    What can i do about it?



  • @Kyeiv said in Place items in GridLayout leaving empty column:

    anchors.horizontalCenter: parent.horizontalCenter

    you can't use "anchors" inside an item that is direct child of a QML Layout, you should see a warning for that.

    This will put the text exactly in the center

        GridLayout{
                anchors.fill : parent
                columns : 3   
                Item{ 
                   Layout.fillWidth:true
                   Layout.columnSpan  : 3
                    Text{
                       text : "Hello"   
                       anchors.centerIn:parent
                    }
                    Button{
                      anchors.right:parent.right
                      anchors.verticalCenter:parent.verticalCenter
                    }
                }
        }
    


  • @Kyeiv hi you can simply set attached property "Layout.fillWidth" to true in on your dummy Item
    see also "preferredWidth"
    https://doc.qt.io/qt-5/qml-qtquick-layouts-layout.html#attached-properties



  • @ODБOï I am afraid it's not so simple because setting Item's Layout.fillWidth: true shifts everything to the right, so Text is not centered



  • @Kyeiv said in Place items in GridLayout leaving empty column:

    it's not so simple

    how about using preferredWidth as i suggested ?

     GridLayout{
                anchors.fill : parent
                columns : 3
                    
                Item{
                  Layout.fillWidth:true 
                  Layout.preferredWidth : 50
                   }
                
                Text{
                  text : "Hello"   
                  Layout.preferredWidth : 50
                  Layout.fillWidth:true
                }
                
                Button{
                }
        }
    

    another solution

        
        GridLayout{
                anchors.fill : parent
                columns : 3
        
                Item{ 
                   Layout.fillWidth:true
                   Layout.columnSpan  : 2 
                    Text{
                       text : "Hello"   
                       anchors.centerIn:parent
                     }
                }
                
                Button{
                }
        }
    


  • @ODБOï said in Place items in GridLayout leaving empty column:

    anchors.centerIn:parent

    unfortunately your solutions still shift the text to left or right.

    The only solution that i came up to and works but is ugly:

    GridLayout 
            {
                Layout.fillWidth: true
                columns: 3
    
                Item {
                    Layout.fillWidth: true                
                }
                Text
                {
                    Layout.fillWidth: true
                    Layout.alignment: Qt.AlignHCenter
                    anchors.horizontalCenter: parent.horizontalCenter
                    horizontalAlignment: Text.AlignHCenter
                    text: "text"
                    color: "white"
                }
                Button
    	    {
                    Layout.alignment: Qt.AlignRight
                    implicitHeight: 35
                    Layout.maximumWidth: 35
    	    }
            }
    


  • @Kyeiv said in Place items in GridLayout leaving empty column:

    anchors.horizontalCenter: parent.horizontalCenter

    you can't use "anchors" inside an item that is direct child of a QML Layout, you should see a warning for that.

    This will put the text exactly in the center

        GridLayout{
                anchors.fill : parent
                columns : 3   
                Item{ 
                   Layout.fillWidth:true
                   Layout.columnSpan  : 3
                    Text{
                       text : "Hello"   
                       anchors.centerIn:parent
                    }
                    Button{
                      anchors.right:parent.right
                      anchors.verticalCenter:parent.verticalCenter
                    }
                }
        }