Тип 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>

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

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

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