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 {
    id:main
    width:300; height:300

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

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

             TextEdit{
                  id: helpText
                   wrapMode: TextEdit.Wrap
                   width:helpScreen.width;
                   readOnly:true

                   text:  "Text goes here"
            }
        }
    }
}
Hope this helps.

7 comments:

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

    ReplyDelete
  2. It is a useful code. Thanks

    ReplyDelete
  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 ...

    ReplyDelete
  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. : )

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

      Delete