水平列表视图导航-可见项目

Question

我有更多的水平列表视图。例如，让我们拿其中的两个。当一个列表滚动时，每个列表的项目长度不相同，而另一个列表也是如此。我已经用contentX属性解决了这个问题。但是，当我想在彼此之间导航时（当我按下"向下"键时，我需要强制关注第二个列表视图）。问题是，重点放在了被记住的horizontalna2.currentIndex上，我想转到列表视图中第一个可见的项目。

在android中是很简单的，但要在这里解决这个问题，嗯。。这是代码的草图：

Rectangle {
width: 500
height: 200
ListModel {
        id: model1
        ListElement { itemwidth: 100 }
        ListElement { itemwidth: 200 }
        ListElement { itemwidth: 50 }
        ListElement { itemwidth: 70 }
        ListElement { itemwidth: 90 }
        ListElement { itemwidth: 90 }
        ListElement { itemwidth: 90 }
        ListElement { itemwidth: 90 }
        ListElement { itemwidth: 90 }
        ListElement { itemwidth: 90 }
    }
    ListModel {
        id: model2
        ListElement { itemwidth: 300 }
        ListElement { itemwidth: 50 }
        ListElement { itemwidth: 70 }
        ListElement { itemwidth: 100 }
        ListElement { itemwidth: 90 }
        ListElement { itemwidth: 30 }
        ListElement { itemwidth: 90 }
        ListElement { itemwidth: 90 }
        ListElement { itemwidth: 90 }
        ListElement { itemwidth: 90 }
    }
ListView {
    clip: true
    id: horizontalna
    boundsBehavior: Flickable.StopAtBounds
    width: 500
    height: 60;
    focus: true
    model: model1
    orientation: ListView.Horizontal
    KeyNavigation.down: horizontalna2
    onContentXChanged: {
        if (horizontalna.activeFocus === true)
        {
            horizontalna2.contentX = horizontalna.contentX
        }
    }
    delegate: Item {
        id: containerHorizontal
        width: itemwidth; height: 60;
        Rectangle {
            id: contentHorizontal
            anchors.centerIn: parent; width: containerHorizontal.width; height: containerHorizontal.height - 10
            color: "transparent"
            antialiasing: true
            Rectangle { id: insideConHorizontal; anchors.fill: parent; anchors.margins: 3; color: "grey"; antialiasing: true; radius: 5

                Text {
                    id: labelHorizontal
                    text: "name"
                    color: "white"
                }
            }
        }
        states: State {
            name: "active"; when: containerHorizontal.activeFocus
            PropertyChanges { target: contentHorizontal; color: "#FFFF00"; scale: 1}
            PropertyChanges { target: insideConHorizontal; color: "#F98F06" }
            PropertyChanges { target: labelHorizontal; color: "#0E2687"}
        }
    }
}
ListView {
    id: horizontalna2
    anchors.top: horizontalna.bottom
    boundsBehavior: Flickable.StopAtBounds
    width: 500
    height: 60;
    focus: true
    model: model2
    orientation: ListView.Horizontal
    onContentXChanged: {
        if (horizontalna2.activeFocus === true)
        {
            horizontalna.contentX = horizontalna2.contentX
        }
    }
    delegate: Item {
        id: containerHorizontal2
        width: itemwidth; height: 60;
        Rectangle {
            id: contentHorizontal2
            anchors.centerIn: parent; width: containerHorizontal2.width; height: containerHorizontal2.height - 10
            color: "transparent"
            antialiasing: true
            Rectangle { id: insideConHorizontal2; anchors.fill: parent; anchors.margins: 3; color: "grey"; antialiasing: true; radius: 5
                Text {
                    id:labelHorizontal2
                    color: "white"
                    text: "name"
                }
            }
        }
        states: State {
            name: "active"; when: containerHorizontal2.activeFocus
            PropertyChanges { target: contentHorizontal2; color: "#FFFF00"; scale: 1}
            PropertyChanges { target: insideConHorizontal2; color: "#F98F06" }
            PropertyChanges { target: labelHorizontal2; color: "#0E2687"}
        }
    }
}

}

编辑[已解决]：根据内容获取第二个列表的第一个可见项的索引X-->函数indexAt（）

onCurrentIndexChanged: {
                    if (horizontalna.activeFocus === true)
                    {
                       horizontalna2.currentIndex = horizontalna2.indexAt((horizontalna2.contentX),0)
                    }
                }

Answer 1

根据contentX-->函数indexAt（）获取第二个列表的第一个可见项的索引

onCurrentIndexChanged: {
                    if (horizontalna.activeFocus === true)
                    {
                       horizontalna2.currentIndex = horizontalna2.indexAt((horizontalna2.contentX),0)
                    }
                }