When tab to another component position the correspondent scroll in QML

Question

What i want to do is if i do a tab from a TextField to another component (a ComboBox wtv) i want the scroll to adjust to that.

When i think this is really important is when i do consecutive tabs i go to a control that is below what is being show by the scrollView.

An example is, lets suppose im here

now i do 2 tabs and i go to

here it should adjust the scroll to show at least that TextField complete. Like this

I provide now a minimalistic code to show the same as the images:

import QtQuick 2.9
import QtQuick.Controls 2.2

ApplicationWindow {
    id: window
    title: "Stack"
    visible: true
    height: 200
    width: 400
    ListModel {
        id: libraryModel
        ListElement {
            text: "A Masterpiece"
        }
        ListElement {
            text: "Brilliance"
        }
        ListElement {
            text: "Outstanding"
        }
    }

    Item {
        id: page
        anchors.fill: parent
        width:parent.width
        height: parent.height
        ScrollView {
            anchors.fill:parent
            width:parent.width
            height: parent.height
            Column{
                width:parent.width
                spacing:10
                TextField {
                    id:textField
                    implicitHeight: 30
                    font.bold: true
                }
                ComboBox {
                    id:comboBox
                    anchors.topMargin: 10
                    textRole: "text"
                    model: libraryModel
                }
                TextField {
                    id:textField2
                    anchors.topMargin: 10
                    implicitHeight: 30
                    font.bold: true
                }
                ComboBox {
                    id:comboBox2
                    anchors.topMargin: 10
                    textRole: "text"
                    model: libraryModel
                }
                TextField {
                    id:textField3
                    anchors.topMargin: 10
                    implicitHeight: 30
                    font.bold: true
                }
                ComboBox {
                    id:comboBox3
                    anchors.topMargin: 10
                    textRole: "text"
                    model: libraryModel
                }
                TextField {
                    id:textField4
                    anchors.topMargin: 10
                    implicitHeight: 30
                    font.bold: true
                }
                ComboBox {
                    id:comboBox4
                    anchors.topMargin: 10
                    textRole: "text"
                    model: libraryModel
                }
            }
        }
    }
}

Here is a solution based on ListView, but your ScrollView with a column I don't know how to apply the idea. — ymoreau

ymoreau ymoreau · Accepted Answer · 2018-12-06T11:10:01

The only way I see is to manually scroll to the item that gets the focus.

You can add this function into your ScrollView (with id: scrollView)

// For QtQuick.Controls 2.2
function scrollToY(y) {
    scrollView.contentItem.contentY = y;
}

// For QtQuick.Controls 1.4
function scrollToY(y) {
    scrollView.flickableItem.contentY = y;
}

And then you need to call that in every item when they get the focus :

TextField {
    id:textField3
    anchors.topMargin: 10
    implicitHeight: 30
    font.bold: true
    onFocusChanged: if(focus) { scrollView.scrollToY(y); }
}

By passing the y of your element, you will scroll the viewport to the top of your element. For a different behaviour you will need to compute from y whatever y position you need.

When tab to another component position the correspondent scroll in QML

1 Answers