How to manage QML ScrollView navigation with respect to child QML TextEdit? - c++

Question

I have a TextEdit inside a Scrollview inside a SplitView. I have a Q_INVOKABLE function that I call when a row in a TableView gets selected to jump to a desired line in the TextEdit, this works fine. However, I need to adjust the ScrollView focus so that it moves when the selection of the TextEdit moves.
Identical behavior to selecting a compiling error on an IDE.
//main.qml
ScrollView {
id: palGenTextScrollView
anchors.fill: parent
TextEdit {
id: mainTextEdit
text: fileio.palFileText
wrapMode: TextEdit.Wrap
selectByMouse: true
}
TableView {
id: errorsTableView
onClicked: {
mainTextEdit.select(palerrorviewmodel.goToLine(errorsTableView.currentRow),
palerrorviewmodel.goToLine(errorsTableView.currentRow))
mainTextEdit.forceActiveFocus()
//Call something to adjust ScrollView here
//palGenTextScrollView. ??
}
I omitted some irrelevant code.

Answer 1

You need to use palGenTextScrollView.flickableItem.contentY to set the position of your text. Here after is a small example working: you have a button for each line of the text, and clicking on it selects the line and centers the text on it. You can work on it for your own issue.
I couldn't manage to have your example working because the palerrorviewmodel element is missing.
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ScrollView {
id: palGenTextScrollView
width: 200
height: 100
TextEdit {
id: mainTextEdit
text: "I have a TextEdit\ninside a Scrollview\ninside a SplitView.\nI have a Q_INVOKABLE\nfunction that I call\nwhen a row in a TableView\ngets selected to jump\nto a desired line\nin the TextEdit,\nthis works fine.\nHowever, I need to adjust\nthe ScrollView focus\nso that it moves\nwhen the selection\nof the TextEdit moves.\nIdentical behavior\nto selecting a compiling\nerror on an IDE."
wrapMode: TextEdit.Wrap
selectByMouse: true
}
}
Row{
spacing: 5
anchors.top: palGenTextScrollView.bottom
anchors.topMargin: 20
Repeater{
model: mainTextEdit.lineCount
delegate: Rectangle{
width: 20
height: 20
color: "blue"
Text{
anchors.centerIn: parent
text: index
}
MouseArea{
anchors.fill: parent
onClicked: {
var lines = mainTextEdit.text.split("\n");
var count=0;
for (var i=0; i<index;i++){
count+=(lines[i].length+1);
}
mainTextEdit.select(count, count+lines[index].length);
mainTextEdit.forceActiveFocus()
var maxY = mainTextEdit.contentHeight-palGenTextScrollView.height
var lineHeight = mainTextEdit.contentHeight/mainTextEdit.lineCount
var centeredY=index*lineHeight-palGenTextScrollView.height/2
if (centeredY < 0){
palGenTextScrollView.flickableItem.contentY=0
}else if (centeredY<=maxY){
palGenTextScrollView.flickableItem.contentY=centeredY
}else{
palGenTextScrollView.flickableItem.contentY=maxY
}
}
}
}
}
}
}