首页 文章

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

提问于
浏览 次
0

我想在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坐标 . 是否有一种很好的方法可以将这些单个矩形分组，只有一个大的组件？

我希望你能给我一些建议如何以一种很好的方式做到这一切 .

qml qt5

1 回答

  • 0

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

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

    有没有一种很好的方法可以将这些单个矩形分组，只有一个大的组件？

    您可以使用ListView等 . Calendar Example已经提供了类似的后端，你're describing, so let'使用它作为基础：

    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
                    }
                }
            }
        }
    }
}
    回复于

相关问题