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

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

效果

QML类型说明-LinearGradient_第1张图片


 

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

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

QML类型说明-LinearGradient_第2张图片

QML类型说明-LinearGradient_第3张图片

QML类型说明-LinearGradient_第4张图片

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

QML类型说明-LinearGradient_第5张图片

QML类型说明-LinearGradient_第6张图片

QML类型说明-LinearGradient_第7张图片

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

QML类型说明-LinearGradient_第8张图片

QML类型说明-LinearGradient_第9张图片

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

QML类型说明-LinearGradient_第10张图片

QML类型说明-LinearGradient_第11张图片

QML类型说明-LinearGradient_第12张图片

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

你可能感兴趣的:(QML类型说明-L)