QML类型说明-LinearGradient

LinearGradient

ImportStatement:   import QtGraphicalEffects 1.0

Since:  QtGraphicalEffects 1.0

Inherits:      Item

 

Properties

cached :bool

end :variant

gradient :Gradient

source :variant

start :variant

 

DetailedDescription

两个或两个以上的颜色，混合无缝连接。颜色从给定的开始点开始，在给定的结束点结束。

效果

 

下面的代码展示了怎样应用这个效果。

importQtQuick 2.0

importQtGraphicalEffects 1.0

 

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" }

        }

    }

}

 

PropertyDocumentation

cached :bool

是否缓存输出，缓存提高渲染性能但消耗更多内存。每当源或者影响属性发生变化，缓存都会更新。如果源或影响是动画，推荐关闭缓存。默认为假。

 

end :variant

渐变位置为1.0的点。在较小位置的色彩向终点线性渐变。默认值为Qt.point(0, height)。设置默认的开始和结束点。渐变将沿着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表示，定义在position属性中，颜色定义在color属性中。

Gradient的影响
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

渐变的区域。源组件被渲染进中间像素缓冲。缓冲的alpha值决定渐变像素的可见性。source的默认值为undefined。在这种情况下，渐变填充整个区域。

Source的影响
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)

注意source不支持影响自身，所以不能设置父到source上。

 

start :variant

渐变位置为0.0的点。start的点和end的点连成直线，颜色按其垂线的平行线渐变渲染。默认值是Qt.point(0, 0)。设置start和end为默认值，将在整个区域沿Y轴线性渐变整个高。

Start的影响
start: QPoint(0, 0)	start: QPoint(150, 150)	start: QPoint(300, 0)
end: QPoint(300, 300)	end: QPoint(300, 300)	end: QPoint(300, 300)