嘗試在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組件使用的默認顏色。

根據文檔，該顏色默認為白色。

因此，應在rowDelegate設置用於選擇行的顏色。

例：

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

height值只是為了根據行選擇更清楚地檢查行為。