Back to Qt.io
Contact Us Blog Download Qt
本页内容

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: 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:
Gradient {
  GradientStop {
    position: 0.0
    color: "#F0F0F0"
  }
  GradientStop {
    position: 0.5
    color: "#000000"
  }
  GradientStop {
    position: 1.0
    color: "#F0F0F0"
  }
}
gradient:
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)。为起始点和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.