Purpose of z property with real value in QML ListView - qt

Question

In the below sample code, I set z property for the highlight item and depending on the value, it shows up to the user. The z property can also be configured with real value.
It means z value can have fractional values such as 0.1 or 1.2, like that.
Can anyone explain the purpose of z value should be fractional or real value in 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)
}
}
}
}

Answer 1

The z property of an item gives the stacking order to that item.
Meaning, if you are constructing two Rectangles one after the other than recently constructed rectangle will be stacked on top the previously constructed one.
Ex code:
Item {
Rectangle {
color: "red"
width: 100; height: 100
}
Rectangle {
color: "blue"
x: 50; y: 50; width: 100; height: 100
}
}
Here red rectangle stacked below blue rectangle.
Now QML gives you chance to change the stacking order through z property of the item.
in the above example if I assign z property of the red rectangle to have a value of anything above 0, I would see it on top of blue rectangle. So z property has changed the stacking order for the sibling item.
The purpose of the z property stays the same in case of ListView highlight. When you want to see the highlight item then you have to give it a value which is greater than the items which will be constructed. You can check this by just setting z property for the componentIds rectangle to some higher value than highlights z value.
NOTE: it only works for sibling items.
More explanation can be found here
Read about the real type here