Nominate our 2022 Qt Champions!

[Solved] How to scroll flickable smooth from code

  • I working in QtQuick 1.1 and I have a textbox with a lot of text inside a flickable. I also have a button. When I press the button I want to scroll the content. I have solved that by changing contentY position in the flickable. That works but is a bit "chunky". Is there some easy way to do this smoother?

    My experimental code:

    import QtQuick 1.1

    Rectangle {
    id: rectangle2
    width: 360
    height: 160

    MouseArea {
        x: 102
        width: 60
        height: 50
        anchors.left: parent.left
        anchors.leftMargin: 236
        anchors.topMargin: 44
            flickable1.contentY += flickable1.height * 0.8;
            if(flickable1.contentY > flickable1.contentHeight - flickable1.height )
                flickable1.contentY = flickable1.contentHeight - flickable1.height;
        Rectangle {
            id: rectangle1
            color: "#d30303"
            anchors.fill: parent
            Text {
                id: text1
                color: "#ffffff"
                text: qsTr("Scroll")
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.pixelSize: 12
    Flickable {
        id: flickable1
        x: 0
        y: 0
        width: 123
        height: 136
        flickableDirection: Flickable.VerticalFlick
        clip: true
        contentWidth: text2.width
        contentHeight: text2.height
        Text {
            id: text2
            text: qsTr("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu mauris a quam rhoncus tincidunt sed sed massa. Fusce tristique gravida justo mattis accumsan. Mauris ultrices ante ante. Sed venenatis feugiat velit ut commodo. Duis iaculis aliquam nibh vitae mollis. Donec tempus odio quis orci pulvinar accumsan. Integer tempor metus ac magna tempor ultricies. Fusce malesuada erat a ullamcorper scelerisque. Praesent elit lorem, tempus non aliquam laoreet, scelerisque ut nisi. Duis elit ante, imperdiet lobortis vulputate nec, iaculis vel nunc. Suspendisse potenti. Sed pharetra odio ut mauris iaculis eleifend")
            anchors.fill: parent
            width: 123
            height: 500
            wrapMode: Text.WordWrap
            font.pixelSize: 12



  • Hello

    if you say smoother you mean with a transition? So simply use a transition to change the y position of the content.

  • You are right. I solved it by using a PropertyAnimation. A bit clumsy, but it works and is good enough for me :-)

Log in to reply