Qt QML Listview positionViewAtIndex not working - qt

Question

I have a vertical Listview and when i click an item i will display horizontal Listview. The question is that when i click 2 nd item i should display 2nd item on horizontal Listview. Here it is my implementation:
main.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow {
id: root
visible: true
width: 640
height: 480
title: qsTr("Hello World")
StackView {
id: rootStackView
anchors.fill: parent
initialItem: verListView
}
VListview {
id: verListView
onListItemClicked: {
rootStackView.push(horListView)
horListView.init(index)
}
}
HListView {
id: horListView
visible: false
}
}
VListview.qml
import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
Page {
id: root
signal listItemClicked(var index)
ListView {
id: listView
anchors.fill: parent
Layout.fillWidth: true
model: ListModel {
ListElement {
name: "Bill Smith"
number: "555 3264"
}
ListElement {
name: "John Brown"
number: "555 8426"
}
ListElement {
name: "Sam Wise"
number: "555 0473"
}
}
delegate: Component {
id: contactDelegate
Item {
MouseArea {
anchors.fill: parent
onClicked: {
console.log("aaa")
root.listItemClicked(index)
}
}
width: listView.width; height: 40
Column {
Text { text: '<b>Name:</b> ' + name }
Text { text: '<b>Number:</b> ' + number }
}
}
}
}
}
HListview.qml
import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
Page {
function init(index) {
console.log(index)
horizontalListView.currentIndex = index;
horizontalListView.positionViewAtIndex(index, ListView.Beginning)
}
ListView {
id: horizontalListView
anchors.fill: parent
orientation: ListView.Horizontal
model: ListModel {
ListElement {
name: "Bill Smith"
number: "555 3264"
}
ListElement {
name: "John Brown"
number: "555 8426"
}
ListElement {
name: "Sam Wise"
number: "555 0473"
}
}
snapMode: ListView.SnapToItem
delegate: Component {
id: contactDelegate
Item {
width: horizontalListView.width; height: 40
Column {
Text { text: '<b>Name:</b> ' + name }
Text { text: '<b>Number:</b> ' + number }
}
}
}
}
}
HorizontalListView
I am clicking 2nd and 3 rd items but it display always first item. Anybody faced the issue? Thanks in advance

Answer 1

The width of horizontalListView is wrongly set.
HListview.qml
ListView {
id: horizontalListView
// anchors.fill: parent
height: 40 <== fix the height
width: root.width <== width of the hview must be same size as that of root window.
orientation: ListView.Horizontal
...
}
EDIT
Explanation: If positioning the view at index would cause empty space to be displayed at the beginning or end of the view, the view will be positioned at the boundary.