qt - QML ListView 中具有实际价值的 z 属性的用途

问题描述

在下面的示例代码中，我为突出显示项设置了 z 属性，并根据值向用户显示。z 属性也可以配置为实际值。

这意味着 z 值可以具有诸如 0.1 或 1.2 之类的小数值，就像这样。

任何人都可以解释 z 值的目的应该是 QML ListView 中的小数还是实数？

import QtQuick 2.8
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Sample List View")

    property var delHeight: 50

    ListView {
        id: listView
        anchors.fill: parent
        cacheBuffer: 100
        footer: Rectangle {
            width: (listView.orientation === ListView.Horizontal) ? 200 : parent.width
            height: delHeight
            color: "lightyellow"
            Text {
                anchors.centerIn: parent
                font.pointSize: 20
                text: "Footer"
            }
        }
        header: Rectangle {
            width: (listView.orientation === ListView.Horizontal) ? 200 : parent.width
            height: delHeight
            color: "lightblue"
            Text {
                anchors.centerIn: parent
                font.pointSize: 20
                text: "Header"
            }
            z: 2
        }
        headerPositioning: ListView.OverlayHeader
        highlight: Rectangle {
            color: "white"
            opacity: 0.5
            border.color: "blue"
            border.width: 5
            z: 1.2
            Component.onCompleted: {
                console.log ("Created hightlight component with z factor: " + z)
            }
        }
//        highlightMoveDuration: 10000
//        highlightRangeMode: ListView.ApplyRange
        keyNavigationEnabled: true
        model: 20
        delegate: componentId
        layoutDirection: Qt.RightToLeft
        orientation: ListView.Vertical
        snapMode: ListView.SnapOneItem

        Component.onCompleted: {
            currentIndex = 5
        }
        focus: true
        onFocusChanged: {
            console.log ("Focus: " + focus)
        }
    }

    Component {
        id: componentId
        Rectangle {
            width: (listView.orientation === ListView.Horizontal) ? 200 : parent.width
            height: delHeight
            color: "lightgreen"
            border.color: "black"
            border.width: (listView.currentIndex === index) ? 5 : 1
            Text {
                anchors.centerIn: parent
                font.pointSize: 20
                text: "Element: " + index
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    listView.currentIndex = index
                }
            }

            Component.onCompleted: {
                console.log ("Created component: " + index)
            }
            Component.onDestruction: {
                console.log ("Destroyed component: " + index)
            }
        }
    }
}

标签： qtlistviewqml

解决方案

an的z属性item给出了该项目的堆叠顺序。

这意味着，如果您一个接一个地构建两个矩形，那么最近构建的矩形将堆叠在先前构建的矩形之上。

防爆代码：

Item {
    Rectangle {
        color: "red"
        width: 100; height: 100
    }
    Rectangle {
        color: "blue"
        x: 50; y: 50; width: 100; height: 100
    }
}

这里red矩形堆叠在矩形下方blue。

现在QML让您有机会通过z项目的属性更改堆叠顺序。

在上面的示例中，如果我将矩形的z属性指定red为大于 0 的值，我会在blue矩形顶部看到它。所以z属性改变了同级项目的堆叠顺序。

在 ListView 突出显示的情况下，该属性的用途z保持不变。当您想查看突出显示的项目时，您必须给它一个大于将要构建的项目的值。您可以通过z将 s 矩形的属性设置为componentId比高亮z值更高的值来检查这一点。

注意：它仅适用于兄弟项目。

可以在此处找到更多解释在此处
阅读有关真实类型的信息

qt - QML ListView 中具有实际价值的 z 属性的用途

问题描述

解决方案

推荐阅读