Компоновка, размеры и позиционирование в QML и Qt Quick

Позиционирование и размеры элементов

Позиционирование и размеры элементов в QML можно выполнить вручную или автоматически. В данной статиье рассмотрим, как это сделать вручную.

При ручном позиционировании мы явным образом указываем координаты X и Y верхнего левого угла элемента. Например, возьмем элемент Rectangle, который представляет прямоугольник, и расположим его верхний левый угол в точке (Х=20, Y=10):

import QtQuick

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

    // прямоугольник позиционируется на точку (х=20, у=10)
    Rectangle{
        x: 20
        y: 10
    }
}

Чтобы задать размеры элемента вручную, у него устанавливаются свойства width (ширина) и height (высота):

import QtQuick

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

    Rectangle{
        x: 20           // X-координата
        y: 10           // Y-координата
        width: 150      // ширина
        height: 100     // высота
        color: "green"  // цвет - зеленый
    }
}

Чтобы прямоугольник было видно, я добавил к нему свойство "color", которое представляет цвет фона - в данном случае зеленый цвет. То есть мы получим следующее окно: