如何更改 QML 中 TableView 第一行的颜色？

Question

我正在使用 TableView 的 QtQuick.Controls 1.4
这就是rowDelegate。我只想让第一行为蓝色，其余行（空行或非空行）为绿色。

rowDelegate:  
           Rectangle
           {
                border.width: 1
                height: 50
                width: 2000

                color: {
                         var item = mymodel.get( styleData.row )

                         if (item.index1 === "1")
                             return "blue"

                         return "green"

                     }
             }

现在，我的问题是这段代码确实将第一行着色为蓝色，但它也将空行着色为蓝色。

解决这个问题的方法是什么？

Answer 1

我运行前一段时间也遇到过同样的情况。为此，我使用 headerDelegate 进行了同样的计算。这是一个例子：

import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.4
style:TableViewStyle {
    rowDelegate: Rectangle{
        id:rowRectangle
        color:"green"
        width: 2000
        height: 40

    }

    headerDelegate: Rectangle{
        height: 40
        width: 2000
        color: "blue"    
    }
}

请记住，这会将空行设置为绿色。您可以根据模型中的条目数调整 table 高度。

Answer 2

原因

rowDelegate 的文档说：

Note: For performance reasons, created delegates can be recycled across multiple table rows. This implies that when you make use of implicit properties such as styleData.row or model, these values can change after the delegate has been constructed. This means that you should not assume that content is fixed when Component.onCompleted is called, but instead rely on bindings to such properties.

注意：重点是我的。

解决方案

引用中强调的部分显示了解决方案，即创建到 styleData.row:

的绑定

rowDelegate: Rectangle {
    color: (styleData.row === 0) ? "blue" : "green"
    width: 2000
    height: 40
    border.width: 1
}

例子

这是我为您编写的示例，用于演示建议的解决方案：

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 1.4

Window {
    width: 320
    height: 200
    visible: true
    title: qsTr("TableView")

    ListModel {
        id: libraryModel
        ListElement {
            title: "A Masterpiece"
            author: "Gabriel"
        }
        ListElement {
            title: "Brilliance"
            author: "Jens"
        }
        ListElement {
            title: "Outstanding"
            author: "Frederik"
        }
    }

    TableView {
        anchors.fill: parent
        model: libraryModel

        rowDelegate: Rectangle {
            color: (styleData.row === 0) ? "blue" : "green"
            width: 2000
            height: 40
            border.width: 1
        }

        TableViewColumn {
            role: "title"
            title: "Title"
            width: 100
        }

        TableViewColumn {
            role: "author"
            title: "Author"
            width: 200
        }
    }
}

结果

提供的示例产生以下结果：

如何更改 QML 中 TableView 第一行的颜色？

How to change the color of just the first row of TableView in QML?

javascript

qt

qml

qt5

原因

解决方案

例子

结果