QML Tableview 根據行內容更改行顏色

Question

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

任何幫助，將不勝感激。

馬丁

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