이 페이지에서

LinearGradient QML Type

선형 그라데이션을 그립니다. 더 보기...

Import Statement: import Qt5Compat.GraphicalEffects
Since: QtGraphicalEffects 1.0
Inherits:

Item

속성

상세 설명

그라데이션은 두 가지 이상의 색상이 매끄럽게 혼합되어 정의됩니다. 색상은 지정된 시작점에서 시작하여 지정된 끝점에서 끝납니다.

적용된 효과

흰색에서 검은색으로 이어지는 선형 그라데이션

{흰색에서 검은색으로 이어지는 선형 그라데이션}

예시

다음 예제는 이 효과를 적용하는 방법을 보여줍니다.

import QtQuick
import Qt5Compat.GraphicalEffects

Item {
    width: 300
    height: 300

    LinearGradient {
        anchors.fill: parent
        start: Qt.point(0, 0)
        end: Qt.point(0, 300)
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white" }
            GradientStop { position: 1.0; color: "black" }
        }
    }
}

속성 설명서

cached : bool

이 속성을 사용하면 렌더링 성능을 향상시키기 위해 이펙트 출력 픽셀을 캐시에 저장할 수 있습니다.

소스나 효과 속성이 변경될 때마다 캐시에 저장된 픽셀을 업데이트해야 합니다. 효과 출력을 저장하기 위해 추가 메모리 버퍼가 필요하기 때문에 메모리 사용량이 증가합니다.

소스 또는 효과 속성이 애니메이션 처리되는 경우 캐시를 비활성화하는 것이 좋습니다.

기본적으로 이 속성은 ` false`로 설정되어 있습니다.

end : variant

이 속성은 그라데이션 위치 1.0에서 색상이 렌더링되는 끝점을 정의합니다. 더 작은 위치 값에 해당하는 색상은 시작점을 향해 선형적으로 렌더링됩니다. 이 위치는 픽셀 단위로 지정되며, 기본값은 Qt.point(0, height)입니다. 시작점( start )과 끝점(end)에 기본값을 설정하면 y축을 따라 전체 높이에 걸친 선형 그라데이션이 생성됩니다.

다양한 end 값을 사용한 출력 예시

우측 하단에서 끝나는 그라데이션

중앙에서 끝나는 그라데이션

우측 상단에서 끝나는 그라데이션

end: Qt.point(300, 300) end: Qt.point(150, 150) end: Qt.point(300, 0)
start: Qt.point(0, 0)start: Qt.point(0, 0)start: Qt.point(0, 0)

gradient : Gradient

그라데이션은 두 가지 이상의 색상이 매끄럽게 혼합되어 정의됩니다. 색상은 ` GradientStop ` 자식 항목의 집합으로 지정되며, 각 항목은 0.0에서 1.0 사이의 그라데이션 상의 위치와 색상을 정의합니다. 각 ` GradientStop `의 위치는 `position` 속성으로 정의되며, 색상은 `color` 속성으로 정의됩니다.

다양한 그라데이션 값을 사용한 출력 예시

무지개 선형 그라데이션

회색 선형 그라데이션

투명에서 검은색으로의 그라데이션

gradient:
Gradient {
  GradientStop {
     position: 0.000
     color: Qt.rgba(1, 0, 0, 1)
  }
  GradientStop {
     position: 0.167
     color: Qt.rgba(1, 1, 0, 1)
  }
  GradientStop {
     position: 0.333
     color: Qt.rgba(0, 1, 0, 1)
  }
  GradientStop {
     position: 0.500
     color: Qt.rgba(0, 1, 1, 1)
  }
  GradientStop {
     position: 0.667
     color: Qt.rgba(0, 0, 1, 1)
  }
  GradientStop {
     position: 0.833
     color: Qt.rgba(1, 0, 1, 1)
  }
  GradientStop {
     position: 1.000
     color: Qt.rgba(1, 0, 0, 1)
  }
}
그라디언트:
Gradient {
  GradientStop {
    position: 0.0
    color: "#F0F0F0"
  }
  GradientStop {
    position: 0.5
    color: "#000000"
  }
  GradientStop {
    position: 1.0
    color: "#F0F0F0"
  }
}
그라디언트:
Gradient {
  GradientStop {
    position: 0.0
    color: "#00000000"
  }
  GradientStop {
    position: 1.0
    color: "#FF000000"
  }
}
start: Qt.point(0, 0)start: Qt.point(0, 0)start: Qt.point(0, 0)
end: Qt.point(300, 300)end: Qt.point(300, 300)end: Qt.point(300, 300)

source : variant

이 속성은 그라데이션으로 채워질 항목을 정의합니다. 소스 항목은 중간 픽셀 버퍼에 렌더링되며, 그 결과에서 나온 알파 값을 사용하여 디스플레이에서 그라데이션 픽셀의 표시 여부를 결정합니다. 소스의 기본값은 정의되지 않았으며, 이 경우 효과 영역 전체가 그라데이션으로 채워집니다.

다양한 소스 값을 사용한 출력 예시

전체 영역을 채우는 그라데이션

나비 모양으로 가려진 그라데이션

source: undefined source: Image { source: images/butterfly.png }
start: Qt.point(0, 0)start: Qt.point(0, 0)
end: Qt.point(300, 300)end: Qt.point(300, 300)

참고: 예를 들어 소스를 이 효과의 상위 요소로 설정하는 등, 효과가 스스로를 포함하도록 하는것은 지원되지않습니다 .

start : variant

이 속성은 그라디언트 위치 0.0에서 색상이 렌더링되는 시작점을 정의합니다. 더 큰 위치 값에 해당하는 색상은 끝점 방향으로 선형적으로 렌더링됩니다. 이 점은 픽셀 단위로 지정되며, 기본값은 Qt.point(0, 0)입니다. 시작점(start)과 끝점( end )에 기본값을 설정하면 y축을 따라 전체 높이에 걸친 선형 그라데이션이 생성됩니다.

시작 값이 다른 출력 예시

왼쪽 상단에서 시작하는 그라데이션

중심에서 시작되는 그라데이션

오른쪽 위에서 시작하는 그라데이션

start: QPoint(0, 0) 시작: QPoint(150, 150) 시작: QPoint(300, 0)
end: QPoint(300, 300)end: QPoint(300, 300)end: QPoint(300, 300)

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.