ScrollView automatically scroll to focus child component QML - qt

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

Answer 1

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