Тип QML Rectangle

Рисует заполненный прямоугольник с необязательной рамкой. Подробнее...

• Список всех членов, включая унаследованные

Свойства

• antialiasing : bool
• border
  • border.width : int
  • border.color : цвет
• color : цвет
• gradient : Gradient
• radius : вещественное число

Подробное описание

Элементы Rectangle используются для заполнения областей сплошным цветом или градиентами, а также для создания прямоугольной рамки.

Внешний вид

Каждый элемент Rectangle рисуется с использованием либо сплошного цвета заливки, заданного свойством color, либо градиента, определённого типом Gradient и заданного свойством gradient. Если заданы и цвет, и градиент, используется градиент.

Вы можете добавить необязательную рамку прямоугольнику со своим цветом и толщиной, задав свойства border.color и border.width. Установите цвет в «прозрачный», чтобы нарисовать рамку без цвета заливки.

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

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

Следующий пример демонстрирует влияние некоторых общих свойств на элемент Rectangle, который в данном случае используется для создания квадрата:

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100
    color: "red"
    border.color: "black"
    border.width: 5
    radius: 10
}

Производительность

Использование свойства Item::antialiasing улучшает внешний вид скругленного прямоугольника за счёт снижения производительности отрисовки. Вы должны рассмотреть отмену этого свойства для движущихся прямоугольников и устанавливать его только когда они неподвижны.

См. также Image.

Документация по свойствам

antialiasing : bool

Используется для определения, должен ли Rectangle использовать сглаживание или нет. Сглаживание содержит информацию о влиянии этого свойства на производительность.

По умолчанию для Rectangles с радиусом равно true, в противном случае - false.

border.width : int

Ширина и цвет, используемые для рисования рамки прямоугольника.

Ширина 1 создаёт тонкую линию. Для отсутствия линии используйте ширину 0 или прозрачный цвет.

Примечание: Ширина рамки прямоугольника не влияет на геометрию самого прямоугольника или его положение относительно других элементов, если используются якоря.

Рамка отрисовывается в пределах границ прямоугольника.

color : цвет

Это свойство содержит цвет, используемый для заполнения прямоугольника.

Цвет по умолчанию - белый.

Следующий пример показывает прямоугольники с цветами, заданными в шестнадцатеричной и именованной цветовой нотации:

Rectangle {
    color: "#00B000"
    width: 80; height: 80
}

Rectangle {
    color: "steelblue"
    y: 100; width: 80; height: 80
}

Если заданы и градиент, и цвет, будет использован градиент.

См. также gradient.

gradient : Gradient

Градиент, используемый для заполнения прямоугольника.

Это свойство позволяет создавать простые вертикальные градиенты. Другие градиенты можно сформировать, добавив поворот к прямоугольнику.

Rectangle {
    y: 0; width: 80; height: 80
    color: "lightsteelblue"
}

Rectangle {
    y: 100; width: 80; height: 80
    gradient: Gradient {
        GradientStop { position: 0.0; color: "lightsteelblue" }
        GradientStop { position: 1.0; color: "blue" }
    }
}

Rectangle {
    y: 200; width: 80; height: 80
    rotation: 90
    gradient: Gradient {
        GradientStop { position: 0.0; color: "lightsteelblue" }
        GradientStop { position: 1.0; color: "blue" }
    }
}

Если заданы и градиент, и цвет, будет использован градиент.

См. также Gradient и color.

radius : вещественное число

Это свойство содержит радиус угла, используемый для рисования скругленного прямоугольника.

Если radius не равен нулю, прямоугольник будет нарисован как скругленный прямоугольник, в противном случае он будет нарисован как обычный прямоугольник. Один и тот же радиус используется для всех 4 углов; в настоящее время нет способа указать разные радиусы для разных углов.