Тип QML Rectangle

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

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

Свойства

• antialiasing : bool
• border
  • border.width : int
  • border.color : цвет
• color : цвет
• 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 улучшает внешний вид закругленного прямоугольника за счет производительности рендеринга. Вы должны рассмотреть возможность отключения этого свойства для прямоугольников в движении и устанавливать его только когда они неподвижны.

См. также Изображение.

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

antialiasing : bool

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

По умолчанию значение true для Rectangles с радиусом и 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 : Градиент

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

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

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" }
    }
}

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

См. также Градиент и цвет.

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

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

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