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
            }
}

现在我的问题：我想现在显示这个日期的所有项目。所以我必须为每个可用项目绘制一个矩形。如何在函数的迭代中处理这个？我可以创建一个QML组件并为每个项目添加一个矩形到该组件中，然后将其返回到cellRect吗？你知道更好的方法吗？

另一个问题是项目属于一组项目，但每个项目都有另一个日期（例如3天，一个接一个=一个组中的3个项目）。我想直观地结合这些项目。实际上，从第一个日期开始到最后一个日期结束时应该有一个大矩形。如果是三天，则应在这三个单元格上显示该矩形。我的第一个想法是，我为每个项目绘制一个单独的矩形，但要注意细胞内相同的y坐标。是否有一种很好的方法可以将这些单个矩形分组，只有一个大的组件？

我希望你能以一种很好的方式给我一些建议。

Answer 1

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

你尝试过吗？如果你有一个可以与我们分享的现有尝试，这真的有帮助，这样你就可以指出你认为它可能不太令人满意的原因。

是否有一种很好的方法可以将这些单个矩形分组实例只有一个重要组成部分？

您可以使用ListView等。 Calendar Example已经提供了与您所描述内容类似的后端，因此我们将其作为基础：

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 {
    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
                    }
                }
            }
        }
    }
}

如何将项目添加到多个单元格的日历中

1 个答案: