如何全局定义渐变色？

Question

我的 QML 中有渐变，如下例所示。是否可以在 QML 中全局定义颜色“#1AD6FD”或“#1D62F0”？

gradient: Gradient {
    GradientStop { position: 0.00; color: "#1AD6FD"  }
    GradientStop { position: 1.00; color: "#1D62F0" }
}

Answer 1

您可以像这样在任何 QML 对象上定义自定义属性。

Rectangle {
    id: root

    // you can define your on custom properties like this
    property color gradientColor1: "#1AD6FD"
    property color gradientColor2: "#1D62F0"
}

然后在可以访问通过 id 定义的对象的任何其他项目中使用它。

Item {
    gradient: Gradient {
        GradientStop { position: 0.00; color: root.gradientColor1 }
        GradientStop { position: 1.00; color: root.gradientColor1 }
    }
}

如果你想重用它，你也可以全局定义整个渐变。

如果您想访问其他 QML 文件的属性，有多种方法可以做到这一点。如果你有权访问 QML 根对象，你也可以从其他文件访问它的属性，或者你可以定义一个全局 JavaScript 库，其中包含一些颜色值常量，但我认为不是整个 QML 对象（只有纯 JS ).

另一种简单的方法是为您的项目定义一个仅具有一些全局属性的独立 QML 对象，并将其包含在您的其他 QML 文件中，仅使用一个 id 来引用它，这可能是最简单的解决方案。

只需定义一个空的 QML-Item，它具有一些属性，如上面的 Rectangle 示例，并将其包含在您的其他 QML 文件中，如下所示

Rectangle {
    id: root

    // include your custom QML global item (GlobalProperties.qml)
    GlobalProperties {
        id: globalProperties
    }

    // then you can use it like before, i.e.
    color: globalProperties.gradientColor1 // color prop from your GlobalProperties.qml
}

如何全局定义渐变色？

How to define gradient color globally?

qt

gradient

colors

qml