QML Tableview 根据行内容更改行颜色

Question

我是 qml 的新手，我需要编写一个包含 3 列和未定义行数的简单列表，以使用表视图显示日志输出。第一列显示类型（错误、警告、信息）。根据此关键字，我需要更改该行的颜色。我找到了可以更改所有行颜色的代码，但不能根据数据内容单独更改。这是我的出发点：

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
        }
    }
}

如有任何帮助，我们将不胜感激。

马丁

Answer 1

在 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"
     }
}

QML Tableview 根据行内容更改行颜色

QML Tableview change row color depending on row content

qt

tableview

qml