[SOLVED] Scroll ListView to Item on Tab Navigation

[th.thielemann]

I have a Qml ListView and want to navigate through the list. Scrolling by mouse is possible. But in case i press the Tab key, the cursor goes to the next element and the list is not scrolled.
What is necessary to auto-scroll to the selected item.
Hint: List is not in ScrollView yet.

[Manfred]

Hello,

maybe the ListView highlightRangeMode property is what you're looking for?
Hope this helps!

cheers
Manfred

[p3c0]

@th.thielemann

I have a Qml ListView and want to navigate through the list. Scrolling by mouse is possible. But in case i press the Tab key, the cursor goes to the next element and the list is not scrolled.

Can you show an example ?

What is necessary to auto-scroll to the selected item.

If you set the currentIndex of the ListView it will set auto scroll to that item.

//Assuming ListView (view) has those many items
view.currentIndex = 80

[th.thielemann]

Updates of currentIndex are only done if I scroll through the list. But not by tab key navigation.

Here is an example:

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1

Rectangle {
    id: root
    width: 1024
    height: 550

    ListModel {
        id: personalData
        ListElement {
            dataLabel: "Firstname"
            dataValue: "Herbert"
        }
        ListElement {
            dataLabel: "Lastname"
            dataValue: "Roth"
        }
        ListElement {
            dataLabel: "Plays"
            dataValue: "Guitar"
        }
        ListElement {
            dataLabel: "Country"
            dataValue: "Germany"
        }
        ListElement {
            dataLabel: "Age"
            dataValue: "65"
        }
        ListElement {
            dataLabel: "Hobby"
            dataValue: "Walking"
        }
        ListElement {
            dataLabel: "Birthday"
            dataValue: "14.12.1926"
        }
        ListElement {
            dataLabel: "City"
            dataValue: "Suhl"
        }
        ListElement {
            dataLabel: "Country"
            dataValue: "Germany"
        }
    }


    ListView {
        id: listView
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        height: root.height - 50
        snapMode: ListView.SnapToItem
        clip: true
        model: personalData
        focus: true

        onCurrentIndexChanged: {
            console.log("\nlistView onCurrentIndexChanged  currentIndex=" + currentIndex);
            console.log("\nlistView onCurrentIndexChanged  height=" + height);
            //positionViewAtIndex(currentIndex, ListView.SnapPosition)
        }

        delegate: Rectangle {
            height: 66
            width: 500
            border.color: "grey"
            border.width: 1
            TextInput {
                anchors.centerIn: parent
                text: dataValue
                font.pixelSize: 24
                activeFocusOnTab: true
            }
        }
    }
}

Edited: Put code after ``` (3 backticks) and close with the same - p3c0

[p3c0]

Do you mean by pressing tab it should navigate through each item in ListView ?

[p3c0]

If so then I guess FocusScope:

FocusScope {
    anchors.centerIn: parent
    TextInput {
        text: dataValue
        font.pixelSize: 24
        activeFocusOnTab: true
        onFocusChanged: if(focus) { listView.currentIndex = index }
    }
}

[th.thielemann]

Here is the complete solution:

import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import OskPlugin 1.0

Rectangle {
    id: root
    width: 1024
    height: 633

    ListModel {
        id: personalData
        ListElement { dataLabel: "Firstname";  dataValue: "Herbert"; }
        ListElement { dataLabel: "Lastname"; dataValue: "Roth"; }
        ListElement { dataLabel: "Plays"; dataValue: "Guitar"; }
        ListElement { dataLabel: "Age"; dataValue: "65";}
        ListElement { dataLabel: "Hobby"; dataValue: "Walking"; }
        ListElement { dataLabel: "Birthday"; dataValue: "14.12.1926"; }
        ListElement {  dataLabel: "City";dataValue: "Suhl"; }
        ListElement { dataLabel: "Country"; dataValue: "Germany"; }
    }
   
    ScrollView {
        anchors.fill: parent

        ListView {
            id: listView
            anchors.fill: parent
            clip: true
            model: personalData
            focus: true

            delegate: FocusScope {
                x: rectangle.x;
                y: rectangle.y
                width: rectangle.width;
                height: rectangle.height

                Rectangle {
                    id: rectangle
                    height: 66
                    width: 500
                    border.color: "grey"
                    border.width: 2
                    TextInput {
                        anchors.centerIn: parent
                        text: dataValue
                        font.pixelSize: 24
                        focus: true
                        activeFocusOnTab: true
                        onActiveFocusChanged: if(activeFocus) { listView.currentIndex = index }
                    }
                }
            }
        }
    }
}