QML：Gridview键盘导航不起作用

Question

I'm using a gridview to display a complex data model generated from c++ end. I've everything working fine except that the gridview doesn't accept or respond to any keyNavigation events. Here's my code

GridView{
    id: gridView
    anchors.fill: parent
    clip: true
    cellWidth: 315
    cellHeight: 300/6+15
    focus: true
    model: system.DataList
    highlightFollowsCurrentItem: true
    keyNavigationEnabled: true//enabled but still doesnt work
    //keyNavigationWraps: true//does this matter

    highlight: Rectangle{
        color: highlightColor
        radius: 5
        width: gridView.cellWidth
        height: gridView.cellHeight
        x: gridView.currentItem.x
        y: gridView.currentItem.y
        Behavior on x { SpringAnimation { spring: 3; damping: 0.2 } }
        Behavior on y { SpringAnimation { spring: 3; damping: 0.2 } }
    }

    delegate: Component{
        Rectangle{
            id: viewParentRect
            width: gridView.cellWidth;
            height: diskListView.cellHeight - 15
            color: "transparent"

            Row{
                anchors.fill: parent
                Rectangle{

                    width: parent.width/6 ; height: parent.height
                    color: "transparent"
                    Image {
                        id: image
                        anchors.centerIn: parent
                        source: model.modelData.IconPath
                        sourceSize.width: parent.width
                        sourceSize.height: parent.height
                    }
                }
                Column{
                    Text {
                        id: displayName
                        text: model.modelData.DisplayName
                        font.family: "Sans Serif"
                        font.pointSize: viewParentRect.width/30
                    }
                    Text {
                        id: usageText
                        text: model.modelData.Usage
                        font.family: "Sans Serif"
                        font.pointSize: viewParentRect.width/30
                    }
                }
            }

            MouseArea{
                anchors.fill: parent
                onClicked: {
                    gridView.currentIndex = index
                }
                onDoubleClicked: {
                    system.enter(model.modelData.Path)
                }
            }
        }

    }

}

I tried keeping breakpoints at certain points and the result was, no keypress event is fired at all. Above code is working well with mouse but since I'm developing for desktop, I need keyboard navigation to work properly ( even if mouse navigation doesn't work, its not a problem).

Answer 1

Well, QML provides keyNavigation by itself for GridView and ListView, so long as it has focus property set to true and also has user focus. Focus can be stollen by other components, if they are created afterwards and thats why key navigation would not work as expected.

In my case, I was creating two Component/s with two different GridViews in both and then parenting it with StackView which was stealing the focus from both the GridViews.

My first workaround was to detect keyPresses by StackView and if they are arrow keys and/or enter/return keys then pass them to GridView. Set false to GridView keyNavigationEnabled property and handle these events manually. This method worked like a champ but codes became too complex. So I wrote the second method.

Dynamically create the two components and keep only one inside the StackView. Parent GridView (and other items which need exclusive focus) with a FocusScope and detect the focus by parent Component and transfer them to child. At the end, let the QML handle all key navigations. Here's the code,

main.qrc

StackView{
        id: stackWindow
        width: mainWindow.width
        height: mainWindow.height
        focus: true
        Component.onCompleted: {push(Qt.createComponent("qrc:/PrimaryHomePage.qml"))}
        onCurrentItemChanged: {currentItem.forceActiveFocus()}
        Connections{
            target: rSystem
            ignoreUnknownSignals: true
            onSwitchBetweenViews: {
                if(newValue === 1){
                    stackWindow.pop()
                    stackWindow.push(Qt.createComponent("qrc:/SecondaryViewPage.qml"))
                }
                else if(newValue === 0){
                    stackWindow.pop()
                    stackWindow.push(Qt.createComponent("qrc:/PrimaryHomePage.qml"))
                }
            }
        }
    }

Popping first ensures that StackView owns only one item at a item (replace can be used as well).

PrimaryHomePage.qrc

Item {
id: primaryHomePageParentItem
width: parent.width
height: parent.height

FocusScope{
    id: focusScope
    anchors.fill: parent
    rGridView{
            id: GridView_local
            availablewidth: parent.width
        }
}
onFocusChanged: {focusScope.focus = true}
}

And good thing, it works even faster than the first method.