Gradient QML Type

그라데이션 채우기를 정의합니다. 더 보기...

• 상속된 멤버를 포함한 모든 멤버 목록

속성

• orientation : enumeration
• stops : list<GradientStop>

상세 설명

그라데이션은 두 가지 이상의 색상으로 정의되며, 이 색상들은 자연스럽게 혼합됩니다.

색상은 ` GradientStop ` 자식 항목의 집합으로 지정되며, 각 항목은 그라디언트 상의 0.0에서 1.0 사이의 위치와 색상을 정의합니다. 각 ` GradientStop `의 위치는 ` position ` 속성을 설정하여 정의되며, 색상은 ` color ` 속성을 사용하여 정의됩니다.

그라디언트 정지점이 없는 그라디언트는 흰색 단색 채우기로 렌더링됩니다.

이 항목은 그라데이션을 시각적으로 표현한 것이 아님을 유의하십시오. 그라데이션을 표시하려면 그라데이션 사용을 지원하는 시각적 항목(예: Rectangle)을 사용하십시오.

사용 예

다음 예제는 빨간색에서 시작하여 직사각형 높이의 1/3 지점에서 노란색으로 자연스럽게 변하고, 녹색으로 끝나는 그라디언트를 가진 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 : enumeration

이 속성을 설정하여 그라데이션의 방향을 지정합니다.

기본값은 Gradient.Vertical입니다.

stops : list<GradientStop> [default read-only]

이 속성은 그라데이션을 설명하는 그라데이션 스톱을 포함합니다.

기본적으로 이 속성은 빈 목록을 포함합니다.

그라디언트 스톱을 설정하려면 Gradient의 자식 요소로 정의하십시오.