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

您的代码有两个错误：

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

最后，你应该为你的高亮组件写这样的东西：

highlight: Component {
    SelectedRectangle {}
}

ListView高亮项未显示

2 个答案: