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

【问题标题】：How to change the color of just the first row of TableView in QML?如何更改 QML 中 TableView 第一行的颜色？
【发布时间】：2020-12-11 15:19:53
【问题描述】：

我正在使用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"

                     }
             }

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

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

【问题讨论】：

@scopchanov 为什么要从标题中删除 QML 这个词？
问题已被标记为 QML。无需在标题中重复。
@scopchanov 有需要。当问题出现在“类似问题”列表或谷歌搜索中时，标签在这些情况下不可见，人们的时间被浪费在知道他们不想要或确实想要这个 QML 解决方案上。
meta.stackoverflow.com/a/251861/5366641
从那个答案：As such, tags only have a place in the title if they are an organic part of it:。就我而言，这是问题的一部分。它是句子的一部分。我没有将它用作 [QML] 等。我会将问题恢复为原始形式。 @scopchanov

标签： javascript qt qml qt5

【解决方案1】：

原因

rowDelegate 的文档说：

注意：出于性能原因，创建的委托可以回收跨多个表行。这意味着当您使用 styleData.row 或 model 等隐式属性，这些值可以在委托构建后进行更改。这意味着你不应假定 Component.onCompleted 时内容是固定的调用，而是依赖对此类属性的绑定。

注意：重点是我的。

解决方案

引文中强调的部分显示了解决方案，即创建到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
        }
    }
}

结果

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

【讨论】：

【解决方案2】：

不久前我遇到了同样的情况。为此，我使用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"    
    }
}

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

【讨论】：

这有什么帮助？我希望该行变成蓝色而不是标题。
@Aquarius_Girl 在那种情况下我似乎理解错了问题。我很抱歉。