如何为用 QML 编写的 KDE Plasma Widget 编写逻辑？

Question

我正在尝试为自己编写一个桌面小部件，即一个日历，它可以将我的大学日历整齐地显示为一种时间表。我在 Kubuntu 20.04 上，所以我想我必须使用 QML...实现逻辑。

基本上，我想从在线 iCal 获取数据，对其进行解析并将其显示在我的小部件中（并且大约每小时更新一次）。我想我可以为第一部分编写一个 python 脚本，但我仍然没有丝毫线索如何实现在 QML 小部件中显示日期（因为 QML 可能只应该处理图形，但我该如何实现那么逻辑呢？）。我已经在网上搜索了很长时间，并查看了很多预装的小部件，但这并没有太大帮助。所有这些也只是用 QML 编写的，据我所知没有 C++……那我该怎么做呢？

编辑：按逻辑我的意思是：我如何表达类似“如果星期一 15:30 有日历条目，则在小部件中的适当位置构造一个矩形并给它一个合适的标签”

到目前为止我的代码：

import QtQuick 2.0
import QtQuick.Layouts 1.0
import org.kde.plasma.components 3.0 as PlasmaComponents

RowLayout {
    spacing: 0
    
    Layout.preferredWidth: 640 * units.devicePixelRatio
    Layout.preferredHeight: 480 * units.devicePixelRatio
    
    Rectangle {
        //day header
        Rectangle {
            PlasmaComponents.Label {
                text: "Monday"
                width: parent.width
                horizontalAlignment: Text.AlignHCenter
                height: parent.height
                verticalAlignment: Text.AlignVCenter
            }
            color: "transparent"
            border.color: "#000"
            border.width: 1
            anchors.top: parent.top
            anchors.right: parent.right
            width: parent.width
            height: parent.height / 12   
        }
        //day body
        color: "transparent"
        border.color: "#000"
        border.width: 1
        Layout.fillHeight: true
        Layout.fillWidth: true
    }
    Rectangle {
        //day header
        Rectangle {
            PlasmaComponents.Label {
                text: "Tuesday"
                width: parent.width
                horizontalAlignment: Text.AlignHCenter
                height: parent.height
                verticalAlignment: Text.AlignVCenter
            }
            color: "transparent"
            border.color: "#000"
            border.width: 1
            anchors.top: parent.top
            anchors.right: parent.right
            width: parent.width
            height: parent.height / 12   
        }
        //day body
        color: "transparent"
        border.color: "#000"
        border.width: 1
        Layout.fillHeight: true
        Layout.fillWidth: true
    }
    Rectangle {
        //day header
        Rectangle {
            PlasmaComponents.Label {
                text: "Wednesday"
                width: parent.width
                horizontalAlignment: Text.AlignHCenter
                height: parent.height
                verticalAlignment: Text.AlignVCenter
            }
            color: "transparent"
            border.color: "#000"
            border.width: 1
            anchors.top: parent.top
            anchors.right: parent.right
            width: parent.width
            height: parent.height / 12   
        }
        //day body
        color: "transparent"
        border.color: "#000"
        border.width: 1
        Layout.fillHeight: true
        Layout.fillWidth: true
    }
    Rectangle {
        //day header
        Rectangle {
            PlasmaComponents.Label {
                text: "Thursday"
                width: parent.width
                horizontalAlignment: Text.AlignHCenter
                height: parent.height
                verticalAlignment: Text.AlignVCenter
            }
            color: "transparent"
            border.color: "#000"
            border.width: 1
            anchors.top: parent.top
            anchors.right: parent.right
            width: parent.width
            height: parent.height / 12   
        }
        //day body
        color: "transparent"
        border.color: "#000"
        border.width: 1
        Layout.fillHeight: true
        Layout.fillWidth: true
    }
    Rectangle {
        //day header
        Rectangle {
            PlasmaComponents.Label {
                text: "Friday"
                width: parent.width
                horizontalAlignment: Text.AlignHCenter
                height: parent.height
                verticalAlignment: Text.AlignVCenter
            }
            color: "transparent"
            border.color: "#000"
            border.width: 1
            anchors.top: parent.top
            anchors.right: parent.right
            width: parent.width
            height: parent.height / 12   
        }
        //day body
        color: "transparent"
        border.color: "#000"
        border.width: 1
        Layout.fillHeight: true
        Layout.fillWidth: true
    }
}

Answer 1

我认为有办法做到这一点。第一个是已经提到的一些 cmets 使用简单的 JavaScript 从 iCal 获取数据然后解析它。另一种选择是使用 C++ 来做同样的事情。

因为我对 C++ 没有那么丰富的经验，所以我只会解释 JavaScript 和 QML 的方式。 您可以从简单地创建一个 JavaScript 文件并在其中编写一个 XMLhttpRequest 开始。 https://www.w3schools.com/xml/xml_http.asp 上面的链接向您展示了一种在 JavaScript 中编写 XMLhttpRequest 的简单方法。但是对于所有不想打开链接的人来说，基本代码是这样的。

function getData(url){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if(xhr.readyState === XMLHttpRequest.DONE) {
            return xhr.responseText;
        }
    }
    xhr.open("Get", url);
    xhr.send();
} 

正如我已经说过的，这是一种非常简单的方法。接下来，当您拥有数据时，您可以对其进行解析。如果您获取 JSON 格式的数据，最好的方法是使用 Qt 中构建的普通 JSON.parse() 函数。然后您可以将数据插入到普通模型中，例如 ListModel。如果数据不是 JSON 格式或者 JSON 不是那么容易分离，那么你也可以使用 JSONListModel，在这里查看：https://wiki.qt.io/JSONListModel 基本上它是一个简单的 ListModel，可以直接使用 JSON 字符串。但你也可以使用 C++ JSON 解析器，不幸的是我没有 0 经验，但可以在此处找到文档：https://doc.qt.io/qt-5/json.html

现在我希望我可以帮助您解决您的问题。如果没有发表评论。

你可能还想看看我关于 Qt 6 的书，在那里你可以找到更多关于 Qt 的信息，如果你需要的话，可以使用 Qt 提供的组件，例如 JSON 和 C++ 集成。这本书可以在这里找到：https://www.amazon.com/dp/B08XLLDZSG