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.
Related
I'm using systemPalette (Qt5.15) in several qml-based applications in Linux, I need one of these applications to change systemPalette of qml system-wide (globally) so that other applications can detect this change at runtime.
what I need is similar to what happens in KDE, for example, I have the following qml code:
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
SystemPalette {
id: palette
colorGroup: SystemPalette.Active
}
Rectangle{
anchors.centerIn: parent
width: 200
height: width
color: palette.base
}
}
when I run the above code in my KDE plasma, if I change the system's theme from breeze to breeze-dark, the rectangle's color will change at runtime, I can even select a custom color in
Appearance->globalTheme->colors.
In my case, regardless of Linux's distro, my application needs to change systemPalette globally and set its custom values for colors, how can I do that? where does qt read those color values from? (for systemPallete)
Thanks.
P.S: I can create my own style/plugin for qt and set different colors in my custom style, but still I have no idea how to change OS style globally so that all applications can detect this at runtime.
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:
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 window with Buttons, TextFields, Labels etc. These all share common properties like font family, color, size etc. What I would like to be able to do is to define a grouping of these properties (called, say, textStyles.MainTitle or textStyles.DescriptiveText etc.) that would include a font family, size and weight, height and color. And then in the QML file I would write something like:
myCustomProperty: textStyles.MainTitle
and this would apply those values to the control. How can I do this?
QML controls are styled by implementing their respective styles, for example for Button you have to implement a ButtonStyle.
As for the actual "grouping" you can just use a QtObject
property QtObject textStyles : QtObject {
property FontLoader mainTitle : FontLoader {...}
....
}
You can also extend styled components as dedicated types:
// StyledText.qml
Text {
font.family: someFont
font.pixelSize: fontSize
color: someColor
font.italic: true
font.letterSpacing: -1
...
}
And then use that by just StyledText {} instead of repeatedly styling regular Text elements.
Where / in what file do I place the QtObject snippet? I don't understand what // StyledText.qml is, or what a FontLoader is.
If you want it to be available in your entire application, you can put it as a property of your root object in main.qml, thanks to dynamic scoping textStyles will resolve from every other file in your project. You can put entire component styles in it as well and share in the project.
StyledText.qml is just an extra qml file you add to your project, you can being with just implementing its body in an existing qml file, then rightclick on Text and select refactoring -> move component into separate file.
A FontLoader is just a regular QML component, you can use it to load specific fonts and use as a font source for text. You don't have to use that, you can use font families from your system fonts as well. The font loader is useful for fonts you bundle with your application.
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.