1

我需要Calendar style在单击 a 时更改Button。目前，在下面的代码中，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()每次都会改变。在上面的代码片段中，我刚刚返回了一个预定义的数组进行测试。在这种情况下，我将指导如何编辑已经创建的样式元素。

这是屏幕截图：

在此处输入图像描述

4

3 回答 3

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 http://stackoverflow.com/questions/19583234/qml-binding-to-an-array-element for why its done this way...
        }
    }
}
于 2015-11-18T13:37:48.280 回答
2

As a simple solution, you can reassign the style on click event, forcing an under the hood refresh of the Calendar item.

To do that you can use 

cal_panel.style=cal_panel.style

Be aware that this solution is not exactly performance friendly. :-)

于 2015-11-18T13:38:38.957 回答
0

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

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;
    }
}
于 2015-11-18T12:44:12.017 回答