How to provide QTextFrame or QTextBlock background image in QTextEdit?

Question

I am developing an instant messaging tool, so I need to develop a BubbleChatWidget for which all message elements have a bubble-like background image. I thought I could achieve my goal with QTextEidt , but I don't know how to do it. Set the QTextFrame or QTextBlock background image.

So my question is how to give a QTextFrame or QTextBlock background image in QTextEdit ? If QTextEdit cannot satisfy my requirements, how to achieve my goal with other Qt techniques ?

BubbleChatWidget may contain clickable texts or pictures. And you cannot forget the fact that BubbleChatWidget can contain thousands of elements.

The image below shows what I want.

Answer 1

To do this, you need to change the source code of Qt.

I did it last year.

You can set the background image (bubble image) for the frame.

If you are using Qt 4.8.6, find qtextdocumentlayout.cpp on line 402:

By default, fill fillBackground is implemented

  p->fillRect(rect, brush); 

Instead, you can change the qDrawBorderPixmap to draw a bubble background.

Answer 2

Qt style sheets are ideal for achieving what you want.

The solution is to use a border image. Fortunately, you can do this using the stylesheets and the QTextEdit style.

About QTextBlock or QTextFrame : QTextEdit is a widget that displays a QTextDocument that can contain a QTextBlock and a QTextFrame . Frames and blocks are text containers that provide the structure of text in a document, but they are not displayed as separate widgets. For this reason, they cannot be developed independently of each other. I recommend using QTextEdit or another widget for each message and properly managing the subsequent increase in memory usage.

I will show how to style text editing.

First make a clean image of the desired border. Using a small photoshop, I prepared my own image (not as clean as it should be for a production application):

Allows style objects of the QTextEdit class and its subclasses.

 QTextEdit { background-color: #eaedf2; /* Same gray in your background center */ border-image: url(":/images/bkg.png"); /* The border image */ border-top-width: 11px; border-right-width: 4px; border-bottom-width: 4px; border-left-width: 11px; } 

Installing the previous stylesheet in the text edit container will turn all of them into this

Something similar to your desired look. Of course, you should prepare a good image of the border and better adjust the size of the border, but I think this can help.

If you want to use different styles for incoming and outgoing messages, you will have to correctly distinguish them and select them in the stylesheet. Check this out for reference.

Answer 3

You can use QBalloonTip , which is an inner class defined in

 QtDir/5.*/Src/qtbase/src/widgets/util/qsystemtrayicon_p.h 

QBalloonTip inherits QWidget and is implemented in qsystemtrayicon.cpp in the same directory. It has the following method to show the tip of a cylinder:

 void QBalloonTip::balloon(const QPoint& pos, int msecs, bool showArrow) 

You can modify the source code of this class to have the desired ball tip.

Answer 4

If you are interested in an open source project that implements the same thing (I call it Bubble Chat ), you can search Telegram and Cutegram Desktop on Github .

Both of them are Telegram clients or its version implemented by Qt / Qml .

I think Cutegram is better.

Hope this tip helps you.