使用 tab 和 backtab 在 QML 的 GridView 中的第一个和最后一个项目之间切换

Question

我知道这是完全错误的，但我已经尝试了一些方法（仍然是初学者）。我已经成功地设置了一个包含 16 个项目的 GridView。我可以使用箭头键成功地浏览项目并使用返回键进行选择。我现在想使用 Tab 键转到第一个项目（即网格视图中的左上角项目），并使用后退 Tab 键转到最后一个项目（即网格视图中的右下角项目）。

这就是我到目前为止所得到的（请注意，我已经在单独的 QML 页面上定义了这些项目（上、下、左和右都可以工作，但左上和右下不能）：

    property Item leftItem
    property Item rightItem
    property Item topItem
    property Item bottomItem
    property Item topLeft
    property Item bottomRight 

这是 main.qml 中按键导航代码的主要部分：

GridView {
            id: gridView
            width: 800
            height: 800
            cellWidth: 200
            cellHeight: 200
            model: cardsModel 
            interactive: true
            focus: true  focus
            delegate: CustomRectangle {
                filePath: filePath1
                leftItem: index % 4 === 0 ? null : gridView.itemAt(index - 1)
                rightItem: (index + 1) % 4 === 0 ? null : gridView.itemAt(index + 1)
                topItem: index < 4 ? null : gridView.itemAt(index - 4)
                bottomItem: index > 11 ? null : gridView.itemAt(index + 4)
                topLeft: gridView.itemAt(0) 
                bottomRight: gridView.itemAt(gridView.count-1)

                    Keys.onPressed: {
                        if (event.key === Qt.Key_Left && leftItem) {
                            leftItem.forceActiveFocus()
                            focus = true
                        } else if (event.key === Qt.Key_Right && rightItem) {
                            rightItem.forceActiveFocus()
                            focus = true
                        } else if (event.key === Qt.Key_Up && topItem) {
                            topItem.forceActiveFocus()
                            focus = true
                        } else if (event.key === Qt.Key_Down && bottomItem) {
                            bottomItem.forceActiveFocus()
                            focus = true
                        } else if (event.key === Qt.Key_Tab) {
                            gridView.itemAt(0).forceActiveFocus()
                            focus = true
                            } else if (event.key === Qt.Key_Backtab) {
                            gridView.itemAt(gridView.count - 1).forceActiveFocus()
                            focus = true
                            } else if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
                                flipCard()
                                flipped = true
                                focus = true
                                cardClicked()
                            }
                        }

制表符和后退键键行会引发错误，提示参数不足。

请帮忙！先感谢您！ :)

Answer 1

如果您的代表一开始就是

Button

，您会省去很多麻烦。您可以通过适当的样式来隐藏它是

Button

的事实，但是，通过将其设置为

Button

，它将自动实现所有按键导航、箭头键、选项卡和后选项卡。

    GridView {
        model: 300
        width: 800
        height: 800
        cellWidth: 200
        cellHeight: 200
        delegate: Button {
            width: 200
            height: 200
            onClicked: GridView.view.currentIndex = index
        }
        highlight: Rectangle {
            border.color: "blue"
            border.width: 2
            z: 2
       
        }
    }

您可以在线尝试！