Qt QML Listview positionViewAtIndex不起作用答案

【问题标题】：Qt QML Listview positionViewAtIndex not workingQt QML Listview positionViewAtIndex不起作用
【发布时间】：2016-12-30 06:57:24
【问题描述】：

我有一个垂直的 Listview，当我单击一个项目时，我将显示水平的 Listview。问题是当我单击第二个项目时，我应该在水平 Listview 上显示第二个项目。这是我的实现：

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

}

水平列表视图

我点击了第 2 项和第 3 项，但它始终显示第一项。有人遇到过这个问题吗？提前致谢

【问题讨论】：

如果您有更多项目，它将按预期工作，只有当它后面有足够的项目来填充视图时，它才会将选定的项目带到视图的顶部。如果您将最后一个项目拖到视图顶部，它会弹回并返回，因为您超出了视图范围
你的意思是3项还不够？如果是，我不这么认为，因为在我的项目模型中有 60 个项目，但它仍然无法正常工作
当 StackView 仍为 busy 时，您似乎无法调用 positionViewAtIndex（但 Qt 文档对此只字未提）。转换完成后尝试调用horListView.init(index)。
listView.positionViewAtIndex(index, ListView.Beginning) 在过渡后工作。但我需要自定义解决方案来实现我所需要的
只需将highlightRangeMode: ListView.StrictlyEnforceRange 添加到您的原始代码中，您就会在水平列表中突出显示正确的项目。不能确定它是否是一个错误。 ListView 在水平方向使用时往往会有点（更多）错误。

标签： qt listview qml

【解决方案1】：

horizontalListView 的 width 设置错误。

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

编辑

说明：如果将视图定位在索引处会导致在视图的开头或结尾处显示空白空间，则视图将定位在边界处。

【讨论】：

Component.onCompleted 在应用程序加载时被调用，即使您没有单击列表项。其次，您始终显示位于位置 2 的项目。
对不起。我是用代码练习的，一定是抄了以前的版本。编辑了答案。
可以，但是需要调用positionViewAtIndex方法吗？
代码保持不变。只需更改代码中的上述行。其他一切似乎都很好。
但它工作得很好，但它显示第三个元素而不是第一个元素？你点击第一个元素了吗？