Wie fügt man einen bearbeitbaren TableView Header in qml hinzu?

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 
     } 
    } 
} 

Dieser Code wirkt nicht wie ich erwartet. Textfield wird nur fokussiert, wenn ich mit der rechten Maustaste auf die Kopfzeile klicke. Und neben der ersten Spaltenüberschrift funktioniert ein Textfeld, aber das ist nicht das, was ich will.

Wie eine editierbare Tableview-Header in qml hinzufügen?

Answer 1

finde ich headerDelegate eher Buggy sein oder sollte in diesem Szenario nicht verwendet werden. Ich würde lieber einen Header von scrath für Ihren Anwendungsfall verwenden. Versuchen Sie dies als Ausgangspunkt:

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 
     } 
    } 
} 

Sie können dies bearbeiten, wie auch immer Sie danach wollen.

Wenn es eine strenge Anforderung mit headerDelegate zu gehen ist - das, was ich am Ende mit habe:

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 
     } 
    } 

} 

Aber noch einmal, es auf eine sehr seltsame Art und Weise funktioniert, wenn Sie TextField- es hinzufügen , also würde ich dagegen stimmen.