[Interest] Keyboard navigation into, out of and within TableView in QML

Elvis Stansvik elvstone at gmail.com
Tue Jun 7 15:31:35 CEST 2016


Hi all,

I'm working with a device that has only a pushwheel button as input.
Turning the button gives keyboard Up/Down presses.

Given:

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.3

Window {
    visible: true
    width: 400
    height: 400

    ListModel {
        id: libraryModel
        ListElement {
            title: "A Masterpiece"
            author: "Gabriel"
        }
        ListElement {
            title: "Brilliance"
            author: "Jens"
        }
        ListElement {
            title: "Outstanding"
            author: "Frederik"
        }
    }

    Column {
        TableView {
            id: libraryView
            TableViewColumn {
                role: "title"
                title: "Title"
                width: 100
            }
            TableViewColumn {
                role: "author"
                title: "Author"
                width: 200
            }
            model: libraryModel
        }

        Button {
            id: button
            text: "Button"
            focus: true
        }
    }
}

What is the most elegant way of having the Up key move focus+select
the last row in tableView, and then allow moving between rows in the
tableView with Up/Down, where Down on the last row brings you back to
the button?

At the moment I have this horrible solution where I add

            Keys.onUpPressed: {
                if (currentRow > 0) {
                    console.log('moving up');
                    var newRow = currentRow - 1;
                    selection.clear();
                    selection.select(newRow);
                    currentRow = newRow;
                }
            }

            Keys.onDownPressed: {
                selection.clear();
                if (currentRow == rowCount - 1) {
                    console.log('moving to button');
                    currentRow = -1;
                    button.forceActiveFocus();
                } else {
                    console.log('moving down');
                    var newRow = currentRow + 1;
                    selection.select(newRow);
                    currentRow = newRow;
                }
            }

to the TableView and

            Keys.onUpPressed: {
                if (libraryView.rowCount != 0) {
                    console.log('moving to table view');
                    var newRow = libraryView.rowCount - 1;
                    libraryView.forceActiveFocus();
                    libraryView.selection.clear();
                    libraryView.selection.select(newRow);
                    libraryView.currentRow = newRow;
                }
            }

to the Button, but surely there's some better way of achieving this?

Thanks in advance,
Elvis



More information about the Interest mailing list