Qt QML Listview PositionViewIndex不工作

Question

我有一个垂直的列表视图，当我单击一个项目时，我将显示水平的列表视图。问题是，当我点击第2项时，我应该在水平列表视图上显示第2项。这里是我的实现：

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
}
}

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 }
            }
        }
    }
}

}

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 }
            }
        }
    }
}

}

Answer 1

HorizontalListView的宽度设置错误。

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
    ...
}

编辑