将项目隐藏在 ListView 的视口之外

Question

我已经学习 QtQuick 大约一个星期了，我在尝试实现的目标上遇到了一种奇怪的行为。我想制作一个带有键盘导航的垂直 ListView，这样当我按下向上或向下时，项目就会向上或向下移动，如果项目进入或离开 "viewport"，它的 opacity 属性会平滑地变为 0 或 1.

这是我当前的 QML 代码：

import QtQuick 2.4

Rectangle {
    width:200
    height:400
    ListView {
        property int activePosition:1
        property int itemDisplayed:3
        width:parent.width-50
        height:parent.height-50
        anchors.centerIn:parent
        model:10
        snapMode:ListView.SnapToItem
        focus:true
        cacheBuffer:2000
        Component.onCompleted: {
            console.log(count+' != '+contentItem.children.length+' ???')
        }
        Keys.onPressed: {
            var i = 0
            console.log('pos='+activePosition)
            console.log(count+' != '+contentItem.children.length+' ???')
            if (event.key === Qt.Key_Up) {
                if (activePosition == 1 && currentIndex > 0) {
                    i = currentIndex+itemDisplayed-1
                    if (i < contentItem.children.length - 2/* why -2 instead of -1 ??? */) {
                        console.log('out='+i)
                        contentItem.children[i].state = 'out'
                    }
                }
                activePosition = activePosition > 1 ? activePosition - 1 : activePosition
            }
            if (event.key === Qt.Key_Down) {
                if (activePosition == itemDisplayed && currentIndex < contentItem.children.length - 2) {
                    i = currentIndex-itemDisplayed+1
                    if (i >= 0) {
                        console.log('out='+i)
                        contentItem.children[i].state = 'out'
                    }
                }
                activePosition = activePosition < itemDisplayed ? activePosition + 1 : activePosition
            }
        }

        delegate: Rectangle {
            id:rect
            state:index < ListView.view.itemDisplayed ? 'in' : 'out'
            opacity:1.0
            width:ListView.view.width
            height:ListView.view.height/ListView.view.itemDisplayed
            border.color:'white'
            border.width:1
            color:activeFocus ? 'red': 'gray'
            onActiveFocusChanged: {
                if (activeFocus) {
                    state = 'in'
                    console.log('in='+index)
                }
            }
            states: [
                State { name:'in'; PropertyChanges { target:rect; opacity:1.0 } },
                State { name:'out'; PropertyChanges { target:rect; opacity:0.0 } }
            ]
            transitions: [
                Transition {
                    to:'in'
                    NumberAnimation { property:'opacity'; duration:250 }
                },
                Transition {
                    to:'out'
                    NumberAnimation { property:'opacity'; duration:250 }
                }
            ]
            Text {
                text:index
                anchors.centerIn:parent
            }
        }
    }
}

第一个问题：model=10，为什么model.count不等于contentItem.children.length？ onCompleted 给出 5 对 11，在导航期间给出 10 对 11

第二个问题：如果我按 UP 或 DOWN，在我达到 index=4 之前它工作正常，为什么？

由于我是 QtQuick 的初学者，所以这可能不是正确的方法。我尝试使用 visible 属性但每个项目都有 visible = true 即使它们在外面。我也试过 indexAt() 但没有成功。

任何帮助都会很棒 :-)

Answer 1

现在我对 ListView 行为有了更多了解。我以前的代码可以通过删除不再有用的 Keys.onPressed 事件并通过直接在 onActiveFocusChanged 处理程序中使用 itemAt() 方法来修复。

将项目隐藏在 ListView 的视口之外

Hiding an item outside viewport of a ListView

qt

listview

qml

qtquick2