Friday, April 22, 2011

Creating scrollable large text with QML

Recently I wanted to show large text of help in my QML application. I used TextEdit QML element to show large text but it dose not support scrolling by default. We need to add it to Flickable element to support scrolling of text. We can add other QML element as well to Flickable to add scrolling support to those element.

Following is my code, My code dose not shows scrollbar, There are some QML example from Qt which shows how to add scrollbar to Flickable element.
Rectangle {
    width:300; height:300

    Rectangle {
        width:main.width; height:main.height

        Flickable {
            id: flickArea
             anchors.fill: parent
             contentWidth: helpText.width; contentHeight: helpText.height
             flickableDirection: Flickable.VerticalFlick
             clip: true

                  id: helpText
                   wrapMode: TextEdit.Wrap

                   text:  "Text goes here"
Hope this helps.


  1. Worked as described. Useful to implement flickable for text too

  2. It is a useful code. Thanks

  3. this doesn't really scroll the text just flicks it vertically, u will be limited by how much u can flick so on a touch screen as soon as u lift your finger ...

  4. Thanks a lot man!

    I'm a Qt developer with more than 4 years of experience, but relatively new to (and somewhat uncomfortable with) QML.

    I was trying to implement a "Flickable" element but could not contain it in the parent rectangle... and this was driving me super crazy.

    I was looking all over the web (and examples in Qt Creator) for any code related to "Flickable" which would help me achieve what I wanted.
    And thank God! that I saw your code...
    "clip: true" (which is a stupid property of "Item")
    ...and Viola! it is done. (Yay!) Working exactly as I wanted it to.

    Thanks a million for sharing this info with all of us.
    And yes! the blog is simple and very beautiful. : )

    1. : ) Thanks for comment, I am glad that it helped you

  5. Thanks a lot ... exactly what I was working on now and couldn't get it to work ... you saved me!