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

Posted 2023-02-14

【中文标题】如何更改 QML 中 TableView 第一行的颜色？

【英文标题】：How to change the color of just the first row of TableView in QML?

【发布时间】：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.***.com/a/251861/5366641

从那个答案：As such, tags only have a place in the title if they are an organic part of it:。就我而言，这是问题的一部分。它是句子的一部分。我没有将它用作 [QML] 等。我会将问题恢复为原始形式。 @scopchanov

【参考方案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 在那种情况下我似乎理解错了问题。我很抱歉。