GridLayout

GridLayout представляет расположение элементов в виде сетки или таблицы. Для создания сетки и позиционирования элементов он предоставляет ряд свойств:

• columnSpacing: отступы между столбцами

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

• flow: направление элементов

• layoutDirection: направление элементов

• rowSpacing: отступы между строками

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

• uniformCellHeights: следует ли установить у ячеек одинаковую высоту

• uniformCellWidths: следует ли установить у ячеек одинаковую ширину

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

import QtQuick
import QtQuick.Layouts

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

    GridLayout{
        columns: 2  // два столбца
        rows: 2     // две строки
        Rectangle{
            Layout.preferredHeight: 80
            Layout.preferredWidth: 80
            color: "#eb4d4b"    // красный
        }
        Rectangle{
            Layout.preferredHeight: 80
            Layout.preferredWidth: 80
            color: "#16a085"    // зеленый
        }
        Rectangle{
            Layout.preferredHeight: 80
            Layout.preferredWidth: 80
            color: "#0984e3"    // синий
        }
    }
}

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

Установка номера строки и столбцы

По умолчанию элементы размещаются в ячейках грида в порядке следования. В примере выше три прямоугольника занимали три ячейки подряд в том порядке, как они определены в коде программы. Однако для элементов GridLayout также можно явным образом установить определенную строку и столбец с помощью свойств:

• Layout.row: устанавливает номер строки

• Layout.column: устанавливает номер столбца

Пример использования:

import QtQuick
import QtQuick.Layouts

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

    GridLayout{
        columns: 2  // два столбца
        rows: 2     // две строки
        Rectangle{
            Layout.preferredHeight: 80
            Layout.preferredWidth: 80
            color: "#eb4d4b"    // красный
        }
        Rectangle{
            Layout.row: 1       // 2-я строка
            Layout.column: 0       // 1-й столбец
            Layout.preferredHeight: 80
            Layout.preferredWidth: 80
            color: "#16a085"    // зеленый
        }
        Rectangle{
            Layout.row: 1       // 2-я строка
            Layout.column: 1       // 2-й столбец
            Layout.preferredHeight: 80
            Layout.preferredWidth: 80
            color: "#0984e3"    // синий
        }
    }
}

Здесь второй элемент помещается на вторую строку в первый столбец, а третий элемент - во второй столбец.

С помощью свойств Layout.rowSpan и Layout.columnSpan можно растянуть элемент на определенное количество строк и столбцов соответственно. Например, в примерах выше было четыре ячейки и три элемента. Растянем один из элементов на два столбца:

import QtQuick
import QtQuick.Layouts

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

    GridLayout{
        columns: 2  // два столбца
        rows: 2     // две строки
        Rectangle{
            Layout.preferredHeight: 80
            Layout.preferredWidth: 80
            color: "#eb4d4b"    // красный
        }
        Rectangle{
            Layout.preferredHeight: 80
            Layout.preferredWidth: 80
            color: "#16a085"    // зеленый
        }
        Rectangle{
            Layout.columnSpan: 2    // растягиваем на два столбца
            Layout.fillWidth:true   // автоматическая ширина
            Layout.preferredHeight: 80
            color: "#0984e3"    // синий
        }
    }
}

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

Для установки отступов GridLayout предоставляет свойство columnSpacing (для отступов между столбцами) и rowSpacing (для отступов между строками):

import QtQuick
import QtQuick.Layouts

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

    GridLayout{
        columns: 2  // два столбца
        rows: 2     // две строки
        rowSpacing: 10 // пространство между строками
        columnSpacing: 15 // пространство между столбцами
        Rectangle{
            Layout.preferredHeight: 80
            Layout.preferredWidth: 80
            color: "#eb4d4b"    // красный
        }
        Rectangle{
            Layout.preferredHeight: 80
            Layout.preferredWidth: 80
            color: "#16a085"    // зеленый
        }
        Rectangle{
            Layout.preferredHeight: 80
            Layout.preferredWidth: 80
            color: "#0984e3"    // синий
        }
    }
}