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.

Scrolling in custom widget using QScrollArea in Qt

I remembered when I was creating custom view in S60 and I required to implement scrolling. I needed to create my own logic for scrolling using windowing and drawing component manually when comes in to visible area.

Now I am doing similar thing using Qt and and can't believe that solution can be so simple. Qt has class named QScrollArea which main purpose it to support scrolling for such custom view.

Following is code from my application. In this code I want to make certain part of my view to be scrollable and certain part to be remain static.

The part where I want scrolling, for that part I am creating widget with layout and adding all its child widget in layout and then adding that widget to QScrollArea.

QWidget* SampleUI::createMessageWidget()
{
    QLable  label= new QLabel("");
    label->setAlignment(Qt::AlignLeft);
    label->setWordWrap( true );

    ignoreBtn = new QPushButton("Ignore Message");
    ignoreBtn->setEnabled( false );
    QObject::connect(ignoreBtn,SIGNAL(clicked()),SLOT(ignoreMessage()));

    QWidget* messageWidget = new QWidget;
    QVBoxLayout* mainLayout = new QVBoxLayout( messageWidget);
    mainLayout->addWidget( label );
    mainLayout->addWidget( ignoreBtn);

    QScrollArea* scrollArea = new QScrollArea(this);
    scrollArea->setWidgetResizable(true);
    scrollArea->setWidget(messageWidget);
    return scrollArea;
}

Now I am adding this scrollable widget and static widget in custom view's layout.

void SampleUI::SampleUI(QWidget *parent) :QWidget(parent)
{
    QWidget* messageWidget = createMessageWidget();
    QLabel status = new QLabel("");
    status->setAlignment(Qt::AlignRight);

    QVBoxLayout* mainLayout = new QVBoxLayout(this);
    mainLayout->addWidget(messageWidget);
    mainLayout->addWidget( mStatus );
}