Build advanced text element, embedding QML elements into text

  • Hello,

    for my app, it would be nice to have an advanced text element which allows to interleave text and QML components. These two screenshots come from the Telegram app ( which apparently uses Qt (I think QWidgets or something entirely custom). However I could not find the particular place in the code where the chat is designed.

    alt text

    As it seems, you can also select text with the mouse, including the emoji (which my system does not display by default, since I don't have a Mac)

    alt text

    The quoted message, in this example, cannot be selected.
    Now, I would like to know whether you can implement such functionality in QML. I am aware that you can visually mimic this by using a WebView and implementing everything in HTML, but this is not a satisfying solution, as I want to include Buttons, MouseAreas or other elements QML has to offer, between words.

    In other words: I would like to have something like a Flow layout, but with the ability to separate Text elements if necessary and to allow user selections (and determine the exact text which is then copied to clipboard).

    Example: Consider a Text element with content "Hello world!", followed by a Rectangle with some certain size, followed by another Text element with content "Hello world".
    Now, assume that these elements are positioned in a container which has just enough width to show the first "Hello world", the rectangle and the "Hello" from the second Text element in a line.
    When using a Flow positioner, the result would look like this:

    Hello World! [rectangle]
    Hello World!

    because it cannot cut a Text element in half. However, I want it to look like this:

    Hello World! [rectanlge] Hello

    Of course, I could just split the wrapped text element into "Hello" and "World!" in this case, but it should work with variable dynamic text and container sizes and there would still no user selection be possible.

    just like a sequence of inline-block elements in HTML.

    I believe this is not possible with built-in QML elements only, so does somebody know an implementation of such a structure or another QML/Qt way of implementing it with the same visual and behavioral result?

    Thanks and best regards,


Log in to reply

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.