ListView高亮项未显示

Question

我正在尝试突出显示ListView中当前选定的项目.下面是我正在使用的代码; 由于某种原因,虽然类似的代码在这个应用程序的另一个ListView中完美地工作,但是这里的SelectedRectangle项永远不会显示,尽管所选的项在它应该的时候会改变.

Rectangle {
    id: deviceTree
    width: (window.width * 2) / 3
    height: 400

    border {
        width: 2
        color: "black"
    }

    ListView {
        id: deviceTreeView

        model: deviceTreeModel
        delegate: deviceTreeDelegate
        highlight: SelectionRectangle {}

        anchors.fill: parent
        anchors.margins: 6
    }

    Component {
        id: deviceTreeDelegate

        Rectangle {
            border.color: "#CCCCCC"
            width: deviceTree.width
            height: 30

            smooth: true
            radius: 2

            MouseArea {
                anchors.fill: parent
                onClicked: { deviceTreeView.currentIndex = index; window.selectedDeviceChanged(deviceName) }
            }
        }
    }
}

SelectedRectangle.qml

Rectangle
{
    id: selectionRectangle

    color: "lightsteelblue"
    smooth: true
    radius: 5
}

解决方案:deviceTreeDelegate中的矩形默认为白色并与选择矩形重叠.使用属性将其设置为trasparent,以便可以看到选择.

Answer 1

这是因为默认的矩形颜色为白色,高亮显示在代理下.将矩形颜色设置为"透明"将允许通过委托显示突出显示.

Answer 2

您的代码有两个错误：

1. 高亮属性的组件。组件类型的名称与定义该组件的 QML 文件的名称相同。您在名为 SelectedRectangle.qml 的文件中定义了它，因此您必须highlight: SelectionRectangle {}在主 QML 文件中写入
2. 高亮成员的类型是Component。因此，用于此成员的组件应该具有继承 Component 的类型。或者您使用继承 Rectangle 的 QML 组件，而 Rectangle 不继承 Component。您应该将 SelectedRectangle 包含在 Component 对象中，就像您对委托所做的那样。

最后，您应该为突出显示组件编写如下内容：

highlight: Component {
    SelectedRectangle {}
}