点击按钮

Question

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

以下是截图：

Answer 1

根据问题中的评论和@ folibis的答案，看起来问题可能只是围绕如何让用户拥有日历样式以反映所选日期的更新列表（来自getHiglightDates()）单击按钮更新列表。

如果只添加一个新属性selectedDates来存储所选日期（以前在getHighlightDates()中保存），如下面的代码中所示。通过使用属性绑定，只要selectedDates发生更改，所选日期的外观就会自动更新。在下面的代码中，更新Text时会更新“day_txt”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...
        }
    }
}

Answer 2

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

为此，您可以使用

cal_panel.style=cal_panel.style

请注意，此解决方案并不完全符合性能要求。 ： - ）

Answer 3

正如@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;
    }
}