Grid

Контейнер-позиционер Grid размещает элементы в виде сетки или таблицы. Для создания сетки тип Grid устанавливает два свойства:

• columns: количество столбцов

• rows: количество строк

Например, создадим грид из двух строк и двух столбцов:

import QtQuick

Window {
    width: 280
    height: 280
    visible: true
    title: "METANIT.COM"

    Grid{
        columns: 2
        rows: 2
        Rectangle{
            height: 80
            width: 80
            color: "#eb4d4b"    // красный
        }
        Rectangle{
            height: 80
            width: 80
            color: "#16a085"    // зеленый
        }
        Rectangle{
            height: 80
            width: 80
            color: "#0984e3"    // синий
        }
    }
}

Пересечение 2 строк и 2 столбцов создает 4 ячейки. В примере выше у нас три прямоугольника Rectangle, которые будут размещаться подряд каждый в отдельную ячейку. И поскольку в гриде 4 ячейки, а прямоугольников всего 3, то последняя ячейка будет свободной:

Установка отступов в гриде

Как и другие позиционеры, грид позволяет установить отступы между соседними элементами с помощью свойства spacing:

import QtQuick

Window {
    width: 280
    height: 280
    visible: true
    title: "METANIT.COM"

    Grid{
        columns: 2
        rows: 2
        spacing: 10 // пространство между соседними элементами
        Rectangle{
            height: 100
            width: 100
            color: "#eb4d4b"    // красный
        }
        Rectangle{
            height: 100
            width: 100
            color: "#16a085"    // зеленый
        }
        Rectangle{
            height: 100
            width: 100
            color: "#0984e3"    // синий
        }
        Rectangle{
            height: 100
            width: 100
            color: "#e67e22"    // оранжевый
        }
    }
}

Но в дополнение грид также предоставляет свойство columnSpacing для установки отступов между столбцами и rowSpacing для установки отступов между строками, если отстпуы между столбцами и строками должны отличаться по размеру:

import QtQuick

Window {
    width: 280
    height: 280
    visible: true
    title: "METANIT.COM"

    Grid{
        columns: 2
        rows: 2
        rowSpacing: 10 // пространство между строками
        columnSpacing: 5 // пространство между столбцами
        Rectangle{
            height: 100
            width: 100
            color: "#eb4d4b"    // красный
        }
        Rectangle{
            height: 100
            width: 100
            color: "#16a085"    // зеленый
        }
        Rectangle{
            height: 100
            width: 100
            color: "#0984e3"    // синий
        }
        Rectangle{
            height: 100
            width: 100
            color: "#e67e22"    // оранжевый
        }
    }
}

И как и другие позиционеры, элемент Grid позволяет определить отступы между элементами и границами контейнера с помощью следующих свойств:

• padding: отступ от всех четырех границ контейнера

• bottomPadding: отступ снизу

• leftPadding: отступ слева

• rightPadding: отступ справа

• topPadding: отступ сверху

import QtQuick

Window {
    width: 280
    height: 280
    visible: true
    title: "METANIT.COM"

    Grid{
        columns: 2
        rows: 2
        padding: 10 // отступ между элементами и границами грида
        rowSpacing: 15 // пространство между строками
        columnSpacing: 5 // пространство между столбцами
        Rectangle{
            height: 100
            width: 100
            color: "#eb4d4b"    // красный
        }
        Rectangle{
            height: 100
            width: 100
            color: "#16a085"    // зеленый
        }
        Rectangle{
            height: 100
            width: 100
            color: "#0984e3"    // синий
        }
        Rectangle{
            height: 100
            width: 100
            color: "#e67e22"    // оранжевый
        }
    }
}

Выравнивание элементов

Свойства horizontalItemAlignment и verticalItemAlignment позволяют установить соответственно выравнивание элементов по горизонтали и вертикали. Для свойства horizontalItemAlignment в качестве значения можно установить одно из следующих значений:

• Grid.AlignLeft: элементы выравниваются по левому краю (значение по умолчанию при левосторонней ориентации)

• Grid.AlignRight: элементы выравниваются по правому краю (значение по умолчанию при правосторонней ориентации)

• Grid.AlignHCenter: элементы выравниваются по центру по горизонтали

Для свойства verticalItemAlignment в качестве значения можно установить одно из следующих значений:

• Grid.AlignTop: элементы выравниваются по верхнему краю (значение по умолчанию)

• Grid.AlignBottom: элементы выравниваются по нижнему краю

• Grid.AlignVCenter: элементы выравниваются по центру по вертикали

Выравнивание по вертикали по центру:

import QtQuick

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"
    Grid{
        columns: 3
        rows: 1
        spacing: 10
        verticalItemAlignment: Grid.AlignVCenter    // по центру по вертикали
        Rectangle{
            height: 50
            width: 60
            color: "#eb4d4b"    // красный
        }
        Rectangle{
            height: 80
            width: 60
            color: "#16a085"    // зеленый
        }
        Rectangle{
            height: 40
            width: 60
            color: "#0984e3"    // синий
        }
    }
}

Для изменения направления элементов можно использовать свойство layoutDirection, которое может принимать одно из двух значений:

• Qt.LeftToRight: элементы располагаются слева направо (значение по умолчанию)

• Qt.RightToLeft: элементы располагаются справа налевo

import QtQuick

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"
    Grid{
        columns: 3
        rows: 1
        spacing: 10
        layoutDirection: Qt.RightToLeft     // направление справа налево
        Rectangle{
            height: 50
            width: 60
            color: "#eb4d4b"    // красный
        }
        Rectangle{
            height: 80
            width: 60
            color: "#16a085"    // зеленый
        }
        Rectangle{
            height: 40
            width: 60
            color: "#0984e3"    // синий
        }
    }
}