如何为用 QML 编写的 KDE Plasma 小部件编写逻辑？

如何解决如何为用 QML 编写的 KDE Plasma 小部件编写逻辑？

我正在尝试为自己编写一个小桌面小部件，即一个日历，它可以将我的大学日历整齐地显示为一种时间表。我在 Kubuntu 20.04 上，所以我想我必须为此使用 QML...我已经按照本教程：https://develop.kde.org/docs/plasma/widget/ 创建日历的基本外观，但现在我迷失了到如何实现逻辑。

基本上我想从在线 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
    }
}

解决方法

我认为有办法做到这一点。第一个是一些评论已经提到使用简单的 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。如果 Data 不是 JSON 格式或者 JSON 不是那么容易区分，那么您也可以使用 JSONListModel，查看这里：https://wiki.qt.io/JSONListModel 基本上，它是一个简单的 ListModel，可以直接使用 JSON 字符串。但是您也可以使用 C++ JSON 解析器，不幸的是，我没有使用它的经验，但可以在此处找到文档：https://doc.qt.io/qt-5/json.html

现在我希望我能帮助你解决你的问题。如果没有留下评论。

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