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.
| Name | Type | Description |
|---|---|---|
weight |
real |
Defines a weighted proportion of the GridStar's rows. Default value is 1.0. |
| Name | Type | Description |
|---|---|---|
weight |
real |
Defines a weighted proportion of the GridStar's columns. Default value is 1.0. |
| 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. |
| Name | Type | Description |
|---|---|---|
rowSpacing |
real |
Defines the spacing between rows in pixels. |
columnSpacing |
real |
Defines the spacing between columns in pixels. |
| 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. |
Add include("QuickGridStar-master/quickgridstar.pri") to your project.pro, change "QuickGridStar-master" to the name of your QuickGridStar directory accordingly.
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"
}
}
}
}
Happy coding Qt community!