javascript - 在 QML 中从数组中的 bool 更改颜色
问题描述
我正在寻找从数组 ( 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"
其他变化之类的东西来更改矩形的颜色,但是要么将每个单元格设为蓝色或红色,要么根本没有?
问题:根据数组中的真/假值更改颜色的最佳方法是什么?
我使用Calendar
fromQtQuick.Controls
来显示日期和CalendarStyle
fromQtQuick.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
}
}
}
}
}
解决方案
好吧,现在你正在使用一个对象数组并试图直接索引它,这不好。(特别是因为您当前正在索引true
/false
值,它不包含 中的单个元素calendarListModel
。)即使您可以使用日期、名称和状态重建对象,它们仍然是不同的对象。
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
应该有颜色。
之后:请注意,只有 1 月 11 日的标记有颜色(蓝色)。实际上,这是因为日期包含在calendarListModel
:1544616000000 中。
推荐阅读
- angular - 如何将单击行的数据从一个组件传递到另一个组件而不传递到 url
- google-apps-script - appscript中的宏替换
- node.js - Nodejs在没有等待的情况下调用异步函数有什么问题吗?
- php - 正则表达式验证规则,以避免特殊字符不适用于 laravel 中的文本字段
- javascript - 如何在 React 中以键值对的形式显示嵌套的 json 数据?
- protocol-buffers - 如何检查 protoc-gen-go 和 protoc-gen-validate 的版本?
- input - ffmpeg 第一次运行命令时总是给我输入/输出错误
- angular - 使用 HttpClient 模块在 Angular 中出现错误
- mysql - 使用 quarkus 的反应式 MySQL 配置
- bash - 解决了带有变量的 BASH 选项卡完成中的错误