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 를참조하세요 .

속성 문서