Env:
Qt 5.13 + Mingw32 + Windows 10 64bit
or
Qt 5.11 + Mingw32 + Windows 10 64bit
Demo code:
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Item {
id: name
anchors.fill: parent
focus: true
Keys.onReleased: console.log("onReleased")
}
}
Problem: QML Keys.onReleased fire when pressing key(Any Key)
From running your example I assume your problem occurs after holding the Key.
To prevent that you can simply check the isAutoRepeat attribute when you catch the KeyEvent:
Keys.onReleased: if (!event.isAutoRepeat) console.log("onReleased")
You can check isAutoRepeat from event
Item {
id: name
anchors.fill: parent
focus: true
Keys.onReleased: {
if (!event.isAutoRepeat)
console.log("released")
else
console.log("repeated like in a text field")
}
}
Related
I'm using QML + Python to create a multi-platform application. Facing a challenge with handling System Dark Mode (not sure if it applies to Windows, but I'm currently using a Mac).
For now I do set Dark / Light mode manually, using property. Is there any way I can detect user's mode and set this value to my property? Or are there any other possible solutions?
import QtCore
import QtQuick
import QtQuick.Controls
import QtQuick.Dialogs
ApplicationWindow {
width: 640
height: 480
visible: true
property bool darkMode: false
Text {
id: textField
color: {
switch (darkMode) {
case true:
"white";
break;
case false:
"black";
break;
}
}
}
}
I'm new to QML and I am trying to highlight an image on mouse hoover. I have a row of movie images, like this:
Here is my code for image number 4 (tarzan):
Rectangle{
id:rect4
width: parent.width/5-row.spacing/5
height:parent.height
color:'transparent'
Image{
id: tarzan
fillMode: Image.PreserveAspectFit
anchors.fill: parent
source:'qrc:tarzan.jpg'
MouseArea{
id:area
width:parent.width
height: parent.height
hoverEnabled: true
anchors.fill:parent
onClicked:tarzan.forceActiveFocus()
}
I tried different ways, but nothing happens. Any ideas? Help would be appreciated.
There are 2 ways to do this if you are using the qt quick version 2.15
import QtQuick 2.15
you can use the HoverHandler object something like this
Image{
id: tarzan
fillMode: Image.PreserveAspectFit
anchors.fill: parent
source:'qrc:tarzan.jpg'
HoverHandler{
onHoveredChanged: {
if(hovered){
tarzan.scale = 1.2
}
else{
tarzan.scale = 1
}
}
}
if you are using qtquick anything below 2.15 then your mousearea object should look something like this
Then it would be something like this the mouse area code
MouseArea{
id:area
width:parent.width
height: parent.height
hoverEnabled: true
anchors.fill:parent
onContainsMouseChanged: {
if(containsMouse){
tarzan.scale = 1.2
}
else{
tarzan.scale = 1
}
}
onClicked:tarzan.forceActiveFocus()
}
I noticed that memory allocated for Image is not released.
Without launched app the system has the following memory values: 423MiB / 1985MiB (checked via nvidia-smi)
When I am launching app and clicking (changing Image source) several times the memory using is increasing (1 click adds 4-5MB): 1950MiB / 1985MiB
Setting "cache" property to false does not help.
I found workaround: change image visibility but in this case a lot Image items are needed.
Does a solution exist to use "source" property not "visible"?
qml source:
Image {
id: trg
anchors.fill: parent
cache: false
states: [
State {
name: "on"
PropertyChanges {
target: trg
source: "qrc:/1.png"
}
},
State {
name: "off"
PropertyChanges {
target: trg
source: "qrc:/2.png"
}
}
]
}
MouseArea {
property bool isOn: false
anchors.fill: parent
onClicked: {
if (isOn) {
trg.state = "on";
}
else {
trg.state = "off";
}
isOn = !isOn;
}
}
Unfortunately, it was a bug (QTBUG-61754 and a few more) which has already been fixed in the qt 5.9.2 snapshot (I used to use 5.9.1 version).
Let's look at this very simple sample application, built with QT 5.9 on a Windows 10:
import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ColumnLayout {
anchors.left: parent.left
anchors.leftMargin: 20
anchors.right: parent.right
anchors.rightMargin: 20
Text {
id: text
text: "This is a sample Text"
}
ComboBox {
model: [
"A",
"B",
"C"
]
}
Text {
text: "Another Text"
}
TextField {
anchors.left: parent.left
anchors.right: parent.right
text: "User Input"
}
}
}
If I run it without any further modifications from the QT Creator, I get a very weird relationship between the Font-Size of the Text and the ComboBox and TextField blocks. It looks like this:
The text is too small, and the ComboBoxes (and their Fonts) are HUGE.
If I change the main function to set the default font size explicitely to the system font size using this code (It's the same when I hardcode the setPointSizeF to 12, which is the supposed standard size on windows):
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
auto font = app.font();
QFontInfo fi(font.defaultFamily());
font.setPointSizeF(fi.pointSizeF());
app.setFont(font);
QQmlApplicationEngine engine;
engine.load(QUrl(QLatin1String("qrc:/main.qml")));
It looks like this:
Now the "Relative Dimensions" are more balanced, but overall everything is just "too big". Additionally, if I'm opening the ComboBox, I get again very small text:
Did I miss to set some default here? How can I achieve a more balanced look that fit's better into the Operating Systems' native font sizes?
The combobox delegates use a different font to the application default.
Delegate font can be changed to match the rest of the application as follows:
ComboBox {
id: control
delegate: ItemDelegate {
width: control.width
text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
font.family: control.font.family
font.pointSize: control.font.pointSize
highlighted: control.highlightedIndex === index
hoverEnabled: control.hoverEnabled
}
}
Leave the font sizes as defaults and instead set the widths of your items. You could explicitly set the width of the ComboBox and TextField, or if you want to use the ColumnLayout to have consistent sizing of all the items, see example below,
import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ColumnLayout {
anchors.left: parent.left
anchors.leftMargin: 20
width: text.width
Text {
id: text
text: "This is a sample Text"
}
ComboBox {
Layout.fillWidth: true
model: [
"A",
"B",
"C"
]
}
Text {
text: "Another Text"
}
TextField {
Layout.fillWidth: true
text: "User Input"
}
}
}
You can simply try setting: font.pointSize: 12 in both the combobox and text fields. This works for me on Qt 5.9 in Windows 10. I am still trying to figure how to change the font size inside the combobox drop down; will expand this answer when I know.
I am building a QML application that must work on Windows and Mac OS X. I want to manage the menus in QML so I started using the MenuBar component in my application. I am using a QQuickView in C++ to display my QML elements. My menus appear properly on Mac OS X but I get nothing displayed on Windows and no errors in the logs.
The documentation speaks about this component being linked to ApplicationWindow but as it was working fine on Mac OS I was hoping it would work the same anywhere.
Is there a way to fix this on Windows ?
It seems that QQuickView is not able to contain ApplicationWindow as a root object.
Have you tried to use QQmlApplicationEngine instead of QQuickView?
#include <QtGui/QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine("qml/untitled/main.qml");
QObject* root = engine.rootObjects().at(0);
static_cast<QWindow*>(root)->show();
return app.exec();
}
I faced with the same issue on Windows, and it helped me.
I had a look at the way this is done in the QML ApplicationWindow component and found a way to display my menu on Windows. The idea/hack is to use the property __contentItem of the MenuBar component and attach it to the root element. I also do this only if the menu is not native so that it works as it did before on Mac OS X.
TopMenu.qml
import QtQuick 2.1
import QtQuick.Controls 1.0
MenuBar {
Menu {
title: "Window"
MenuItem {
text: "SubMenu3"
shortcut: "Ctrl+s"
}
MenuItem {
text: "SubMenu2"
shortcut: "Ctrl+p"
}
MenuItem {
text: "Preferences"
shortcut: "Ctrl+,"
}
}
}
RootElement.qml
import QtQuick 2.1
Rectangle {
id: rootWindow
width: 400
height: 400
Item {
id: menuWrapper
anchors.fill: parent
TopMenu {
id: myTopMenu
}
states: State {
name: "hasMenuBar"
when: myTopMenu && !myTopMenu.__isNative
ParentChange {
target: myTopMenu.__contentItem
parent: rootWindow
}
PropertyChanges {
target: myTopMenu.__contentItem
x: 0
y: 0
width: menuWrapper.width
}
}
}
}