PDA

View Full Version : Left-to-right gradient with proper anchoring



Asperamanca
15th October 2010, 20:38
How would I do a left-to-right gradient for a rectangle that should use
anchors.fill: parent
for positioning?

The only "trick" for left-to-right gradient fill I have found so far has been to rotate the whole rectangle, but this (obviously) does more than I want. Obviously, the anchoring is calculated before the rectangle is rotated, not after, because it appears geometrically rotated.

wysota
23rd October 2010, 13:40
If you are still looking for a solution to this problem, would you consider explaining better what the problem is? You don't know how to make a linear gradient or is it something else?

ristiisa
9th November 2010, 08:10
I have not found a solution to this problem myself. But examples that illustrate the problem are as following.

A vertical gradient, anchored to parent. All is normal here.

import Qt 4.7

Rectangle {
width: 800
height: 600
id: mainContainer
color: "red"

Rectangle {
anchors.margins: 10
anchors.fill: parent
gradient: Gradient {
GradientStop { position: 0.0; color: "black" }
GradientStop { position: 0.5; color: "white" }
GradientStop { position: 1.0; color: "black" }
}
}
}

But now if you would like to have a horizontal gradient, you would be forced to rotate the rectangle. But the result is not what one would expect:

import Qt 4.7

Rectangle {
width: 800
height: 600
id: mainContainer
color: "red"

Rectangle {
anchors.margins: 10
anchors.fill: parent
rotation: 270
gradient: Gradient {
GradientStop { position: 0.0; color: "black" }
GradientStop { position: 0.5; color: "white" }
GradientStop { position: 1.0; color: "black" }
}
}
}
I attached snapshots of the painted result of posted example QML.

EDIT: Also there seems to be a bug report of similar nature -> QTBUG-10644 (http://bugreports.qt.nokia.com/browse/QTBUG-10644)