[SOLVED] Scroll ListView to Item on Tab Navigation



  • 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.



  • Hello,

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

    cheers
    Manfred


  • Moderators

    @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
    


  • 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


  • Moderators

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


  • Moderators

    If so then I guess FocusScope:

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


  • 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 }
                        }
                    }
                }
            }
        }
    }

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.