Тип QML Gradient

Определяет заливку градиентом. Подробнее...

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

Свойства

• orientation : перечисление
• stops : список<GradientStop>

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

Градиент определяется двумя или более цветами, которые будут плавно смешиваться.

Цвета задаются как набор дочерних элементов GradientStop, каждый из которых определяет позицию на градиенте от 0,0 до 1,0 и цвет. Позиция каждого GradientStop задается свойством position; его цвет задается свойством color.

Градиент без градиентных остановок отображается как заливка тёмно-белого цвета.

Обратите внимание, что этот элемент не является визуальным представлением градиента. Для отображения градиента используйте визуальный элемент (например, Rectangle), который поддерживает использование градиентов.

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

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

Rectangle {
    width: 100; height: 100
    gradient: Gradient {
        GradientStop { position: 0.0; color: "red" }
        GradientStop { position: 0.33; color: "yellow" }
        GradientStop { position: 1.0; color: "green" }
    }
}

Производительность и ограничения

Вычисление градиентов может быть вычислительно дорогостоящим по сравнению с использованием заливки тёмно-белого цвета или изображений. Рассмотрите использование градиентов для статических элементов в пользовательском интерфейсе.

Начиная с Qt 5.12, вертикальные и горизонтальные линейные градиенты могут применяться к элементам. Если вам необходимо применить наклонные градиенты, можно применить комбинацию вращения и обрезки к соответствующим элементам. Кроме того, рассмотрите использование QtQuick.Shapes::LinearGradient или QtGraphicalEffects::LinearGradient. Все эти подходы могут добавить дополнительные требования к производительности вашего приложения.

Использование анимаций, включающих градиентные остановки, может не дать ожидаемого результата. Альтернативный способ анимировать градиенты — использовать предварительно сгенерированные изображения или SVG-рисунки, содержащие градиенты.

См. также GradientStop.

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

orientation : перечисление

Установите это свойство для определения направления градиента.

• Gradient.Vertical - вертикальный градиент
• Gradient.Horizontal - горизонтальный градиент

По умолчанию используется Gradient.Vertical.

Это свойство было добавлено в Qt 5.12.

[default] stops : список<GradientStop>

Это свойство содержит градиентные остановки, описывающие градиент.

По умолчанию это свойство содержит пустой список.

Для установки градиентных остановок определите их как дочерние элементы градиента.