尝试在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值只是为了根据行选择更清楚地检查行为。