使用箭头键时,QML在ListView上跳过项目

时间:2015-09-29 10:11:55

标签: listview qml

我正在使用ListView,并希望在使用箭头键导航列表时跳过特定项目。

例如,ListModel中有4个元素。

ListModel {
    id: myListModel
    ListElement {
        item_name: "Item 1"
        item_description: "Description 1"
    }
    ListElement {
        item_name: "Item 2"
        item_description: "Description 2"
    }
    ListElement {
        item_name: "Item 3"
        item_description: "Description 3"
    }
    ListElement {
        item_name: "Item 4"
        item_description: "Description 4"
    }
}

当用户使用“向上”或“向下”键导航时,我希望始终跳过“第3项”。

例如,当选择“项目4”并且用户按下“向上”键时,选择应从“项目4”跳到“项目2”。同样,如果选择“第2项”,然后按下“向下”键,则应选择“第4项”(应跳过“第3项”)

我已经对下面的代表进行了编码,但它没有按照我的预期运行:

// delegate
Component {
    id: myComponent
    Item {
        width: 40; height: 40
        enabled: (ListView.view.currentIndex === 2) false : true
        Text {
            anchors.centerIn: parent
            text: item_name
        }
    }
}

基本上,代表的enabled=false不能按我的预期运作;任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:1)

The default behaviour of a ListView that has keyboard focus is to navigate up and down by one item, as you may know. So, you need to override that behaviour using the attached properties of Keys

import QtQuick 2.4
import QtQuick.Window 2.0

Window {
    width: 640
    height: 480
    visible: true

    ListModel {
        id: myListModel
        ListElement {
            item_name: "Item 1"
            item_description: "Description 1"
        }
        ListElement {
            item_name: "Item 2"
            item_description: "Description 2"
        }
        ListElement {
            item_name: "Item 3"
            item_description: "Description 3"
        }
        ListElement {
            item_name: "Item 4"
            item_description: "Description 4"
        }
    }

    ListView {
        id: listView
        width: 40
        height: 80
        focus: true
        anchors.centerIn: parent
        model: myListModel
        currentIndex: 0
        delegate: Item {
            id: delegateItem
            width: 40; height: 40
            Text {
                anchors.centerIn: parent
                text: item_name
                color: delegateItem.ListView.isCurrentItem ? "red" : "black"
            }
        }

        Keys.onDownPressed: {
            if (listView.currentIndex + 2 < listView.count - 1)
                listView.currentIndex += 2;
        }
        Keys.onUpPressed: {
            if (listView.currentIndex - 2 >= 0)
                listView.currentIndex -= 2;
        }
    }
}

您尚未指定用户应如何一次导航一个项目,但您应该能够从上面的代码和Keys的文档中找到答案。