Прямоугольник выделения помещается за элементом списка после достижения предела экрана - PullRequest
Новая
       100

Прямоугольник выделения помещается за элементом списка после достижения предела экрана

2 голосов
/ 19 июня 2020

На моем экране я вижу около 5 элементов списка из 11.
Я использую клавиши со стрелками вверх / вниз для перемещения прямоугольника выделения (прямоугольник границы).
Прямоугольник выделения будет отображаться над списком элемент только для первых 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 Ответ

1 голос
/ 20 июня 2020

Порядок наложения Listview показан ниже. enter image description here

Итак, чтобы ваш маркер оказался наверху, измените z: 2, который должен работать. Вот полное описание порядка размещения Listview do c. И удалите z-порядок экземпляра вашего списка.

...