Изменить стиль календаря при нажатии кнопки

Мне нужно изменить 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() каждый раз меняется. В приведенном выше фрагменте я только что вернул предопределенный массив для тестирования. В таком случае я веду, как отредактировать элемент стиля, который уже создан.

Вот снимок экрана:

введите здесь описание изображения


qml qtquick2 qt5 qtquickcontrols
person Haris    schedule 18.11.2015    source источник

Ответы (3)


arrow_upward
2
arrow_downward

В качестве простого решения вы можете переназначить стиль для события click, что приведет к внутреннему обновлению элемента Calendar.

Для этого вы можете использовать

cal_panel.style=cal_panel.style

Имейте в виду, что это решение не совсем удобно для производительности. :-)

person skypjack    schedule 18.11.2015

arrow_upward
2
arrow_downward

Основываясь на комментариях в вопросе и в ответе @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...
        }
    }
}
person nfranklin    schedule 18.11.2015

arrow_upward
0
arrow_downward

как уже предлагал @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;
    }
}
person folibis    schedule 18.11.2015
comment
Да, я знаю этот метод, но в моем случае каждый раз, когда я нажимаю кнопку, мне приходится выделять разные даты, которые возвращаются функцией getHiglightDates(). Итак, мой вопрос заключается в том, как изменить цвет текста dayDelegate в зависимости от списка дат, возвращаемого getHiglightDates(). - person Haris; 18.11.2015
comment
@folibis Вопрос был неясен, и я неправильно его понял, ваш ответ действительно неверен, или, лучше сказать, он не отвечает на правильный вопрос. :-) - person skypjack; 18.11.2015