Make a line break in a layout or container

EL-jos

Hello, everyone,

I have a problem with my QHBoxLayout and QLabel;
here's my problem: I have a widget that uses the QHBoxLayout layout and in this layout I want to put a QLabel containing text, so I want every time the size of a line of text touches the border of my Widget, that it has a line return for the following lines and so on.

Note: in HTML and CSS, we use the property:
p{

word-wrap: break-word;
}

here's an image to be a little clearer:

Please tell me how can I do it in my QHBoxLayout?

dheerendra

Did you try to use the setWordWrap(..) function ?

mrjj

Hi
Just as a note.
QLabel seems to wordwrap at \n and will not break a line in other places like
QTextEdit ->QTextOption::WrapMode. with
QTextOption::WrapAtWordBoundaryOrAnywhere

so i not sure it will help here as it seems to be URLS and they are contain no line breaks to break on

i had a looked at QLabel source but its all hidden away in private classes so
it does not seem possible to change the used QTextOption in any easy way.

So one option is to use PlainTextWidget in readOnly mode
and let it word break the URLS.
However, if you use QLabels ability to click on links (setOpenExternalLinks(true);)
you might need to respond to clicks on TextEdit and call QDesktopServices::openUrl()
I did not test if TextEdit also can do that but its unlikely it will in readonly mode.

Can you tell a bit about what you use the QLabels for, besides showing the URL ?

EL-jos

in fact my widget will be used to post the message of each client or the message is in a QLabel, here is an example with whatsap:

mrjj

@EL-jos
Oh, so its not URLS at all.
Do you need rich text stuff like bold, and images too ?
or JUST text ?

EL-jos

@mrjj said in Make a line break in a layout or container:

Oh, so its not URLS at all.
Do you need rich text stuff like bold, and images too ?
or JUST text ?

Yes, I want the rich text and images because I have to create an emoji system (smile)

mrjj

@EL-jos
Ok, so QTextEdit could be used as it support all. including word wrap at random positions.
But QLabel also do when there are spaces in the text as there should be with chat text.

EL-jos

@mrjj said in Make a line break in a layout or container:

Ok, so QTextEdit could be used as it support all. including word wrap at random positions.
But QLabel also do when there are spaces in the text as there should be with chat text.

Thank you for the answer but how do I get the images?

Note: so insert the images for example in the text during a conversation as shown in the image above?

SGaist

Hi,

Since it's going to be a chat like visualisation, you might want to consider using Qt's model view framework. Otherwise you might going to instantiate lots of widgets and finally hit a performance hit. A custom QStyledItemDelegate will likely give you the best result.

mrjj

@EL-jos
Hi
You can insert images via the supported subset of html.
Oh, SGaist beat me to it. It will fast become slow, however if u have long
conversations.

EL-jos

@SGaist said in Make a line break in a layout or container:

Since it's going to be a chat like visualisation, you might want to consider using Qt's model view framework. Otherwise you might going to instantiate lots of widgets and finally hit a performance hit. A custom QStyledItemDelegate will likely give you the best result.

Hi sorry I don't know how it works the QStyledItemDelegate

EL-jos

@mrjj said in Make a line break in a layout or container:

Hi
You can insert images via the supported subset of html.
Oh, SGaist beat me to it. It will fast become slow, however if u have long
conversations.

Thank you for the answer,
can you give me an example so I can do a simple simulation?

SGaist

Are you already familiar with Qt's model view programming ?

EL-jos

@mrjj said in Make a line break in a layout or container:

You mean test of Qlabels ?

no the test with a QTextEdit and an HTML subset to display an image as in the conversation given as an example above

EL-jos

@SGaist said in Make a line break in a layout or container:

Are you already familiar with Qt's model view programming ?

not just the basics too much

SGaist

Then you should also take a look at @VRonin and @kshegunov's chat example project.

[VRonin edited to proper attribute credit]

EL-jos

@SGaist said in Make a line break in a layout or container:

Then you should also take a look at @VRonin's chat example project.

All right, I'll take a look later, since @mrjj is offering me a rather simple solution.

mrjj

@EL-jos
sorry but its not a good solution for a chat app :)
Delegate would be much better. I was too quick to suggest QLabel/TextEdit.
It will not scroll nice, very fast.

Anyway, you can have images in Qlabel
alt text

 label->setText("<html><head/><body><p>thi is the text that says heeelo hello</p><p><img src=\":/test.jpg\"/>and more hello</p></body></html>");

Notice the syntax for the image
":/test.jpg"
its in a resource file.

There is an editor if you right click the QLabel on the form.
alt text

EL-jos

Okay, thank you very much for your example.
but why do you say a Delegate is much better?
what are the advantages of the Delegate?
and what are the disadvantages of rich text with HTML image?

mrjj

@EL-jos
A Delegate is a custem draw for a ListView ( or any view)
So instead of drawing the normal cell, you make a small class where you use
QPainter to draw the cell how you want it.
Its much faster than having a tons of QLabels in a layout as
Views has been optimized for having many items.

so the clear benefit is that it works very fast and it can draw however you like.
(well you have to program that part)

Using html , you would have to construct the right html to have it look how u want.
Some thing be much harder. Like the clock/time in the whatapps sample.

With Delegate you can simply paint it there.

However, learning to use Views and Delegates will take some practice.