I made a new QML project which auto-generated a main.cpp. I added an icon to the qml.qrc which now looks like this:
<RCC>
<qresource prefix="/">
<file>main.qml</file>
<file>bookmark.png</file>
</qresource>
</RCC>
I then add a button and set the icon. The QML Designer doesn't seem to have a field for that, so I have to do it via code. Also I don't want any text on the button:
import QtQuick 2.12
import QtQuick.Controls 2.5
ApplicationWindow {
width: 640
height: 480
visible: true
title: qsTr("Scroll")
Button {
id: button
x: 301
y: 159
icon.source: "qrc:/bookmark.png"
}
}
I compile and run to end up with this window which is what I wanted:
However, the QML Designer shows me this:
As you can see the icon is missing. When designing a more complicated GUI that is heavy on icon-only buttons you end up with a bunch of empty squares that make it very difficult to see what you are doing. In my desperation I tried to set the icon as the background image:
Button {
id: button
x: 301
y: 159
icon.source: "qrc:/bookmark.png"
background: Image {
id: name
source: "qrc:/bookmark.png"
}
}
When I run this I get a button with both the icon and the background image overlapping which makes sense. When I look at it in the QML Designer it stil shows me an empty button.
I can add images just fine, drag+drop of the bookmark.png asset causes an Image element (also loading qrc:/bookmark.png) to be added that is visible in both the application and QML Designer, so QML Designer is generally capable of looking into resource files and displaying images.
I'm using Qt Creator/QML Designer plugin 4.14.2.
Is there any workaround to make QML Designer show icons?
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 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 want to set the Style for my elements in qml. For that, I want to use a style like Material Style. Using the example which can be found under:
https://doc.qt.io/qt-5/qtquickcontrols2-material.html
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12
ApplicationWindow {
visible: true
Material.theme: Material.Dark
Material.accent: Material.Purple
Column {
anchors.centerIn: parent
RadioButton { text: qsTr("Small") }
RadioButton { text: qsTr("Medium"); checked: true }
RadioButton { text: qsTr("Large") }
}
}
Gives me the result seen in the image I attached.
No matter which Style I use, nothing changes.
I am currently using the newest free Qt version under a Windows 10 Os.
Can anyone help me?
And is it possible to globally overwrite a Style and make an own Style, simply in QML.
As the docs points out:
To run an application with the Material style, see Using Styles in Qt Quick Controls.
There are several ways to set the style in Qt Quick Controls 2:
Using QQuickStyle in C++:
add QT += quickcontrols2 in your .pro and use #include <QQuickStyle> and QQuickStyle::setStyle("Material"); in main.cpp
Command line argument:
You can run from the console/CMD by adding the argument: ./your_executable -style material.
If you use Qt Creator you can go to Projects-> Build & Run-> Run and in Command line arguments add: -style material.
Environment variable:
You can run from the console/CMD: QT_QUICK_CONTROLS_STYLE=material ./your_executable
If you are using Qt Creator you can add it in the section Projects-> Build & Run-> Run-> Run Environment.
or add qputenv("QT_QUICK_CONTROLS_STYLE", "material"); in main.cpp.
Configuration file:
The qtquickcontrols2.conf file must be created:
[Controls]
Style=Material
and must be in a qresource:
<RCC>
<qresource prefix="/">
<file>main.qml</file>
<file>qtquickcontrols2.conf</file>
</qresource>
</RCC>
You have to set the style from C++ as well. See this Qt documentation.
So in you main add QQuickStyle::setStyle("Material");
I start on Qt Quick and I want to develop an application that will be deployed on an embedded system. I'm using Qt Quick Controls 2. I'm trying to create two toolbars in my header: a toolbar consisting of icons (battery level, network connection, ...) and a toolbar allowing to navigate in a StackView (as in the example Gallery provided by Qt). I would like to have two different background colors for each toolbarenter image description here. For now I have a header that have a toolbar and do the levels get organized with a ColumnLayout and two RowLayout.
How could I go about it?
You can use the Material.primary attached property to specify the Material style ToolBar color. For example:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Controls.Material 2.0
ApplicationWindow {
header: Column {
ToolBar {
Material.primary: Material.Red
}
ToolBar {
Material.primary: Material.Blue
}
}
}
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.