单击按钮更改日历样式

Question

我需要在单击 Button 时更改 Calendar style。目前，在下面的代码中，style 更改仅在第一次创建对象时有效，但我需要在单击 Button 时手动更改样式。

QML代码如下：

import QtQuick 2.0
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Private 1.0
import QtQuick.Controls.Styles 1.1

ApplicationWindow {
    visible: true
    width: 640
    height: 400
    minimumWidth: 400
    minimumHeight: 300
    color: "#f4f4f4"
    id: root

    Calendar {
        id: cal_panel
        anchors.topMargin: 10
        anchors.horizontalCenter:  parent.horizontalCenter;
        frameVisible:false

        style: CalendarStyle {
            gridVisible: false
            dayDelegate: Rectangle {

                color: styleData.selected ? "#FF2E7BD2" : (styleData.visibleMonth && styleData.valid ? "#191919" : "#191919");

                Text {
                    id:day_txt
                    text: styleData.date.getDate()
                    font.bold: true
                    anchors.centerIn: parent
                    color: {
                        var color = "#dddddd";
                        if (styleData.valid) {
                            color = styleData.visibleMonth ?  "#bbb" : "#444";

                            var sel = root.getHiglightDates();
                            for(var i=0;i<sel.length;i++){
                                if(sel[i]===Qt.formatDateTime(styleData.date,"dd:MM:yyyy"))
                                    color="red"
                            }

                            if (styleData.selected) {
                                color = "black";
                            }
                        }
                        color;
                    }
                }
            }
        }
    }

    Button{
        anchors.top:cal_panel.bottom
        anchors.topMargin: 10
        anchors.horizontalCenter: parent.horizontalCenter
        text:"Higlight"
        onClicked: {
            console.log("Higlight here....")
        }
    }  

    function getHighlightDates(){
        var sel = ["10:11:2015","12:11:2015","11:11:2015","08:11:2015","09:11:2015"];
        return sel;
    }   
}

编辑：

函数getHighlightDates()的return值每次都会改变。在上面的代码片段中，我刚刚 return 编辑了一个用于测试的预定义数组。在那种情况下，我将了解如何编辑已经创建的样式元素。

这是屏幕截图：

Answer 1

正如@skypjack 已经建议的那样，您只需单击即可指定新样式。 style 属性是一个 Component 所以做这样的事情没有问题：

Component {
    id: style1
    CalendarStyle {
        background: Rectangle { color: "lightyellow" }
    }
}
Component {
    id: style2
    CalendarStyle {
        background: Rectangle { color: "orange" }
    }
}

Calendar {
    id: calendar
    anchors.fill: parent
    style: style1
    onClicked: {
        calendar.style = style2;
    }
}

Answer 2

根据问题中的评论和@folibis 的回答，看起来问题可能只是围绕如何获取日历样式以反映选定日期的更新列表（来自 getHiglightDates()）用户已通过单击按钮更新了列表。

添加一个新的属性 selectedDates 来存储所选日期（之前保存在 getHighlightDates() 中）怎么样，如下面的代码所示。通过使用属性绑定，选定日期的外观将在 selectedDates 更改时自动更新。在下面的代码中，"day_txt" Text 的颜色在 selectedData 更新时更新（在 selectedDates 更新时更新）。

import QtQuick 2.0
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.1

ApplicationWindow {
    visible: true
    width: 640
    height: 400
    minimumWidth: 400
    minimumHeight: 300
    color: "#f4f4f4"
    id: root

    property variant selectedDates : ["10:11:2015","12:11:2015","11:11:2015","08:11:2015","09:11:2015"]

    Calendar {
      id: cal_panel
      anchors.topMargin: 10
      anchors.horizontalCenter:  parent.horizontalCenter;
      frameVisible:false


      style: CalendarStyle {
          gridVisible: false
          dayDelegate: Rectangle {
              property bool selectedDate: selectedDates.indexOf(Qt.formatDateTime(styleData.date,"dd:MM:yyyy")) > -1

              color: styleData.selected ? "#FF2E7BD2" : (styleData.visibleMonth && styleData.valid ? "#191919" : "#191919");

              Text {
                  id:day_txt
                  text: styleData.date.getDate()
                  font.bold: true
                  anchors.centerIn: parent
                  color: selectedDate ? "red" : (styleData.selected ? "black" : (styleData.visibleMonth ?  "#bbb" : "#444"));
              }
          }
      }
  }

    Button{
        anchors.top:cal_panel.bottom
        anchors.topMargin: 10
        anchors.horizontalCenter: parent.horizontalCenter
        text:"Higlight"
        onClicked: {
            var updatedDates = selectedDates
            updatedDates.push(Qt.formatDateTime(cal_panel.selectedDate,"dd:MM:yyyy"))
            selectedDates = updatedDates
            # See  for why its done this way...
        }
    }
}

Answer 3

作为一个简单的解决方案，您可以在 click 事件上重新分配样式，强制在后台刷新 Calendar 项目。

为此，您可以使用

cal_panel.style=cal_panel.style

请注意，此解决方案的性能并不十分友好。 :-)

单击按钮更改日历样式

Change calendar style on button click

qml

qt5

qtquick2

qtquickcontrols