动态且单独更改 QML TableView Element 行高

Posted 2023-02-16

【中文标题】动态且单独更改 QML TableView Element 行高

【英文标题】：Change QML TableView Element rows height dynamically and separately

【发布时间】：2016-04-12 13:26:24

【问题描述】：

根据 QML TableView 中的索引，是否有一种简单的方法可以修改行高？

我的问题是我动态加载数据的是TableView的模型。我有一个“警告”列，我想在其中显示使用 Qt RichText html 标记（ul、li）的警告列表。但是，此列表高于包含它的单元格，并且存在 y 溢出。

QTableView 类有很多方法可以解决这个问题，例如 setRowHeight(int row, int height)、resizeRowToContents(int row) 或 resizeRowsToContents()。

但似乎 QML 等价物没有这样的方法来轻松调整行大小...

rowDelegate 可能会解决我的问题，但我不知道如何使用它来分别修改行的高度（我的意思是给定它的索引）。

有没有人遇到同样的问题，可以给我一个技巧来解决它？

我的表格视图：

ListModel 
id: filesList
ListElement 
    name:""
    dir:""
    type:""
    status""

 

 TableView 
id: filesTable
TableViewColumn 
    id:nameColumn
    role: "name"
    title: "Name"
    width: dropFiles.width*.2

TableViewColumn 
    id:dirColumn
    role: "dir"
    title: "Path"
    width: dropFiles.width*.8

TableViewColumn 
    id:typeColumn
    visible: false;
    role: "type"
    title: "Type"
    width: dropFiles.width*.2

TableViewColumn 
    id:statusColumn
    visible: false;
    role: "status"
    title: "Status"
    width: dropFiles.width*.3

rowDelegate: Rectangle 
    anchors 
        left: parent.left
        right: parent.right
        verticalCenter: parent.verticalCenter
    
    height: parent.height
    MouseArea 
        anchors.fill: parent
        acceptedButtons: Qt.RightButton
        onClicked: 
            if (mouse.button == Qt.RightButton)
            
                if(styleData.selected)
                    rowContextMenu.popup();
                
                else 
                    filesTable.selection.deselect(0, filesTable.rowCount-1);
                    filesTable.selection.select(styleData.row);
                    rowContextMenu.popup();
                
            
        
    

anchors.fill: parent
selectionMode: SelectionMode.ExtendedSelection
model: filesList
 

更新我的 TableView 的 JS 函数：

function displayParsingStatus()
    for(var i= 0; i<newModel.files.length; ++i)
        switch(newModel.files[i].status)
            case 0:
                filesList.get(i).status="<font color=\"green\">Success</font>";
                break;
            case 1:
                var status ="";
                status += "<ul>";
                for(var j=0; j < newModel.files[i].warnings.length;j++)
                    status += "<li><font color=\"orange\">Warning: " + newModel.files[i].warnings[j] + "</font></li>";
                
                status += "</ul>";
                filesList.get(i).status=status;
                break;
            case 2:
                filesList.get(i).status="<font color=\"red\"><b>Error: " + newModel.files[i].error + "</b></font>";
                break;
            case 3:
                filesList.get(i).status="Ignored";
                break;
        
    

【参考方案1】：

您已经在 QML 委托元素上设置了高度：

height: parent.height

它将高度绑定到父高度。 如果您使用表达式设置高度，则每次表达式的任何元素发生更改时都会触发（并重新计算）高度。

这就是 QML 属性具有 NOTIFY 信号的原因。

因此，如果您想将高度绑定到其他元素，只需将其分配给 height 属性即可。

我还没有尝试过，但 childrenRect 可能是您正在寻找的：http://doc.qt.io/qt-5/qml-qtquick-item.html#childrenRect.height-prop

您也可以使用三元运算符为属性赋值，即：

height: (model.get(styleData.row)[styleData.role] === 0)?30:100

【讨论】：

我尝试使用 childrenRect.height 但它没有用。我也尝试使用三元运算符。我在 ListElements 中添加了一个名为“rowHeight”的属性，并在委托中使用它。它有效，但我现在遇到了性能问题，因为我的列表中有超过 14,000 个元素。不管怎样，谢谢你的回答