[英]Change colour from bool within array in QML
I am looking to change the colour of a Calendar cell from a Boolean within an array ( calendarListModel
).我希望从数组 ( calendarListModel
) 中的布尔值更改日历单元格的颜色。
Here's a sample of the array:这是数组的示例:
[
{"date":1544443200000,"name":"Edward","status":1},
{"date":1544529600000,"name":"Katie","status":0},
{"date":1544616000000,"name":"Claire","status":1}
]
What I want to do is change the colour of my calendar marker depending on the Boolean value within calendarListModel
( "status": 0 or 1
) .我想要做的是根据calendarListModel
( "status": 0 or 1
) 中的布尔值更改日历标记的颜色。
The code for my marker is;我的标记的代码是;
Rectangle {
id: calendarMarker
visible: arrayFromFireBase.indexOf(styleData.date.getTime()) > -1
anchors.fill: parent
color: "blue"
}
I have tried making changes to the colour of the Rectangle with things such as calendarListModel.status ? "blue" : "red"
我曾尝试使用诸如calendarListModel.status ? "blue" : "red"
东西来更改 Rectangle 的颜色calendarListModel.status ? "blue" : "red"
calendarListModel.status ? "blue" : "red"
amongst other variations but am either getting each cell as blue or red, or none at all? calendarListModel.status ? "blue" : "red"
以及其他变体,但是否将每个单元格设为蓝色或红色,或者根本没有?
Question: What would be the best way to change the colour based on a true/false value from the array?问题:根据数组中的真/假值更改颜色的最佳方法是什么?
I am using Calendar
from the QtQuick.Controls
to display dates and CalendarStyle
from QtQuick.Controls.Styles
to assign a custom style.我使用Calendar
从QtQuick.Controls
显示日期和CalendarStyle
从QtQuick.Controls.Styles
指定自定义样式。 I'm also using the V-Play sdk.我也在使用 V-Play sdk。
Here's a minimal, complete, and verifiable example of what I'm currently doing:这是我目前正在做的事情的最小、完整且可验证的示例:
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
}
}
}
}
}
Alright, right now you're using an array of objects and trying to index it directly, which is no good.好的,现在您正在使用一个对象数组并尝试直接对其进行索引,这是不好的。 (Especially since you're currently indexing for true
/ false
values, which doesn't comprise individual elements in calendarListModel
.) Even if you could reconstruct the object with a date, name, and status, they'll still be different objects. (特别是因为您当前正在为true
/ false
值编制索引,这些值不包含calendarListModel
单个元素。)即使您可以使用日期、名称和状态重建对象,它们仍然是不同的对象。
Use Array.prototype.find()
instead.使用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";
}
Here's a before and after tested from a macOS:这是从 macOS 测试前后的结果:
Before: Notice how all markers are red.之前:注意所有标记都是红色的。 Only the dates specified in calendarListModel
should have colour to them.只有在calendarListModel
指定的calendarListModel
应该有颜色。
After: Notice that only the marker at January 11 has colour (blue).之后:请注意,只有 1 月 11 日的标记具有颜色(蓝色)。 Indeed, this is because the date was included in calendarListModel
: 1544616000000.事实上,这是因为该日期包含在calendarListModel
:1544616000000。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.