Display a dynamically loaded text/photo pad with QML for Android

Question

I’m writing an app using the newly released Qt 5.2 QML for Android. On one of the screens I need to display an article that is loaded from a server and may change after the launch of the application. The article would be basically a block of text with images and some basic formatting (bold, italicized, larger font in section titles, etc). How best to render this content?

The ideal would be to write in html and embed in a WebView, but Webkit is not available for Android. Another option would be to write the article in QML and include using a Loader. But it seems to be complicated by text with formatting and line breaking like that. One last way would be to create a C++ class that exposes an interface to QML and has its own rendering mechanics. So it would be possible to use a QTextDocument and play in a QPainter.

What’s the best way to do that? What are the problems with the shapes I thought?

Answer 1

I found a solution while browsing the documentation. The element Text supports more than just text, it can also display a subset of HTML, including image and all required formatting. An example:

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360
    Text {
        x: 15
        width: parent.width-30
        textFormat: Text.StyledText
        wrapMode: Text.WordWrap
        text: "<h1>Teste</h1>" +
              "Teste de um <b>parágrafo</b> qualquer.<br>" +
              "<img src='qmltest80.png'></img><br>" +
              "Mais <i>texto</i> aqui."
    }
}

Upshot: