如何在多个单元格上向日历中添加项目

Question

我想尝试一下Qt5.3中Qml的新日历对象。因此，我想添加一些项目(例如矩形)到单元格的特定坐标的单元格。为了在单元格中添加矩形，我使用dayDelegate:

Calendar{
    id: calendar
    width: parent.width * 0.5
    height: parent.height * 0.5
    style: CalendarStyle {
        dayDelegate:

            Rectangle {             //the background of the cell
            id: cellRect
            color: "#505"
            Rectangle{              //a rectangle in the cell
                height: parent.height * 0.5
                width: parent.width
            }

现在我的c++代码中有一个模型，它存储了属于特定日期的几个项目。这意味着你可以在一次约会中有多个项目。我想将这些项目显示为矩形，就像给定日期单元格中的列表一样。那么在QML中实现这一点的最佳方法是什么呢?其中一个项目存储其日期和该项目所属的组id。我将这些项作为QQmlPropertyList传递给QML。我已经实现了一个函数，它告诉我当前日期项是否可用:

function apAvailable(d) {
    for (var i in ApModel.items) {
         var item = ApModel.items[i];
        if (item.startDate.getTime() === d.getTime()) {
            return true;
        }
    }
    return false;
}

我可以在dayDelegate中调用这个函数，传递委派当前处理的日期。

Rectangle {
            id: cellRect
            color: "#505"
            Rectangle{
                visible: apAvailable(styleData.date)
                height: parent.height * 0.5
                width: parent.width
            }
}

现在我的问题是:我想现在显示这个日期的所有项目。所以我必须为每个可用的元素画一个矩形。我如何在函数的for迭代中处理这个?我可以创建一个qml组件，并为每个项目添加一个矩形到这个组件，然后返回到cellRect吗?你知道更好的理解方式吗?

另一个进一步的问题是，一个项目属于一组项目，但每个项目都有另一个日期。3天，一个接一个=每组3个项目)。我想在视觉上把这些项目结合起来。事实上，应该有一个大矩形，从第一次约会开始，到最后一次约会结束。如果是三天，这个矩形将显示在这三个单元格之上。我的第一个想法是，我为每个项目绘制一个单独的矩形，但注意单元格内相同的y坐标。是否有一个好的方法来分组这些单一的矩形，例如只有一个大的组件?

我希望你能给我一些建议，怎样才能把这一切都做好。

Answer 1

我如何在函数的for-迭代中处理这个?我可以创建一个qml组件，并为每个项目添加一个矩形组件，然后返回到cellRect?你知道更好的方法吗意识到这一点?

你试过吗?如果你有一个现有的尝试，你可以和我们分享，这真的很有帮助，这样你就可以指出为什么你认为它可能不令人满意。

是否有一个好的方法来分组这些单一的矩形实例中只有一个大的组件?

你可以使用ListView。Calendar示例已经提供了与您所描述的类似的后端，因此让我们将其作为基础:

ListView {
    id: rectView
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: dayDelegateText.bottom
    anchors.bottom: parent.bottom
    anchors.margins: -1
    clip: true
    interactive: false
    model: eventModel.eventsForDate(styleData.date)
    delegate: Rectangle {
        color: eventColours[index % eventColours.length]
        width: parent.width
        height: 10
    }
}

然而，

这并没有考虑到属于相同组ID的每种颜色，因为它依赖于这样的假设:重叠几天的事件将在模型中的某个索引上。然而，在你分享你对这个问题的尝试之前，这应该会给你一些想法。我对示例所做的更改，如diff:

http://pastebin.com/U14iKUeQ

或者您可以将示例中的Calendar替换为以下内容:

Calendar {
    id: calendar
    width: parent.width * 0.6 - row.spacing / 2
    height: parent.height
    selectedDate: new Date(2014, 0, 1)
    focus: true
    style: CalendarStyle {
        readonly property var eventColours: ["lightblue", "darkorange", "purple"]
        dayDelegate: Item {
            readonly property color sameMonthDateTextColor: "#444"
            readonly property color selectedDateColor: Qt.platform.os === "osx" ? "#3778d0" : __syspal.highlight
            readonly property color selectedDateTextColor: "white"
            readonly property color differentMonthDateTextColor: "#bbb"
            readonly property color invalidDatecolor: "#dddddd"
            Rectangle {
                id: selectionRect
                anchors.fill: parent
                border.color: "transparent"
                color: styleData.date !== undefined && styleData.selected ? selectedDateColor : "transparent"
                anchors.margins: styleData.selected ? -1 : 0
            }
            Label {
                id: dayDelegateText
                text: styleData.date.getDate()
                font.pixelSize: 14
                anchors.left: parent.left
                anchors.leftMargin: 2
                anchors.top: parent.top
                anchors.topMargin: 2
                color: {
                    var color = invalidDatecolor;
                    if (styleData.valid) {
                        // Date is within the valid range.
                        color = styleData.visibleMonth ? sameMonthDateTextColor : differentMonthDateTextColor;
                        if (styleData.selected) {
                            color = selectedDateTextColor;
                        }
                    }
                    color;
                }
            }
            ListView {
                id: rectView
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.top: dayDelegateText.bottom
                anchors.bottom: parent.bottom
                anchors.margins: -1
                clip: true
                interactive: false
                model: eventModel.eventsForDate(styleData.date)
                delegate: Rectangle {
                    color: eventColours[index % eventColours.length]
                    width: parent.width
                    height: 10
                    Label {
                        text: modelData.name
                        anchors.fill: parent
                        font.pixelSize: 8
                        fontSizeMode: Text.Fit
                    }
                }
            }
        }
    }
}