通过在 QML 中调用导入的 javascript 函数来设置全局属性

Posted 2023-02-14

【中文标题】通过在 QML 中调用导入的 javascript 函数来设置全局属性

【英文标题】：Setting global properties by calling imported javascript functions in QML

【发布时间】：2020-08-20 18:02:32

【问题描述】：

我将Universal style 用于我的QtQuick 应用程序，我想提供一个ColorDialog 来调整强调色。

我有这样的事情：

ColorDialog 
    id: accChooser
    title: "Please choose a color"
        onAccepted: 
            setGlobalAccentColor(accChooser.color) 
        

*请注意，我不能简单地将Universal.accent=... 写在子项中，因为它对父项没有影响。请参阅this。

还有这个功能：

function setGlobalAccentColor(accentColor)
    Universal.accent = accentColor

当函数 setGlobalAccentColor 定义在与 accChooser 相同的 QML 文件中时，它可以工作，但是如果我在外部 JS 文件中定义该函数（比如 helpers.js）并通过以下方式导入它：

import "helpers.js" as JSHelpers

并以这种方式使用它：

ColorDialog
...
    JSHelpers.setGlobalAccentColor(colorDialog.color)
...

它不起作用。应用程序的输出中没有特定的错误或警告消息。

谢谢。

【参考方案1】：

可能需要在javascript文件中导入通用样式。

文档universal style 如下所述（查看依赖部分）

必须单独导入通用样式才能访问 通用样式特有的属性

您可以在您的 javascript (helpers.js) 文件中尝试如下所述的importing。

.import QtQuick.Controls.Universal 2.12 as JsUniversal

然后尝试访问（例如：JsUniversal.accent..）。

【讨论】：

嗨@Paven。遗憾的是它不起作用。在您提供的link 中还提到A script without imports will inherit imports from the QML document which imported it 是为了向后兼容。所以JS 文件中的另一个导入不起作用.

【参考方案2】：

请注意，我不能简单地将 Universal.accent=... 写在子项中，因为它对父项没有影响。请参阅此内容。

虽然将其设置为子级不会影响您的整个应用程序，但您可以直接将其设置为整个窗口。

Window.window.Universal.accent = accentColor;

Universal 是一个attached object，您可以通过<object>.<AttachingType> 将其附加到任意对象，而不仅仅是当前对象。 我们通过另一个附加属性访问窗口，将其附加到父窗口：Window.window。

【讨论】：

当我在外部 JS 函数中使用它时，我得到了 ReferenceError: Window is not defined 并在添加 .import QtQuick.Window 2.14 as Window:TypeError: Cannot read property 'Universal' of undefined 之后。