Контейнеры-позиционеры

Для автоматического управления расположением элементов QML предоставляет ряд специальных контейнеров-позиционеров (positioner):

• Column: располагает вложенные элементы в столбик

• Row: располагает вложенные элементы в строку

• Grid: располагает вложенные элементы в виде сетки

• Flow: располагает вложенные элементы подобно тому, как слова располагаются на странице

Используем контейнер Column для расположения элементов в столбик:

import QtQuick

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

    Column{
        Rectangle{
            height: 80
            width: 80
            color: "#eb4d4b"    // красный
        }
        Rectangle{
            height: 80
            width: 80
            color: "#16a085"    // зеленый
        }

        Rectangle{
            height: 80
            width: 80
            color: "#0984e3"    // синий
        }
    }
}

Расположение в строку с помощью элемента Row:

import QtQuick

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

    Row{
        Rectangle{
            height: 100
            width: 100
            color: "#eb4d4b"    // красный
        }
        Rectangle{
            height: 100
            width: 100
            color: "#16a085"    // зеленый
        }
        Rectangle{
            height: 100
            width: 100
            color: "#0984e3"    // синий
        }
    }
}

Пространство между элементами

По умолчанию элементы располагаются впритык друг к другу. Но с помощью свойства spacing можно установить пространство между элементами:

import QtQuick

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

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

Отступы

С помощью свойства padding можно настроить отступ элементов от границ контейнера:

import QtQuick

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

    Column{
        spacing: 10 // пространство между элементами
        padding: 8  // отступ от границ контейнера
        Rectangle{
            height: 80
            width: 80
            color: "#eb4d4b"    // красный
        }
        Rectangle{
            height: 80
            width: 80
            color: "#16a085"    // зеленый
        }
        Rectangle{
            height: 80
            width: 80
            color: "#0984e3"    // синий
        }
    }
}

С помощью дополнительных свойств можно настроить каждый из 4-х отступов по отдельности:

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

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

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

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

Применение:

import QtQuick

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

    Column{
        spacing: 8 // пространство между элементами
        topPadding: 10  // отступ сверху
        leftPadding: 30 // отступ слева
        rightPadding: 10 // отступ справа
        bottomPadding: 5  // отступ снизу
        Rectangle{
            height: 80
            width: 80
            color: "#eb4d4b"    // красный
        }
        Rectangle{
            height: 80
            width: 80
            color: "#16a085"    // зеленый
        }
        Rectangle{
            height: 80
            width: 80
            color: "#0984e3"    // синий
        }
    }
}