Left-to-right gradient with proper anchoring

[Asperamanca]

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]

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]

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

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

To copy to clipboard, switch view to plain text mode 

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

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

To copy to clipboard, switch view to plain text mode 

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