具有方向的QML渐变

Question

QML渐变仅允许在矩形中从上到下.该文件说,它必须通过旋转和裁剪的组合来完成.

我刚刚开始学习QML(和HTML/CSS的经验很少).这是我的代码,我认为可以更好地改进:

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

你能否建议一下这方面有什么更好的方法？

Answer 1

我使用以下代码解决了这个问题:https://code.google.com/p/ytd-meego/source/browse/trunk/playground/FeedBook/qmltube/Horizo​​ntalGradient.qml？ r = 144

以下是我使用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" }
        }
    }

而且效果很好.玩得开心 !

Answer 2

Qt 5.1中引入的Qt图形效果模块提供了三种渐变类型。对于LinearGradient项目（效果），不再需要旋转以实现例如水平的颜色渐变。
特别是借助于任何梯度方向的start和end点（属性）都是可能的。LinearGradient

以下代码通过以白色开头的右上角和以黑色结尾的左下角实现45°角（如原始文章中所建议）：

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

恐怕文档是正确的。我能想到的唯一其他方法是用 C++ 编写一个自定义 QML 组件，它可以完成您想要的操作。

如果您有 Qt/C++ 知识，您可以从这里开始：

• 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

矩形可能是一个很好的模板或基类：

• http://qt.gitorious.org/qt/qt/blobs/4.8/src/declarative/graphicsitems/qdeclarativerectangle_p.h