Place items in GridLayout leaving empty column

Kyeiv

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?

ODБOï

@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
                }
            }
    }

ODБOï

@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

Kyeiv

@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

ODБOï

@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{
            }
    }

Kyeiv

@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
	    }
        }

ODБOï

@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
                }
            }
    }