达到屏幕限制后，突出显示矩形被放置在列表元素后面

Question

在我的屏幕上，我可以看到 11 个列表元素中的大约 5 个。
我正在使用 Up/Down 箭头键移动高亮矩形（边框矩形）。
只有前 5 个列表元素才会在列表元素上方显示高亮矩形。
一旦它到达第 6 个元素，矩形将显示在列表元素后面，即使 Z 索引为 1 并且它再也不会出现在列表元素上方。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
Window {
    visible: true
    width: Screen.width
    height: Screen.height
    id: rootWindow
    ListModel {
        id: contact
        ListElement {
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }

    }

    ListView{
        clip: true
        z: -1
        id: lst
        width: Screen.width
              height: Screen.height
        anchors.centerIn: rootWindow
        x: rootWindow.width *.05
        spacing: 20
        y: subrect.height + subrect.y+ 100
        model: contact
        delegate:
            RowLayout{
            id: idx
            anchors.topMargin: 5
            spacing: -5
            Rectangle{
                width: 30
                height:100
                color: "#3399ff"
                radius: 5
            }
            Rectangle{
                id: segment
                width: lst.width
                height: 100
                color: "white";
                layer.enabled: true
                layer.effect: DropShadow{
                    transparentBorder: true
                    horizontalOffset: 3
                    verticalOffset: 3
                    color: "#e1dede"
                }
                RowLayout {
                    Rectangle{
                        id: inner
                        width: 300
                        height: 50
                        color: "transparent"
                        Text {
                            x:  50
                            y: inner.height /3
                            text: "Name : " + name
                            font.pixelSize: 30
                            anchors.verticalCenter: inner
                        }
                        Column{
                            y: inner.height /3

                            Text {
                                color: "grey"
                                x: lst.width * .8
                                text: "Contact "
                                font.pixelSize: 20

                            }
                            Text {
                                color: "grey"
                                font.pixelSize: 20
                                x: lst.width * .8
                                text: number
                            }
                        }
                    }
                }
            }
        }
        focus: true
        highlight: Rectangle { color: "transparent"; z:1;radius: 8; border.width: 3; border.color: "black" }
    }
}

谢谢

Answer 1

Listview 的堆叠顺序如下。

因此，为了让荧光笔位于顶部，更改 z: 2 应该可行。这里是Listview堆叠顺序的完整描述doc。并删除列表视图实例的 z 顺序。

达到屏幕限制后，突出显示矩形被放置在列表元素后面

Highlight Rectangle is being placed behind List Element after the screen limit is reached

qt

qml

qt-quick

qtquick2

qtquickcontrols2