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 헤더를 추가하는 방법은 무엇입니까?

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

} 

그러나, 그것은 아주 이상한 방식으로 작동 당신이 그것에 텍스트 필드를 추가하면이 내가 끝낼했습니다 것 - 그것은 headerDelegate로 갈 수있는 엄격한 요구 사항이 있다면

그래서 나는 그것에 반대 투표를 할 것입니다.