[英]QML Tableview change row color depending on row content
我是 qml 的新手,我需要编写一个包含 3 列和未定义行数的简单列表,使用 tableview 显示日志的输出。 第一列显示类型(错误、警告、信息)。 根据此关键字,我需要更改该行的颜色。 我找到了可以更改所有行颜色的代码,但不能根据数据内容单独更改。 这是我的出发点:
import QtQuick 2.13
import QtQuick.Window 2.11
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.4
import QtQuick.Controls 1.4 as QtC1
import QtQuick.Dialogs 1.2
ApplicationWindow {
id: applicationWindow
visible: true
width: 640
height: 480
title: qsTr("Log")
ListModel {
id: listModel
ListElement { category: 'warning'; type: "DEVICE IN USE"; comment: "Device with ID: PS-0002 is in use by Line with ID: L-0001A" }
ListElement { category: 'error'; type: "DEVICE IS OFFLINE"; comment: "Cannot reach device with ID: PS-0006 IP: 192.169.0.112 Port: 788" }
ListElement { category: 'info'; type: "DEVICE STATUS"; comment: "Device PS-00013 is ready for use." }
ListElement { category: 'info'; type: "DEVICE STATUS"; comment: "Device PS-00014 is ready for use." }
ListElement { category: 'info'; type: "DEVICE STATUS"; comment: "Device PS-00015 is ready for use." }
ListElement { category: 'info'; type: "DEVICE STATUS"; comment: "Device PS-00016 is ready for use." }
}
ColumnLayout
{
anchors.fill: parent
transformOrigin: Item.Center
Label {
id: logLabel
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
font.pixelSize: 22
text: qsTr("Summary")
Layout.topMargin: 13
}
QtC1.TableView {
id: tv
Layout.fillHeight: true
Layout.preferredHeight: 18
Layout.preferredWidth: 9
Layout.fillWidth: true
rowDelegate: Rectangle {
color: styleData.value ? "blue":"white"
}
/* Create columns */
QtC1.TableViewColumn
{
id: tv_category
horizontalAlignment: Text.AlignLeft
role: qsTr("category")
title: qsTr("Category")
width: 100
}
QtC1.TableViewColumn
{
id: tv_type
horizontalAlignment: Text.AlignLeft
role: qsTr("type")
title: qsTr("Type")
width: 100
}
QtC1.TableViewColumn
{
id: tv_comment
horizontalAlignment: Text.AlignRight
role: qsTr("comment")
title: qsTr("Comment")
width: contentWidth
}
model: listModel
}
}
}
任何帮助,将不胜感激。
马丁
在 rowDelegate 中,您可以访问行索引(使用 styleData.row)。 只需使用它从列表模型中获取项目,如下所示:
rowDelegate: Rectangle {
color: {
var item = listModel.get(styleData.row)
if (item.category === "info")
return "skyblue"
else if (item.category === "warning")
return "yellow"
else if (item.category === "error")
return "red"
return "skyblue"
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.