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");
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 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?
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 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
}
}
}
Let's consider this code snippet:
ApplicationWindow
{
/**/
states: State {}
/**/
}
When running the application, I get
Cannot assign to non-existent property "states"
When using
ApplicationWindow
{
/**/
Item { states: State {} }
/**/
}
There is no error. Why can't I use states inside an ApplicationWindow?
I've just realized that ApplicationWindow inherits Window inherits QQuickWindow. Only types which inherit from Item have the states property.
The workaround is to use StateGroup.
Feel free to add a better solution ;)
I was able to code States within an QML ApplicationWindow using Qt v5.11, with two caveats. One was that the Qt Creator v4.6.1 editor flagged SignalTransition with a warning indicating a State cannot have a child item. Despite that warning, the code from the example at http://doc.qt.io/qt-5/qmlstatemachine.html#a-simple-state-machine builds and runs correctly. The second caveat was that the Qt Creator editor ignored the major.minor version of import QtQml.StateMachine. Any numbers I typed in instead of 1.11 were accepted:
import QtQuick 2.11
import QtQuick.Controls 1.4
import QtQml.StateMachine 1.11
ApplicationWindow {
...