I want to paint controls directly into TextEdit. It is easy, but the problem is i need to have space for them, so they are not painted over the text.
For example (the whole line is representing what will be shown in TextEdit and the highlighted code should be qml component):
Here is button: button and here is text again.
I need somehow to reserve space for the button between Here is button: and and here is text again.
It looks like Qt qml doesn't provide any way how to specify font metrics (in that case i could ask the component what it's width is and just add
one whitespace char with properly setup font and its metrics and than
specify component coordinates so it is painted exactly where the space is).
I did it in Java SWT, because SWT StyledText allows to setup metrics for each character. So this is example how it should look.
You can use HTML markup in TextEdit
TextEdit {
textFormat: TextEdit.RichText
text: "<font size=50>text</font>"
}
Related
I have a custom tool button where when checked the font become bold. When happens, the size of the text increase and consequently the ToolButton shrink or stretch accordly. How can i pre calculate the correct fixed size for the text inside the button?
You can use FontMetrics QML type for this purpose. Setup the FontMetrics object with the same font and style you are using for your text, then call an appropriate method of your FontMetrics instance like boundingRect or tightBoundingRect and resize your button based on the results.
If you just want to keep your ToolButton to a fixed size that can contain the normal and bold font without auto-resizing, you can just get the size for the bold text using the FontMetrics instance and set the button size accordingly.
For convenience you can also use TextMetrics QML type. The advantage is that the boundingRect and tightBoundingRect are properties and you can bind to them.
The latter is preferred for your use-case.
Using Qt 5.10, Qt Quick2 2.10, Qt Quick Controls 2.3 Button class, I have defined a button that displays an icon and a button that displays text as follows:
Button {
iconSource: "my_button.png"
enabled: sometimes
}
Button {
text: "My Button"
enabled: sometimes
}
I would like the icon button to behave just like the text button below it for user interaction. It should change its appearance appropriately when it is in the click, hover, or disabled state.
Hover and click mode are working, since they only rely on changing the icon background, and not the icon image itself.
Disabled mode is not working. The button displaying text behaves correctly (the text and the border turn gray), but in my icon button, nothing changes when it is disabled.
Details about my icon file:
The RGB values are all black (#000000) corresponding to the color I want my icon drawing to be. The image shape is drawn in the alpha channel. I have tried playing around with the other channels, but I have not had success.
Here is an image from my project. You can see a row of icon buttons on top, and three text buttons below. Although some of the icon buttons are disabled, they all look the same.
I have cleaned up this question. Maybe should not have posted a question the day after St. Patrick's Day :)
The Qt docs for the Button class instruct you to set the iconSource property to define the url for the icon image file. However, this is for QtQuick 1.4.
QtQuick 2.3 does not appear to have documentation yet, though it is the standard for the current Qt 5.10.
The Button (Controls.2/Button.qml) inheritance list is:
QQuickItem
QQuickControl
Templates.2/QQuickAbstractButton
Templates.2/QQuickButton
Button or {Style}/Button
There is no longer any iconSource property in Button. Instead, you access the icon property of QQuickAbstractButton, which is of type QQuickIcon. Using icons in Qt Quick 2 is documented here - Icons in Qt Quick Controls 2 -, along with.. a Button example!
Since the parent classes of Button use prototype inheritance, it seems that the properties of the parents, such as "icon" are available in the Button class as well. You can look in the qml directories in the Qt installation directory to see the class declarations without downloading the whole Qt source code.
So, my new Button code looks like this:
Button {
icon.source: "my_button.qml"
icon.color: enabled ? "#000000" : "888888"
enabled: sometimes
}
Note: I am using the Fusion style, but this does not affect the existence of the icon property, which is inherited from a prototype.
i am trying to accomplish the following behavior with a QML TextArea:
I want single Words in the Text to be colored differently
I want the "select"-functions to be working for automated scrolling (user interaction is disabled)
There is a stream of text in the TextArea where one Word needs to be selected(highlighted). The user is requested to input some text elsewhere and press enter to proceed (not part of the question). After that the selection jumps to the next word and the last selected word is either colored green or red. There is only a small portion of the text visible (a few lines, managed by the TextArea height – not part of the question) and i need the text to scroll if the next word is out of that visible range .. therefore the selection is quite helpful because all interaction from the user – to scroll or select or whatever – is disabled (disabling is not part of the question)
my main problem is: if i use textFormat: TextEdit.RichText i can easily color the text how i like it to be (<font color=\"green\">{}</font>) but i cannot use the "select"-functions anymore because – as i would guess – the selection works on the "plaintext" and cannot correspond to the "richtext"-selection? Anyway selectWord() etc. does not work QTextCursor::setPosition: Position '-1' out of range is the result. But if i disable the RichText i don't know how to color the text. Maybe i could live without the selection if i could detect the current word – which would be colored blue etc. – and scroll if its out of the visible area to "fake" the selection behavior, but that's just a third option.
I would really either know how to color non-Rich Text or how to select Rich Text in a TextArea.
You can use QSyntaxHighlighter to highlight the words independent of the selection. See QQuickTextDocument and How to implement rich text logic on QML TextEdit with QSyntaxHighlighter class in Qt for more details.
For example, we have a QLabel with MaximumWidth set to 400.
When we try to display some text with pixel width more than 400, it's shown cut off.
Is there any way to make QLabel display this string in multiple lines without using QFontMetrics or the like?
If I understood your question correctly, you should use the setWordWrap function for your label, with true as its parameter.
QLabel lbl("long long string");
lbl.setWordWrap(true);
In order to show multiple lines in QLabel, right click on QLabel and select 'change rich text'. This brings up dialog where you can type the text as you want to see including enter key. Setting the word wrap is not required for this.
If you set the word wrap as well (in QLabel properties) than it will wrap each individual line in the Qlabel if it was longer than the real estate.
As another option to wrap text using Qt Designer, you can check the box under Property Editor for a QLabel:
How do I set line height in QLabel when in WordWrap mode?
Use HTML text:
QString template = "<p style=\"line-height:%1%\">%2<p>";
QString targetText = template.arg(myPercentage).arg(myTex);
QLabel *l = new QLabel(targetText, this);
where myPercentage is like 60 - 80.
You will get condensed lines in the WordWrap mode
There is no line spacing property in QLabel. You can change the widget font, which will change the line's height, but I suspect that is not what you want.
Line height is computed from the QFont of the widget and can be obtained by the QFontMetrics associated with the widget. Using this information, you may create your own widget that has a line spacing property (and a text wrap mode), but that represents a lot of low-level work.
You can also edit the HTML of the QLabel directly in Qt Designer.
Select the label in Qt Designer.
In the Property Editor, under the QLabel section, select the text property and press the ... button.
Select the "source" tab and edit the HTML from there.
Here are two examples that control the line spacing of a QLabel using HTML (tested in Qt 5.7). I am sure there are many more (and some better) ways to write the HTML, but this should be a good start.
Example 1
<html><head/><body>
<p style="line-height:120"><span>
This is the first line of the label.<br>
This is the second line.<br>
This is the third and final line.
</span></p>
</body></html>
This example is neater if the line spacing is the same for the whole paragraph.
Example 2
<html><head/><body>
<p style="line-height:20"><span>This is the first line of the label.</span></p>
<p style="line-height:20"><span>This is the second line.</span></p>
<p style="line-height:100"><span>This is the third and final line.</span></p>
</body></html>
This example allows you to control the spacing of each line individually. I had to make the height of the last line 100 to prevent Qt from cutting it in half. I assume it affects how Qt calculates the height of the label as a widget.