QML gradients with an orientation

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 !