如何在 qml 中添加可编辑的 TableView 标头？

Question

import QtQuick 2.7
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.3

Rectangle {
    width: 640
    height: 480
    ListModel {
        id: tstModel
        ListElement { animal: "dog" }
    }
    TableView {
        id: tableView
        anchors.fill: parent
        model: tstModel

        headerDelegate: Item{
            height: 50
            width: animalColumn.width
            TextField{
                text: styleData.value
                anchors.fill: parent
            }
        }
        TableViewColumn {
            id: animalColumn
            title: "Animal"
            role: "animal"
            width: 50
            resizable: false
            movable:  false
        }
    }
}

此代码未按预期运行。只有当我用右键单击标题时，文本字段才会获得焦点。在第一列标题旁边有一个 Textfield 可以正常工作，但这不是我想要的。

如何在qml中添加可编辑的TableView header？

Answer 1

我发现这个headerDelegate 相当有问题或者不应该在这种情况下使用。我宁愿从scrath 实现一个标题以用于您的用例。试试这个作为起点：

Rectangle {
    width: 640
    height: 480

    ListModel {
        id: tstModel
        ListElement { animal: "cat" }
        ListElement { animal: "cat" }
        ListElement { animal: "cat" }
        ListElement { animal: "cat" }
        ListElement { animal: "cat" }
        ListElement { animal: "cat" }
        ListElement { animal: "cat" }
    }


    TextField{
        id: tableViewCustomHeader

        property int curRow: tableView.currentRow
        property bool isActual: curRow >= 0

        function reloadText() { text = tstModel.get(curRow).animal }
        function saveText()   { tstModel.setProperty(curRow, "animal", text); tableView.model = tstModel;  }

        width: animalColumn.width
        height: isActual ? 20 : 0

        onCurRowChanged: {
            if ( isActual >= 0 ) reloadText();
            focus = true;
        }
        onTextChanged: if ( isActual >= 0 ) saveText()
    }

    TableView {
        id: tableView
        anchors {
            top: tableViewCustomHeader.bottom
            bottom: parent.bottom
            left: parent.left
            right: parent.right
        }

        model: tstModel
        headerVisible: false

        TableViewColumn {
            id: animalColumn

            title: "Animal"
            role: "animal"
            width: 200
            resizable: false
            movable:  false
        }
    }
}

之后你可以随意编辑它。

如果是 严格 要求与 headerDelegate 一起使用 - 这就是我的最终结果：

Rectangle {
    width: 640
    height: 480

    ListModel {
        id: tstModel
        ListElement { animal: "dog" }
        ListElement { animal: "cat" }
    }

    TableView {
        id: tableView
        anchors.fill: parent
        model: tstModel

        headerDelegate:
            TextField{
                property int curRow: tableView.currentRow

                function reloadText() { text = tstModel.get(curRow).animal }
                function saveText()   { tstModel.setProperty(curRow, "animal", text); tableView.model = tstModel;  }

                onCurRowChanged: {
                    if ( curRow >= 0 ) reloadText()
                }
                onTextChanged: saveText()
                width: parent.width
        }

        TableViewColumn {
            id: animalColumn

            title: "Animal"
            role: "animal"
            width: 200
            resizable: false
            movable:  false
        }
    }

}

但是，再一次，一旦您将 TextField 添加到它，它就会以一种非常奇怪的方式工作，所以我会投反对票。