QMLで編集しようとするとTableViewの行が消える

Question

QMLとTableViewコンポーネントを使用して、テキストボックスを編集して基になるモデルを更新したいところです。私の問題は、行が視覚的にTableViewから完全に消え、いくつかのクリック後に再び表示されることがあるということです。これは、ランダムに、おそらく行テキストの下をクリックすると発生するようです。

私の実装は次のとおりです。

import QtQuick 2.2 
import QtQuick.Controls 1.4 
import QtQuick.Controls.Styles 1.4 
import QtQuick.Layouts 1.0 
import QtQuick.Window 2.1 


Window { 
    visible: true 
    width: 538 
    height: 360 

    ListModel { 
     id: mymodel 

     ListElement { 
      title: "VideoName" 
      filesize: "1.5GB" 
      length: "20:00" 
     } 

     ListElement { 
      title: "VideoName" 
      filesize: "1.5GB" 
      length: "20:00" 
     } 

     ListElement { 
      title: "VideoName" 
      filesize: "1.5GB" 
      length: "20:00" 
     } 
    } 


    ControlView { 
     visible: true 
     width: parent.width; height: parent.height 

     anchors.centerIn: parent 

     TableView { 
      width: parent.width; height: parent.height 
      anchors.centerIn: parent 

      TableViewColumn { 
       resizable: false 
       role: "title" 
       title: "Title" 
       width: 250 
      } 

      TableViewColumn { 
       role: "filesize" 
       title: "Size" 
       width: 100 
       resizable: false 
      } 

      TableViewColumn { 
       role: "length" 
       title: "Length" 
       width: 100 
       resizable: false 

      } 

      model: mymodel 

      rowDelegate: Rectangle { 
       height: 54 
      } 

      itemDelegate: RowLayout { 

       anchors.fill: parent 

       Loader{ 
        id: loaderEditor 
        sourceComponent: editor 
        Connections { 
         target: loaderEditor.item 
        } 

        Component { 
         id: editor 
         TextInput { 
          id: textinput 
          color: styleData.textColor 
          text: styleData.value 

          onEditingFinished: { 
           mymodel.setProperty(styleData.row, styleData.role, 
                loaderEditor.item.text) 
          } 

          MouseArea { 
           id: mouseArea 
           anchors.fill: parent 
           hoverEnabled: true 
           onClicked: { 
            textinput.forceActiveFocus() 
            textinput.selectAll() 
           } 
          } 
         } 
        } 
       } 
      } 
     } 
    } 
} 

私の問題を強調するために、これはテーブルが最初に表示される方法である：

私がしようと列を編集することができますが、私がクリックした場合その行は行なわれますが、テキスト上には直接表示されません。

あなたは、その行が消えているのを見ることができます。一度クリックすると戻ってくることがありますが、何が原因かわかりません。

Answer 1

問題はrowDelegateです。これは、Rectangleコンポーネントによって使用されるデフォルトの色を使用しています。

According to the documentationこの色はデフォルトで白です。

したがって、選択するときに行を埋めるために使用する色をrowDelegateに設定する必要があります。

例：heightで

rowDelegate: Rectangle { 
    color: styleData.selected ? "#000" : "#fff" 
    height: styleData.selected ? 54 : 20 
} 

値は単に、行選択に応じて、より明確に動作を確認することです。