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

このコードは期待したとおりに動作していません。テキストフィールドは、右ボタンでヘッダーをクリックしているときにのみフォーカスを取得します。そして、テキストフィールドが最初の列見出しの横にうまく機能しますが、それは私が望むものではありません。

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

これは後で必要に応じて編集できます。再び

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を追加されると：これは私が終わるてきたもの - それはheaderDelegateで行くことに厳しい要件はなら

私はそれに反対します。