Grid Layout arrangement

[Vijaykarthikeyan]

I want to code out a grid layout in QML. After initializing rows and columns count, and elements and when running the project, the grid Layout arrange the elements in center only. I have searched the solution for this where I have found that Grid layout arranges the elements from the center by default and not from 1st row 1st column. How to arrange the elements in QML from the beginning of the layout instead of from center.

[ChrisW67]

@Vijaykarthikeyan You mean exactly like the example in the GridLayout docs?

[Vijaykarthikeyan]

@ChrisW67 Yes Sir. Even when I exactly worked out the example which is in that link you posted, it always starting from center. I don't want to arrange my elements in center.
As I want to create a side panel navigation like display, starting from the middle of the grid layout is not preferable. Also, I don't want to implement other layouts like RowLayout and ColumnLayout

[ChrisW67]

@Vijaykarthikeyan Show us what you mean by "always starting from center" in a screen shot along with a minimal, compilable example that produces that behaviour.

[Vijaykarthikeyan]

@Vijaykarthikeyan I have defined Layout.row and Layout.column. Now it is working but like this now:

It is not exactly looking like a table form? Isn't it?

GridLayout
                    {
                        id:grid
                        anchors.fill: parent
                        rows:60
                        columns: 3

                        Text { text: "Three";Layout.row: 0;Layout.column: 0; font.bold: true; }
                        Text { text: "words"; Layout.row: 1;Layout.column: 1;color: "red" }
                        Text { text: "in";Layout.row: 2; Layout.column: 2;font.underline: true }
                        Text { text: "a"; Layout.row: 3;Layout.column: 2;font.pixelSize: 20 }
                        Text { text: "row"; Layout.row: 7;Layout.column: 0;font.strikeout: true }
                    }
}

[Vijaykarthikeyan]

@Vijaykarthikeyan Ok,Now I have used Layout.alignment = Qt.Qt.AlignTop for the 1st three elements. It is working. But on using this rule for next row,it fails? why

[Vijaykarthikeyan]

@Vijaykarthikeyan Even I explicitly coded the width of each item, it is not changing still

GridLayout
                    {
                        id:grid
                        anchors.fill: parent
                        rows:5
                        columns: 3
                        rowSpacing:  0
                        property int cellWidth: 10
                        property int cellHeight: 10

                        Text { id:row1;text: "Three";width: grid.cellWidth;height: grid.cellHeight;Layout.row: 0;Layout.column: 0;Layout.alignment: Qt.AlignTop; font.bold: true; }
                        Text { text: "words";width: grid.cellWidth; height: grid.cellHeight;Layout.row: 0;Layout.column: 1;Layout.alignment: Qt.AlignTop;color: "red" }
                        Text { text: "in";Layout.row: 0;width:grid.cellWidth; height: grid.cellHeight; Layout.column: 2;Layout.alignment: Qt.AlignTop;font.underline: true }
                        Text { text: "a";width: grid.cellWidth;height: grid.cellHeight; Layout.row: 1;Layout.column: 0;Layout.alignment: Qt.AlignTop;font.pixelSize: 20 }
                        Text { text: "row";width:grid.cellWidth; height: grid.cellHeight; Layout.row: 4;Layout.column: 0;font.strikeout: true }
                    }