QML Tableview меняет цвет строки в зависимости от содержимого строки - PullRequest
Новая
       20

QML Tableview меняет цвет строки в зависимости от содержимого строки

0 голосов
/ 04 февраля 2020

Я новичок в 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
        }
    }
}

Любая помощь будет оценена.

Мартин

1 Ответ

1 голос
/ 04 февраля 2020

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