qt - 带方向的 QML 梯度

Question

QML 渐变只允许在一个 Rectangle 中从上到下。文档说它必须通过旋转和裁剪的组合来完成。

我刚刚开始学习 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;
    }
}

您能否建议执行此操作的更好方法？

score 10 · Accepted Answer

我已经用以下代码解决了这个问题：https ://code.google.com/p/ytd-meego/source/browse/trunk/playground/FeedBook/qmltube/HorizontalGradient.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" }
        }
    }

这运作良好。玩得开心！

score 8 · Accepted Answer

Qt 5.1 中引入的 Qt Graphical Effects 模块提供了三种渐变类型。使用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" }
        }
    }
}

score 3 · Accepted Answer

恐怕文件是正确的。我能想到的唯一另一种方法是用 C++ 编写一个自定义 QML 组件，它可以满足您的需求。

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

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

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

score 0 · Accepted Answer

0

您可以使用Qt 5.12中的方向属性

于 2020-12-22T09:38:41.317 回答

qt - 带方向的 QML 梯度

4 回答 4

Related

Reference