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

Question

我有更多的水平列表视图。例如，让我们采取其中的两个。每个列表的项目长度不同，当一个列表滚动时 - 另一个也滚动。我已经用 contentX 属性解决了这个问题。但是，当我想在彼此之间导航时（当我按下“向下”键时，我需要强制关注第二个列表视图）。问题是焦点在被记住的horizo​​ntalna2.currentIndex 上，我想继续在listview 中的第一个可见项目。

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

}

编辑[已解决]： 根据 contentX 获取第二个列表的第一个可见项的索引 --> 函数 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)
                    }
                }