QML gradients with an orientation - qt

Question

QML gradient allows only from top to bottom in a Rectangle. The documentation says that
it has to be done through combination of rotation and clipping.
I have just started learning QML (and little experience with HTML/CSS). Here is my code which I think can be improved for a lot better:
import QtQuick 1.0
Rectangle {
width: 400; height: 400;
Rectangle {
width: 567; height: 567;
gradient: Gradient {
GradientStop {
position: 0.0;
color: "white";
}
GradientStop {
position: 1.0;
color: "blue";
}
}
x: 116.5;
transformOrigin: Item.Top;
rotation: 45.0;
}
}
Can you please suggest what are the better ways to do this?

Answer 1

I've solve this probling with the following code: https://code.google.com/p/ytd-meego/source/browse/trunk/playground/FeedBook/qmltube/HorizontalGradient.qml?r=144
Here is what I've done using the example of NielsMayer:
Rectangle {
width: parent.height
height: parent.width
anchors.centerIn: parent
rotation: 90
gradient: Gradient {
GradientStop { position: 0.0; color: "black" }
GradientStop { position: 1.0; color: "white" }
}
}
And this is working well. Have fun !

Answer 2

The Qt Graphical Effects module introduced in Qt 5.1 provides three gradient types.
With the LinearGradient item (effect) it is no longer necessary to apply rotation in order to achieve e.g. a horizontal color gradient.
In particular by means of the start and end point (attributes) of LinearGradient any gradient direction is possible.
The following code implements a 45° angle (as proposed in the original post) by starting top right with white and ending bottom left with black:
import QtQuick 2.0
import QtGraphicalEffects 1.0
Item {
id:myItem
width: 300
height: 300
LinearGradient {
anchors.fill: parent
start: Qt.point(myItem.width, 0)
end: Qt.point(0, myItem.height)
gradient: Gradient {
GradientStop { position: 0.0; color: "white" }
GradientStop { position: 1.0; color: "black" }
}
}
}

Answer 3

I'm afraid the documentation is correct.
The only other way I can think of is to write a custom QML component in C++ which does what you want.
If you have Qt/C++ knowledge you could start here:
http://doc.qt.nokia.com/4.7-snapshot/qml-extending.html
http://doc.qt.nokia.com/4.7-snapshot/declarative-tutorials-extending-chapter1-basics.html
The Rectangle could be a good template or base class:
http://qt.gitorious.org/qt/qt/blobs/4.8/src/declarative/graphicsitems/qdeclarativerectangle_p.h

Answer 4

You can use the orientation property from Qt 5.12