Qt QML ListView的positionViewAtIndex无法工作

Question

Qt QML ListView的positionViewAtIndex无法工作

3

我有一个垂直的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 }
            }
        }
    }
}

}

水平列表视图

我点击第二个和第三个项目，但它总是显示第一个项目。有人遇到这个问题吗？提前感谢。

- nAkhmedov

如果您有更多的项目，它将按预期工作，只有当有足够的项目在其后填充视图时，它才会将所选项目置于视图顶部。如果您将最后一个项目拖到视图顶部，它将反弹并返回，因为您超出了视图边界。 - dtech

你的意思是三个项目不够吗？如果是的话，我不这么认为，因为在我的项目模型中有60个项目，但它仍然无法正常工作。 - nAkhmedov

看起来当StackView仍处于繁忙状态时，您无法调用positionViewAtIndex（但Qt文档没有提到这一点）。尝试在过渡完成后调用horListView.init(index)。 - mcchu

listView.positionViewAtIndex(index, ListView.Beginning) 在转换后可以工作。但我需要自定义解决方案来实现所需的内容。 - nAkhmedov

只需在原始代码中添加 highlightRangeMode: ListView.StrictlyEnforceRange，即可在水平列表中正确突出显示项目。不能确定它是否是一个错误。当在水平方向使用时，ListView 倾向于有一些（更多）的错误。 - BaCaRoZzo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vedanshu · Accepted Answer

horizontalListView 的宽度设置错误。

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

编辑

解释：如果将视图定位在索引处会导致在视图的开头或结尾显示空白区域，则该视图将被定位在边界处。