I need a way a to adopt property text-indent in my qml code. QML Docs says it's supported, but didn't explain how to use it. I'm trying to run something like that (I tried more variants but failed):
Text{
width: parent.width
wrapMode: Text.WordWrap
textFormat: Text.StyledText
text: "<text-indent='50px'>Hellow world"
}
But it doesn't work. Qml sees text-indent in code (or it just see "<>") and doesn't show it in the text label, but still didn't activate it.
Maybe this is kinda extra but the same question I can ask about all of tags which I can see in the documentation.
you should change your text format to Text.RichText and also use HTML tag and correct CSS style and CSS rules.
Please See textFormat Doc
Text.RichText supports a larger subset of HTML 4, as described on the Supported HTML Subset page
Text{
width: parent.width
wrapMode: Text.WordWrap
textFormat: Text.RichText
text:"<p style=\"text-indent:50px;\">Hello World</p>"
}
The output:
Related
I'm using the custom checkbox that was used as an example in the QT Documentation posted with QtQuick 2.15 with Qt 6.2.1:
CheckBox {
id: control
text: qsTr("CheckBox")
checked: true
indicator: Rectangle {
implicitWidth: 26
implicitHeight: 26
x: control.leftPadding
y: parent.height / 2 - height / 2
radius: 3
border.color: control.down ? "#17a81a" : "#21be2b"
Rectangle {
width: 14
height: 14
x: 6
y: 6
radius: 2
color: control.down ? "#17a81a" : "#21be2b"
visible: control.checked
}
}
contentItem: Text {
text: control.text
font: control.font
opacity: enabled ? 1.0 : 0.3
color: control.down ? "#17a81a" : "#21be2b"
verticalAlignment: Text.AlignVCenter
leftPadding: control.indicator.width + control.spacing
}
}
However, this example does not work. This is what I am seeing:
Checked
Checked and Hovered
Unchecked and Hovered
None
I am wondering if there is any fix to this. I have seen others with the same problem and no solution
This is the same issue as QTBUG-95589: native styles shouldn't be customised. The Customization Reference says:
Note: The macOS and Windows styles are not suitable for customizing. It is instead recommended to always base a customized control on top of a single style that is available on all platforms, e.g Basic Style, Fusion Style, Imagine Style, Material Style, Universal Style. By doing so, you are guaranteed that it will always look the same, regardless of which style the application is run with. For example:
There are two solutions:
Use a different style. I've linked to the run-time style selection documentation because it's the easiest and most common way of selecting a style, but you can also use compile-time style selection if your application only uses one style.
Style the control completely from scratch. Any time you use a type from QtQuick.Templates, no styling is applied, so you don't need to worry about which style is in use.
In Qt 6, the native styles were added, and at the same time a change was made to make the default style (i.e. the style that is used if none is specified) a platform-specific one. So if you don't specify a style on e.g. Windows, you'll get the native Windows style. Unfortunately this causes issues when customising controls, because the native styles are not designed to be customised.
Eventually the goal is to have Qt Creator warn the user when it detects that they are customising a native style.
I'm trying to render a simple TextInput using QML with the following markup:
TextInput {
id: input
text: "some text box that has no easy way to identify"
font {
pointSize: 16
family: "Segoe UI Light"
}
}
What's actually rendering is this:
Notice how there is no way to identify the TextInput without the "default text" I've added. I would have expected something like the following (where there is an underline identifying the TextInput)
Things tried:
Isolated Text Input
Text Input in a Pane
Text Input in a Layout
Not exactly sure why it's not rendering correctly.
Based on #splaytreez's comment. I was incorrectly using TextInput but should have used TextField. Hopefully someone else finds this useful; although, I do feel it's a silly mistake.
I downloaded from Google Fonts two .ttf files on my project folder:
Montserrat-ExtraLight.ttf
Montserrat-Black.ttf
I set propperly the .qrc file in order to contain both of them.
Suppose I have the next .qml file:
import QtQuick 2.7
import QtQuick.Layouts 1.2
import QtQuick.Controls.Universal 2.0
Rectangle{
id: rectangle
height: 500
width: 700
Column{
FontLoader { id: myCustomFont1; source: "../Fonts/Montserrat/Montserrat-ExtraLight.ttf" }
FontLoader { id: myCustomFont2; source: "../Fonts/Montserrat/Montserrat-Black.ttf" }
Text{
...
text: "Qt for python"
font.family: myCustomFont1.name
...
}
Text{
...
text: "Qt for c++"
font.family: myCustomFont2.name
...
}
}
}
The problem is that the myCustomFont1.name and the myCustomFont2.name are the same, namely "Montserrat" and I don't have any solution to make distinction between them.
Therefore even if I specified the correct FontLoader-s id-s, the second text will have the same font.family like the first text.
Could be possible to solve this problem somehow?
This is not an ideal solution, but a workaround that should work. There's an open-source font editor called FontForge that you can use to change the names that Qt reads. Open the font files in question and then open the menu Element->Font Info. That opens a dialog with multiple tabs on the left. The first tab should be PS Names. This should list several fields including Fontname and Family Name. You should be able to edit those to whatever you want. Then close that dialog and use File->Generate Fonts to regenerate the .ttf files.
This is perplexing and a common source of frustration. It turns out that the name property actually specifies the family, which as you've discovered, is the same for these font files.
What distinguishes them is actually the styleName.
Try opening the font file in a font viewer like "Font Book" or "FontForge" to get the exact styleName - you'll need to specify it with a string.
Then specify the additional property:
Text{
...
text: "Qt for python"
font.family: myCustomFont1.name //or myCustomFont2.name, it doesn't matter.
font.styleName: "Extra Light"
...
}
Text{
...
text: "Qt for c++"
font.family: myCustomFont2.name
font.styleName: "Black"
...
}
I've found styleName far more predictable than combinations of weight or style or bold. And that way you can work with fonts that follow the canonical naming conventions rather than hacking their Family Name to suit QML.
I have a QtQuick Label in a QML file like so:
import QtQuick.Controls 1.3 as Controls
Controls.Label {
id: lbl
text: "This is some <b>bold text</b> with extra white space"
}
If the text property of my label contains any HTML, then the label renders it as HTML and the multiple spaces in the original text are compressed down to a single space (if the text contains no HTML then it is rendered as normal text and the spaces are preserved).
QWidget has a setStyleSheet method that apparently supports the style "white-space: pre-wrap" which is what I need to get the HTML rendering to preserve the whitespace, but I'm not sure if I can apply this to a Label in a QML file. Is there any way to achieve this?
Edit: This answer: https://stackoverflow.com/a/2756376/14606 shows setting the styleSheet property for a QLabel. Is there any way to write a function that will let me pass my QtQuick Label and cast it as a QLabel and set the stylesheet in this way?
All you need to know is how to apply css in qml, instead of code (widget.setStyleSheet("...")) ?
Have you tried this?
Controls.Label {
id: lbl;
white-space: pre-wrap;
text: "This is some <b>bold text</b> with extra white space";
}
edit: Since white-space is not a property of Label, you need to set this property for the label text.
If possible (just guessing) use:
Controls.Label.Text {
white-space: pre-wrap;
But if not, use this workaround:
Controls.Label {
id: lbl;
textFormat: Text.RichText;
text: "<style>white-space: pre-wrap;</style>This is some <b>bold text</b> with extra white space";
}
You can actually achieve what I was looking for (a Label that can display HTML while preserving white space) by doing a text replace on your original string and replacing all regular spaces (" ") with (which is a zero-length string followed by a regular string). The Label will then faithfully render consecutive spaces, as if the white-space style had been set to pre-wrap. Unfortunately this only kind of works (for my purposes at least) since the Label does not handle line wrapping the same way in both cases.
SpinBoxStyle from QtQuick.Controls.Styles allows you to change the appearance of a SpinBox, and a part of that is the ability to redesign the up/down arrow buttons. However neither SpinBox nor the style gives you the ability to query the up/down arrow button state, so you can't check if it is pressed or hovered over.
This seems like too much of an oversight, so what part of the API docs have I missed?
I've tried adding a MouseArea to the control delegate itself, but some reason it never receives any events - the controls still work though which suggests that they are 'stealing' the events first.
SpinBox {
style: SpinBoxStyle {
incrementControl: Rectangle {
implicitHeight: 10
implicitWidth: 10
color: "blue"
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: console.log( "Hello" ) // Never printed
}
}
}
}
Apparently you're supposed to use the styleData properties to detect hovered and pressed states, but they aren't documented. Please create a bug report for that.
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
SpinBox {
style: SpinBoxStyle {
incrementControl: Rectangle {
implicitHeight: 10
implicitWidth: 10
color: styleData.upHovered && !styleData.upPressed
? Qt.lighter("blue") : (styleData.upPressed ? Qt.darker("blue") : "blue")
}
}
}
I'm not sure why the style was implemented this way, but if you look further into the source code, you can see that there are always MouseAreas for the up and down controls. This is very confusing to me; if you're not supposed to provide an interactive control because there will always be MouseAreas shadowing them, why call it incrementControl and decrementControl? Names like increment and decrement might suffice, given that they're not able to receive almost any interaction (clicking works at least, for some reason). If you find this a bit confusing, you may also want to file a separate bug report for the API.
git log --follow -p shows that this code hasn't changed much since the introduction of styles, so I'd say the current implementation (and API) is just outdated, and hopefully there are opportunities for improving this in the future.