Issue with Material Style in QML - qt

I have this small example that does not work as i expected :
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Controls.Material 2.2
Window {
id: root
visible: true
width: 640
height: 480
property bool lightTheme: false
Material.theme: Material.Dark
Material.foreground: Material.color(Material.Red) // value is always material red #F44336 (from light theme)
onLightThemeChanged: {
Material.theme = lightTheme ? Material.Light : Material.Dark;
}
Button {
id: btn
width: 200
height: 200
anchors.centerIn: parent
text: "change theme"
onClicked: {
lightTheme = !lightTheme;
}
}
Text {
id: darkRed
text: "predefinedDarkThemeRed"
color: "#EF9A9A"
anchors.top: btn.bottom
anchors.horizontalCenter: btn.horizontalCenter
}
Text {
id: lightRed
text: "predefinedLightThemeRed"
color: "#F44336"
anchors.top: darkRed.bottom
anchors.left: darkRed.left
}
}
The issue is with the default Material.Red color being always picked from the Material.Light theme whatever theme i have selected.
However, when i don't set any Material.foreground, then it is white with the Material.Dark and dark with the Material.Light, and dynamically switched between those colors when the theme is changed, so everything is fine.
I would expected the same behaviour with a custom Material.foreground but it does not seem to work.
What is wrong here ?
Thank you.
Note: the app is run with options -style material args, and i am using Qt 5.9.3 or Qt 5.10.1

i think you missed a little nuance
add in .pro file
QT += quickcontrols2
in mine file add QQuickStyle::setStyle("Material");
#include <QQuickStyle>
#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
................
QQuickStyle::setStyle("Material");
//The style can also be specified as a path to a custom style, such as
//QQuickStyle::setStyle(":/mystyle");
................
return app.exec();
}
in your example, the result will be
when pressed

Related

Showing a popup without any toplevel window in QtQuick

I want to make a game overlay to show my custom cross-hair. I want it to be always there with no closing policy.
I used a Popup item in an ApplicationWindow and I set the opacity of it to 0 and the opacity of the pop-up to 1 but it just showed me nothing.I also tried using the pop-up item without any toplevel window but again nothing.
The question is "Is it possible to show an always-on-top popup without any visible top-level window ?"
Your suggestions would be appreciated.
Without a popup window, we can try out with the 'z' property of the QQuickItem. Stack the crosshair always on top of your other items. And if you want to move the crosshair across the screen you can use their 'x,y' properties.
I have tried a simple sample for the same. Used an Image item for crosshair on top of the scroll view. It works as expected. I tried my way. We will see if some other idea's coming in.
Sample code here:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
visible: true
width: 640
height: 480
// used here only to indicate image loading is going on
BusyIndicator {
id: busyindicatorId
visible: backgroundImgId.status === Image.Loading ||
crossImgId.status === Image.Loading
anchors.centerIn: parent
}
// background item
ScrollView {
anchors.fill: parent
anchors.margins: 10
clip: true
visible: !busyindicatorId.visible
Image {
id: backgroundImgId
source: "https://i.ibb.co/ZBNLvzb/andriod.jpg"
}
}
// crosshair item
Image {
id: crossImgId
z: 1
width: 100
height: width
visible: !busyindicatorId.visible
source: "https://i.ibb.co/SJFTLwN/cross.png"
anchors.centerIn: parent
}
}
Updates
Instantiated two windows of that one can be used for crosshair and have to set some window properties(transparent, alwaysontop) to show always on top. Let's have a look at this base code. Sample video
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickView>
#include <QScreen>
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
if (engine.rootObjects().isEmpty())
return -1;
QScreen *screen = QGuiApplication::primaryScreen();
QQuickView view;
view.setSource(QUrl(QStringLiteral("qrc:/crosshair.qml")));
view.setX(screen->geometry().width()/2 - view.width()/2);
view.setY(screen->geometry().height()/2 - view.height()/2);
view.setColor("transparent");
view.setFlags(Qt::SubWindow | Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint);
view.show();
return app.exec();
}
//////////////// main.qml ////////////////
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
visible: true
visibility: "FullScreen"
objectName: "mainWindow"
// used here only to indicate image loading is going on
BusyIndicator {
id: busyindicatorId
visible: backgroundImgId.status === Image.Loading
anchors.centerIn: parent
}
// background item
ScrollView {
anchors.fill: parent
anchors.margins: 10
clip: true
visible: !busyindicatorId.visible
Image {
id: backgroundImgId
source: "https://i.ibb.co/ZBNLvzb/andriod.jpg"
}
}
}
//////////////// crosshair.qml ////////////////
import QtQuick 2.9
import QtQuick.Controls 2.2
Item {
width: 100
height: 100
// crosshair item
Image {
width: parent.width
height: parent.height
source: "https://i.ibb.co/SJFTLwN/cross.png"
}
}

QML not getting property from singleton in another file

I created a project that puts some QML in a plugin, and an app using Qt's QPluginLoader.
The app's QML can then use the plugin's QML, with one noticeable problem. From one of the plugin's QML files, I am not able to read a property of a singleton in another QML file. If you look in the file hello.qml, there is a Text item that tries to get his text from MySingleton, but that text does not show up. When I substitute a string literal (the commented out line), the text shows up just fine.
I've got the project here: https://github.com/rhvonlehe/qmlplugin
The project itself is very basic, but represents a lot of the same things going on in a larger project that I can't share but has the same problem.
Output as-is:
In the blue rectangle there should be the words, "singleton Text"
The QtCompany provided the answer, which I'm able to share here.
Long story short, to get the full functionality expected from QML in a plugin I needed to use QQmlExtensionPlugin. Here are the updated files to make things work (Plugin.h and hello.qml)
hello.qml
import QtQuick 2.0
import org.example.PluginInterface 1.0
import "."
Rectangle {
id: page
width: 320; height: 240
color: "lightgray"
Text {
id: helloText
text: "Hello world!"
y: 30
anchors.horizontalCenter: page.horizontalCenter
font.pointSize: 24; font.bold: true
}
Rectangle {
id: innerPage
width: 300; height: 30
anchors.horizontalCenter: page.horizontalCenter
color: "blue"
Text {
id: nextOne
color: "white"
// text: "literal Text"
text: MySingleton.getTheText()
anchors.verticalCenter: innerPage.verticalCenter
anchors.horizontalCenter: innerPage.horizontalCenter
font.pointSize: 18; font.bold: false
}
}
OtherThing {
id: myOtherThing
x: 20; y: 150
}
}
Plugin.h
#ifndef PLUGIN_H
#define PLUGIN_H
#include <PluginIf.h>
#include <QQmlExtensionPlugin>
#include <QQmlEngine>
class Q_DECL_EXPORT Plugin : public QQmlExtensionPlugin, PluginInterface
{
Q_OBJECT
Q_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)
Q_INTERFACES(PluginInterface)
public:
void init() override;
void registerTypes(const char *uri) override
{
qmlRegisterSingletonType(QUrl("qrc:/MySingleton.qml"), uri, 1, 0, "MySingleton");
}
};
#endif // PLUGIN_H

KeyNavigation in SpinBox not working in qml

I'm using in my code KeyNavigation.tab property to make navigation workable in qml.
But the control SpinBoxis not working with it. for example if i have a control between it and the element i want it to navigate it wont respect the rule.
I'm going to illustrate with a real example.
main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
if (engine.rootObjects().isEmpty())
return -1;
return app.exec();
}
and
main.qml
import QtQuick 2.9
import QtQuick.Controls 1.4
import QtQuick.Controls 2.0
ApplicationWindow {
id: window
title: "Stack"
visible: true
height: 200
width: 400
Item {
id: page
anchors.fill: parent
width:parent.width
height: parent.height
ScrollView {
id:scrollView
anchors.fill:parent
Column{
width:parent.width
spacing:10
TextField {
id:textField
KeyNavigation.tab: spinBox1
implicitHeight: 30
font.bold: true
}
SpinBox {
id: spinBox1
KeyNavigation.tab: spinBox2
width: 100
height: 30
editable: true
}
ComboBox {
id:comboBox
//KeyNavigation.tab: spinBox2
anchors.topMargin: 10
textRole: "text"
}
SpinBox {
id: spinBox2
KeyNavigation.tab: textField
width: 100
height: 30
editable: true
}
}
}
}
}
Here spinBox1 wont jump to spinBox2 if we use tab.
This was tested on a windows 10 OS
The version of Qt used is 5.11.1
For some reason, the QQuickKeyNavigationAttached::keyPressed() is not called if the attached property is set on the SpinBox itself instead of its TextInput. So, using the attached property on the contentItem is a workaround:
SpinBox {
Component.onCompleted: contentItem.KeyNavigation.tab = spinBox
}

QtQuick StackView loading issues

I'm working through the book "Learn Qt 5" from Nicholas Sherriff.
Now I have some problems getting the QtStackView component to work properly.
I've written following code:
main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/views/MasterView.qml")));
return app.exec();
}
MasterView.qml
import QtQuick 2.5
import QtQuick.Window 2.0
import QtQuick.Controls 1.4
Window {
visible: true
width: 1024
height: 768
title: qsTr("Client Management")
StackView {
id: contentFrame
initialItem: Qt.resolvedUrl("qrc:/views/SplashView.qml")
}
}
SplashView.qml
import QtQuick 2.5
Rectangle {
anchors.fill: parent
color: "#f04c42"
}
But when executing, the rectangle from SplashView.qml does not appear.
I do not get any errors. If I put the rectangle block inside the window block it works. But even if i put the rectangle with an id in the StackView block it doesn't work.
I'm using an older version of QtQuick than the book recommends, becouse im using not the newest debian distribution.
Am I missing something?
Thanks
The problem is simple, the Rectangle in the SplashView takes the size of the parent:
Rectangle {
anchors.fill: parent //<---
color: "#f04c42"
}
And the parent is the StackView, but the StackView has no size, so the solution is to set a size, for this we can use the anchors:
StackView {
id: contentFrame
anchors.fill: parent // <--- possible solution
initialItem: Qt.resolvedUrl("qrc:/views/SplashView.qml")
}

How to get signal key pressed on QT virtual keyboard and play a sound click track?

in my QT application for embedded device , i want play a sound on key pressed event of the QML virtualkeyboard . Can I get this event? and How get it?
I already have a class that play sound ( click effect) when a button was clicked that i use in the others qml pages
import QtQuick 2.7
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3
import QtQuick.VirtualKeyboard 2.1
Page{
id: pag
width: 1280
height: 800
background: Rectangle { color: "black"}
TextField {
id: txtName
height: 200
width:200
anchors.horizontalcenter:parent.horizontalCenter
font.family: "Arial
font.pixelSize: 24
placeholderText: "insert your text here"
background: Rectangle {
anchors.fill: parent
color: "transparent"
}
}
InputPanel {
id: virtualkeyboard
width: 0.95*parent.width
anchors.bottom: parent.bottom
}
}
You can create a class Mykeyfilter, it's a QObject class
then in your file .h you declare:
bool eventFilter(QObject *object, QEvent *event);
Then in your Mykeyfilter.cpp file you define eventFilter like this:
bool MykeyFilter::eventFilter(QObject *object, QEvent *event)
{
switch(event->type())
{
case QEvent::KeyPress:
case QEvent::KeyRelease:
{
//////call your sound class here that you want to play/////
qDebug()<<"I have clicked" //For testing
}
default:
break;
// return QObject::eventFilter(object, event);
}
return QObject::eventFilter(object, event);
}
Also add in your main.cpp file:
#include "mytouchfilter.h"
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
app.installEventFilter(new MykeyFilter());
return app.exec();
}
You have two options:
Use the clicked() signal of BaseKey.
Use the soundEffect property of KeyPanel.
Both require having your own style. You can read more about creating your own style here. To quote from there:
A good starting point for creating a new style is to use an existing built-in style as a template and edit it. You can find the built-in styles from the virtual keyboard sources directory src/virtualkeyboard/content/styles. Copy one of the directories containing a built-in style into the Styles directory and rename it to "test". [...]

Resources