ScrollView automatically scroll to focus child component QML

Question

This is a follow up of another question i had, that can be find on this post

When tab to another component position the correspondent scroll in QML

What i want to do is, as i tab on different components i want the scroll to automatically scroll to that same component so that the following happens:

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

The problem here is that i'm using QtQuick.Controls 1.4 for load of component ScrollView so with that example i get the error: Error: Cannot assign to non-existent property "contentY" with import QtQuick.Controls 2.2it works well.

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

import QtQuick 2.9
import QtQuick.Controls 1.4
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4

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 {
            id:scrollView
            anchors.fill:parent
            style: ScrollViewStyle{
                handle: Rectangle {
                    implicitWidth: 30
                    color:  "black"
                }
                scrollToClickedPosition: true
                transientScrollBars:true
            }
            function scrollToY(y) {
                scrollView.contentItem.contentY = y;
            }
            Column{
                width:parent.width
                spacing:10
                TextField {
                    id:textField
                    implicitHeight: 30
                    font.bold: true
                    onFocusChanged: if(focus) { scrollView.scrollToY(y); }
                }
                ComboBox {
                    id:comboBox
                    anchors.topMargin: 10
                    textRole: "text"
                    model: libraryModel
                    onFocusChanged: if(focus) { scrollView.scrollToY(y); }
                }
                TextField {
                    id:textField2
                    anchors.topMargin: 10
                    implicitHeight: 30
                    font.bold: true
                    onFocusChanged: if(focus) { scrollView.scrollToY(y); }
                }
                ComboBox {
                    id:comboBox2
                    anchors.topMargin: 10
                    textRole: "text"
                    model: libraryModel
                    onFocusChanged: if(focus) { scrollView.scrollToY(y); }
                }
                TextField {
                    id:textField3
                    anchors.topMargin: 10
                    implicitHeight: 30
                    font.bold: true
                    onFocusChanged: if(focus) { scrollView.scrollToY(y); }
                }
                ComboBox {
                    id:comboBox3
                    anchors.topMargin: 10
                    textRole: "text"
                    model: libraryModel
                    onFocusChanged: if(focus) { scrollView.scrollToY(y); }
                }
                TextField {
                    id:textField4
                    anchors.topMargin: 10
                    implicitHeight: 30
                    font.bold: true
                    onFocusChanged: if(focus) { scrollView.scrollToY(y); }
                }
                ComboBox {
                    id:comboBox4
                    anchors.topMargin: 10
                    textRole: "text"
                    model: libraryModel
                    onFocusChanged: if(focus) { scrollView.scrollToY(y); }
                }
            }

        }
    }
}

ymoreau ymoreau · Accepted Answer · 2018-12-06T12:41:45

I edited my answer https://stackoverflow.com/a/53650089/6165833

For QtQuick.Controls 1.4 the ScrollView behaves in a different way and you access the Flickable through ScrollView.flickableItem (which is now read-only for QtQuick.Controls 2.2).

So you can still do the trick by using flickableItem instead of contentItem.

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

// 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); }
}

ScrollView automatically scroll to focus child component QML

1 Answers