[SOLVED]Scrolling through ScrollView with keys

[TristanV]

Hi,

I am trying to create a scroll area which I can scroll up and down through using arrow keys. I have been able to scroll using the mouse, but not the keyboard. Any help would be appreciated.

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.2
import custom.sdk 1.0
 
Window {
    width: 1280
    height: 720
    visible: true
 
    Rectangle{
       anchors.fill: parent
       color: "#021d3a"
       ScrollView{
           x: 100
           y: 100
           width: 1080
           height:600
           focus:true
           contentItem: Text{
               width:1000
               wrapMode: Text.WordWrap
               color: "white"
               font.family:"LatoRegular"
               font.pointSize: 20
               text:"Test\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\n"
           }
       }
    }
}

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.2
import custom.sdk 1.0

Window {
    width: 1280
    height: 720
    visible: true

    Rectangle{
       anchors.fill: parent
       color: "#021d3a"
       ScrollView{
           x: 100
           y: 100
           width: 1080
           height:600
           focus:true
           contentItem: Text{
               width:1000
               wrapMode: Text.WordWrap
               color: "white"
               font.family:"LatoRegular"
               font.pointSize: 20
               text:"Test\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\nTest\n"
           }
       }
    }
}

To copy to clipboard, switch view to plain text mode 

[TristanV]

After more digging, I found that Flickable was the way to go.

Flickable {
        id: testFlick
        boundsBehavior: Flickable.StopAtBounds
        clip:true
        x:100
        y:100
        width:200
        height:200
        contentWidth: 500
        contentHeight: textBox.paintedHeight
        focus:true
        Keys.onPressed: {
            console.log("keypress registered")
            if(event.key == Qt.Key_Down){
                testFlick.flick(0,-500);
            }
            else if(event.key == Qt.Key_Up){
                testFlick.flick(0,500);
            }
        }
 
        Text{
            id: textBox
            font.pointSize: 20
            text: "test\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\n";
        }
    }
    Rectangle{
        id: scrollbarBackground
        anchors.right: testFlick.right
        z: 1
        width:10
        y: testFlick.y
        height: testFlick.height
        color: "brown"
    }
 
    Rectangle {
        id: scrollbar
        anchors.right: testFlick.right
        y:testFlick.visibleArea.yPosition * testFlick.height + testFlick.y
        z: 2
        width: 10
        height: testFlick.visibleArea.heightRatio * testFlick.height
        color: "black"
    }

Flickable {
        id: testFlick
        boundsBehavior: Flickable.StopAtBounds
        clip:true
        x:100
        y:100
        width:200
        height:200
        contentWidth: 500
        contentHeight: textBox.paintedHeight
        focus:true
        Keys.onPressed: {
            console.log("keypress registered")
            if(event.key == Qt.Key_Down){
                testFlick.flick(0,-500);
            }
            else if(event.key == Qt.Key_Up){
                testFlick.flick(0,500);
            }
        }

        Text{
            id: textBox
            font.pointSize: 20
            text: "test\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\n";
        }
    }
    Rectangle{
        id: scrollbarBackground
        anchors.right: testFlick.right
        z: 1
        width:10
        y: testFlick.y
        height: testFlick.height
        color: "brown"
    }

    Rectangle {
        id: scrollbar
        anchors.right: testFlick.right
        y:testFlick.visibleArea.yPosition * testFlick.height + testFlick.y
        z: 2
        width: 10
        height: testFlick.visibleArea.heightRatio * testFlick.height
        color: "black"
    }

To copy to clipboard, switch view to plain text mode