Изменить цвет с bool в массиве в QML - PullRequest
Новая
       24

Изменить цвет с bool в массиве в QML

0 голосов
/ 03 января 2019

Я хочу изменить цвет ячейки календаря с логического значения в массиве (calendarListModel).

Вот пример массива: 

[
{"date":1544443200000,"name":"Edward","status":1},
{"date":1544529600000,"name":"Katie","status":0},
{"date":1544616000000,"name":"Claire","status":1}
]

То, что я хочу сделать, это изменить цвет моего календарного маркера в зависимости от логического значения в пределах calendarListModel ("status": 0 or 1) .

Код для моего маркера: 

Rectangle {
    id: calendarMarker
    visible: arrayFromFireBase.indexOf(styleData.date.getTime()) > -1
    anchors.fill: parent
    color:  "blue"
}

Я пытался внести изменения в цвет прямоугольника с помощью таких вещей, как calendarListModel.status ? "blue" : "red" среди других вариантов, но я получаю либо каждую клетку синего или красного цвета, либо ни одной вообще?

Вопрос: Как лучше всего изменить цвет на основе значения true / false из массива?

Я использую Calendar из QtQuick.Controls для отображения дат и CalendarStyleс QtQuick.Controls.Styles назначить собственный стиль.Я также использую V-Play SDK.

Вот минимальный, полный и проверяемый пример того, что я сейчас делаю: 

import VPlayApps 1.0
import QtQuick 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.1

App {
    id: app

    //  this model is read from a firebase db using v-play
    property var calendarListModel: [
        {"date":1544443200000,"name":"Edward","status":1},
        {"date":1544529600000,"name":"Katie","status":0},
        {"date":1547182800000,"name":"Claire","status":1}
    ]

    Calendar {
        id: calendar
        anchors.fill: parent
        selectedDate: new Date()
        weekNumbersVisible: true
        focus: true
        onSelectedDateChanged: {
            const day = selectedDate.getDate();
            const month = selectedDate.getMonth() + 1;
            const year = selectedDate.getFullYear();
        }

       style: CalendarStyle {
           dayOfWeekDelegate: Item {
               width: parent.width
               height: dp(30)
               Rectangle {
                   anchors.fill: parent
                   border.color: "#00000000"
                   Label {
                       id: dayOfWeekDelegateText
                       text: Qt.locale().dayName(styleData.dayOfWeek, Locale.ShortFormat)
                       anchors.centerIn: parent
                       color: "black"
                   }
               }
           }

           //  a delegate for each day cell
           dayDelegate: Item {
               id: container

               readonly property color sameMonthDateTextColor: "#444"
               readonly property color selectedDateColor: "#20d5f0"
               readonly property color selectedDateTextColor: "white"
               readonly property color differentMonthDateTextColor: "#bbb"

               //  the background of each cell
               Rectangle {
                   anchors.fill: parent
                   border.color: "#00000000"
                   color: styleData.selected ? selectedDateColor : "white"
               }

               //  a marker on the upper-left corner on each cell
               Rectangle {
                   id: calendarMarker
                   property bool isConfirmed: false
                   anchors {
                       top: parent.top; left: parent.left
                   }

                   width: 12
                   height: width

                   //  the issue lies here
                   color: {
                        var confCol
                        calendarListModel.indexOf(status? true : false)
                        confCol ? "#4286f4" : "red"
                   }

               }

               // the day number
               Label {
                   id: dayDelegateText
                   text: styleData.date.getDate()
                   anchors.centerIn: parent
                   color:  styleData.selected ? selectedDateTextColor : styleData.visibleMonth ? sameMonthDateTextColor : differentMonthDateTextColor
               }
            }
        }
    }
}

1 Ответ

0 голосов
/ 08 января 2019

Хорошо, сейчас вы используете массив объектов и пытаетесь проиндексировать его напрямую, что не очень хорошо.(Тем более, что в настоящее время вы индексируете значения true / false, которые не включают отдельные элементы в calendarListModel.) Даже если вы сможете реконструировать объект с указанием даты, имени и статуса, они будутвсе еще будут другими объектами.

Используйте Array.prototype.find() вместо. 

color: {
    var modelObject = calendarListModel.find(
       function(obj) {
            //  look for a matching date
           return obj.date === styleData.date.getTime();
       }
    );

    if (modelObject === undefined)  //  not found in list model
       return "lightgrey";

    return modelObject.status ? "blue" : "red";
}

Вот до и после тестирования из macOS:

До:Обратите внимание, как все маркеры красные.Только даты, указанные в calendarListModel, должны иметь цвет.Before

После: обратите внимание, что только маркер на 11 января имеет цвет (синий).Действительно, это потому, что дата была включена в calendarListModel: 1544616000000. After

...