Qt Quick GridStar layout

---

Description

The GridStar layout is a clone of the Windows Presentation Foundation's "Grid" type with star sizing capabilities, where each row and column is defined as a weighted proportion of the available space. This allows absolute control over how you want your layout to look.

---

RowDefinition Type

Properties

Name	Type	Description
weight	real	Defines a weighted proportion of the GridStar's rows. Default value is 1.0.

ColumnDefinition Type

Properties

Name	Type	Description
weight	real	Defines a weighted proportion of the GridStar's columns. Default value is 1.0.

GridStar Type

Attached Properties

Name	Type	Description
ignore	bool	Set to true if you want this attached Item to not be positioned by the layout. Default value is false.
row	int	Specifies the row in which the attached Item is positioned. Default value is 0.
column	int	Specifies the column in which the attached Item is positioned. Default value is 0.
rowSpan	int	Defines how many rows the attached Item will span/occupy. Default value is 1. Values less than or equal to 0 will span the total remaining space minus that value.
columnSpan	int	Defines how many columns the attached Item will span/occupy. Default value is 1. Values less than or equal to 0 will span the total remaining space minus that value.

Properties

Name	Type	Description
rowSpacing	real	Defines the spacing between rows in pixels.
columnSpacing	real	Defines the spacing between columns in pixels.

Methods

Name	Return Type	Parameters	Description
rowCount	int	None	Returns the number of rows in the grid definition.
columnCount	int	None	Returns the number of columns in the grid definition.
itemsAt	QVariant	int row, int column	Returns a Javascript array of the items at the cell of row and column.
getRow	QQuickItem *	int row	Get the row definition at row.
getColumn	QQuickItem *	int column	Get the column definition at column.
addRow	QQuickItem *	real weight	Adds and returns a row definition of weight weight.
addColumn	QQuickItem *	real weight	Adds and returns a column definition of weight weight.
clearRows	void	None	Clears and deletes all row definitions.
clearColumns	void	None	Clears and deletes all column definitions.
clearItems	void	None	Clears and deletes all items positioned by the grid.

---

Registration

Add include("QuickGridStar-master/quickgridstar.pri") to your project.pro, change "QuickGridStar-master" to the name of your QuickGridStar directory accordingly.

---

QML Example

import QtQuick 2.3
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.4

// IMPORTANT!
import QuickGridStar 1.0

ApplicationWindow
{
    visible: true
    width: 1280
    height: 720
    title: qsTr("GridStar")

    GridStar
    {
        RowDefinition { weight: 0.03 }
        RowDefinition { weight: 0.8 }
        RowDefinition { weight: 0.03 }

        ColumnDefinition { weight: 0.03 }
        ColumnDefinition { weight: 0.2 }
        ColumnDefinition { weight: 0.03 }
        ColumnDefinition { weight: 0.03 }
        ColumnDefinition { }
        ColumnDefinition { weight: 0.03 }

        Rectangle
        {
            GridStar.row: 0
            GridStar.column: 0
            GridStar.rowSpan: 0
            GridStar.columnSpan: 0

            color: "#CFCFCF"
        }

        Rectangle
        {
            GridStar.row: 0
            GridStar.column: 3
            GridStar.rowSpan: 0 // Span remaining rows
            GridStar.columnSpan: 3

            color: "#DDDDDD"
        }

        GridStar
        {
            GridStar.row: 1
            GridStar.column: 4
            GridStar.rowSpan: -1 // Span remaining rows minus 1

            RowDefinition { weight: 0.2 }
            RowDefinition { weight: 0.8 }

            ColumnDefinition { weight: 0.2 }
            ColumnDefinition { weight: 0.4 }
            ColumnDefinition { weight: 0.2 }

            Button
            {
                GridStar.row: 0
                GridStar.column: 1

                text: "Sub Grid Button"
            }
        }

        GridStar
        {
            GridStar.row: 1
            GridStar.column: 1

            RowDefinition { weight: 0.1 }
            RowDefinition { weight: 0.05 }
            RowDefinition { weight: 0.1 }
            RowDefinition { weight: 0.05 }
            RowDefinition { weight: 0.1 }
            RowDefinition { weight: 0.5 }
            RowDefinition { weight: 0.1 }

            ColumnDefinition { }

            Button
            {
                GridStar.row: 0
                GridStar.column: 0

                text: "Grid Button 1"
            }

            Button
            {
                GridStar.row: 2
                GridStar.column: 0

                text: "Grid Button 2"
            }

            Button
            {
                GridStar.row: 4
                GridStar.column: 0

                text: "Grid Button 3"
            }

            Button
            {
                GridStar.row: 6
                GridStar.column: 0

                text: "Grid Button 4"
            }
        }
    }
}

---

Result

---

Happy coding Qt community!