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才会获得焦点。并且第一列标题旁边有一个Textfield可以正常工作，但它不是我想要的。

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

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，它会以一种非常奇怪的方式工作，所以我会反对它。

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

1 个答案: