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

Posted 2023-02-16

【中文标题】达到屏幕限制后，突出显示矩形被放置在列表元素后面

【英文标题】：Highlight Rectangle is being placed behind List Element after the screen limit is reached

【发布时间】：2020-06-19 07:36:55

【问题描述】：

在我的屏幕上，我可以看到 11 个列表元素中的大约 5 个。我正在使用向上/向下箭头键来移动突出显示矩形（边框矩形）。 只有前 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" 
    

谢谢

【参考方案1】：

Listview 的堆叠顺序如下。

所以要让你的荧光笔在顶部更改z: 2 应该可以工作。这是 Listview 堆叠顺序的完整描述doc。 并删除列表视图实例的 z 顺序。