I have a Rectangle with a MouseArea in ApplicationWindow. By clicking the mousearea, the size of the rectangle should be increased, which works perfectly. But somehow centering the rectangle in the middle of the ApplicationWindow does not work
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
ApplicationWindow {
id: originalWindow
visible: true
width: 1920
height: 1080
title: qsTr("Bookshop Management System")
Rectangle {
id: searchUserButton
x: 450
y: 206
radius: 10
width: 200
height: 200
color: "#ccc8c8"
MouseArea {
anchors.fill: parent
onClicked: {searchUserButton.width = 1100
searchUserButton.height = 600
searchUserButton.anchors.centerIn = originalWindow
rectangle2.visible = false
rectangle3.visible = false
rectangle4.visible = false
rectangle5.visible = false
rectangle6.visible = false
}
}
}
The error code is `Error:
Cannot assign QObject* to QQuickItem*
You already set a width and a height of the searchUserButton, so you only have to correctly set x and y coordinates for this button.
searchUserButton.x = (originalWindow.width - searchUserButton.width) / 2
searchUserButton.y = (originalWindow.height - searchUserButton.height) / 2
Related
I need to have a Popup that stays visible outside the bounds of the main window.
I couldn't find anything in the Qt documentation.
This is the code:
import QtQuick 2.15
import QtQuick.Window 2.2
import QtQuick.Controls 2.12
ApplicationWindow {
id: window
width: 400
height: 400
visible: true
Button {
text: "Open"
onClicked: popup.open()
}
Popup {
id: popup
x: 100
y: 100
width: 300
height: 400
modal: true
focus: true
dim: false
contentItem: Rectangle
{
anchors.fill: parent
color: "red"
}
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
}
}
This is the output of this:
I want the red to go beyond the window borders.
Something like this:
I'd appreciate the help!
Note: using a Dialog is no good for me.
Popups are not proper windows, so you'd need to create a new window like Michael mentioned:
import QtQuick 2.15
import QtQuick.Controls 2.15
ApplicationWindow {
id: mainWindow
width: 640
height: 480
visible: true
ApplicationWindow {
id: redWindow
x: mainWindow.x + mainWindow.width / 2
y: mainWindow.y + mainWindow.height / 2
width: 300
height: 400
flags: Qt.Popup | Qt.Dialog
visible: true
Rectangle {
color: "red"
anchors.fill: parent
}
}
}
There is a suggestion to make Popups proper windows here.
My purpose is to glue the window to the right alignment of the screen while resizing.
During animation (or changing explicity) of window width and x (binded to width), ApplicationWindow is bouncing to left (flickering for changing explicity).
I've already was searching for the solution, but nothing is working for me.
Adding the attribute:
QCoreApplication::setAttribute(Qt::AA_UseOpenGLES);
helped a lot, but window is still bouncing to left and right.
main.qml:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.15
ApplicationWindow {
id: root
height: 300
width: 300
visible: true
flags: Qt.FramelessWindowHint
x: Screen.width - width
Material.theme: Material.Dark
NumberAnimation on width {
id: animation
easing.type: Easing.InOutQuad
}
property var lowerSize: true
Rectangle {
anchors.fill: parent
Button {
anchors.centerIn: parent
enabled: !animation.running
text: lowerSize ? 'Size up' : 'Size down'
onClicked: {
animation.from = lowerSize ? 300 : 600
animation.to = lowerSize ? 600 : 300
animation.start()
lowerSize = !lowerSize
}
}
}
}
I've made example code for reproducing the issuee on github qml-flickering-example.
I had slightly different behavior on macOS than you are seeing in Windows (stutters on shrink for me) but it does indeed still stutter.
It appears to be because you are animating the width but then relying on QML bindings to update x. As a result, the x update is lagging behind the width update by one frame.
Using a ParallelAnimation and animating both at the same time fixed it for me:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.15
ApplicationWindow {
id: root
height: 300
width: 300
visible: true
flags: Qt.FramelessWindowHint
Component.onCompleted: {
x = Screen.width - width;
y = 0;
}
Material.theme: Material.Dark
ParallelAnimation {
id: animation
NumberAnimation {
id: widthAnimation
target: root
property: "width"
easing.type: Easing.InOutQuad
}
NumberAnimation {
id: xAnimation
target: root
property: "x"
easing.type: Easing.InOutQuad
}
}
property bool lowerSize: true
Rectangle {
anchors.fill: parent
Button {
anchors.centerIn: parent
enabled: !animation.running
text: lowerSize ? 'Size up' : 'Size down'
onClicked: {
widthAnimation.from = lowerSize ? 300 : 600
widthAnimation.to = lowerSize ? 600 : 300
xAnimation.from = lowerSize ? Screen.width - 300 : Screen.width - 600
xAnimation.to = lowerSize ? Screen.width - 600 : Screen.width - 300
animation.start()
lowerSize = !lowerSize
}
}
}
}
So I'm trying to create an application in QML, and doing so by using an ApplicationWindow. The following code is in main.qml, where some of the components are defined in other files (they are not essential for this problem):
import QtQuick 2.12
import QtQuick.Extras 1.4
import QtQuick.Controls 2.5
import QtQuick.Controls.Styles 1.4
import QtQuick.Window 2.3
import QtDataVisualization 1.3
import Qt3D.Core 2.9
import Qt3D.Render 2.9
import QtCharts 2.3
ApplicationWindow {
id: window
width: 1280
height: 720
//visibility: ApplicationWindow.FullScreen
visible: true
color: "#444444"
Speedometer {
id: speedometer
x: 49
y: 144
width: 306
height: 320
minValue: 0
maxValue: 600
visible: true
}
Thermometer {
id: thermometer
x: 1170
y: 233
scale: 2
minValue: 0
maxValue: 50
visible: true
}
Slider {
id: slider
from: 0
to: 100
x: 28
y: 594
width: 1224
height: 98
font.pointSize: 14
hoverEnabled: false
enabled: false
live: true
snapMode: Slider.NoSnap
value: 0
visible: true
Behavior on value {
NumberAnimation {
duration: 200
}
}
background: Rectangle {
x: slider.leftPadding
y: slider.topPadding + slider.availableHeight / 2 - height / 2
implicitWidth: 200
implicitHeight: 4
width: slider.availableWidth
height: implicitHeight
radius: 2
color: "#999999"
}
handle: Rectangle {
x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width)
y: slider.topPadding + slider.availableHeight / 2 - height / 2
implicitWidth: 26
implicitHeight: 26
radius: 13
color: "#0099ff"
}
}
Timer {
interval: 200
running: true
repeat: true
property var distance: Math.random
onTriggered: update()
}
function update(){
var distance = (Math.random() * 0.03) + 0.1;
var speed = (distance * 50) / 0.02;
slider.value = slider.value + distance;
speedometer.value = speed;
thermometer.value = Math.random() * 25 + 25;
}
DataManager {
id: manager
onNewVelocity: {
lineSeries.append(velocity.x, velocity.y)
chartView.title = name
}
}
Timer {
id: timer
repeat: true
interval: 1
onTriggered: {
manager.dummyData();
}
}
Chart {
id: chart
height: 250
width: 250
x: 1000
}
Text {
id: labelText
color: "white"
width: 300
height: 100
}
Button {
id: startThread
text: "Start"
onClicked: {
timer.start()
}
}
Button {
id: stopThread
text: "Stop"
x: 200
onClicked: {
timer.stop()
}
}
Button {
id: clearGraph
text: "Clear"
x: 100
onClicked: {
lineSeries.clear()
}
}
}
The content itself isn't that important, but the thing that is, is the fact that when I personally run the project, the application window doesn't show what it is supposed to. And I'd like to emphasize: I'm collaborating with others on this exact project, and when they run the exact same code as me, they get different results.
The first image is what I get when running the code:
The second image is what they get, and what is actually supposed to show when running the code:
So I've been trying to search Google for every possible solution, but have found nothing. I've reinstalled Qt and QtCreator, but to no prevail. We are running the exact same thing, but I'm the only one that don't see all components show up. The first image is way more zoomed in than the latter, and I'd really like if anyone knew how to fix this. I've struggled to find anything that could help so far
(Extra note: the code I ran didn't include the graph as it wasn't up to date with current version on git, but the other things remain the same. So the bar below and the thermometer component on the right SHOULD be visible, but they're not).
I eventually found a solution to what seems to be a bug from Qt's end. I had to launch QtCreator via a qtcreator.bat file in the same directory as qtcreator.exe with the following content:
#echo off
set QT_SCALE_FACTOR_ROUNDING_POLICY=Round
set QT_AUTO_SCREEN_SCALE_FACTOR=0
qtcreator.exe
When I now run the project, it shows the correct scale :)
How can a checkbox color of the indicator be customized without changing the checkmark it shows by default?
I'm going to illustrate what happens by default:
import QtQuick 2.0
import QtQuick.Controls 2.2
ApplicationWindow {
id: window
title: "Stack"
visible: true
width: 300
CheckBox {
}
}
If i go to documentation the examples I see there don't mantain the checkmark…
https://doc.qt.io/qt-5.9/qtquickcontrols2-customize.html
Because of that, instead of a Rectangle i use a Text component on the indicator property
import QtQuick 2.0
import QtQuick.Controls 2.2
ApplicationWindow {
id: window
title: "Stack"
visible: true
width: 300
CheckBox {
id: control
indicator: Rectangle {
implicitWidth: 26
implicitHeight: 26
x: control.leftPadding
y: parent.height / 2 - height / 2
radius: 3
border.color: control.down ? "#17a81a" : "#21be2b"
Text {
width: 14
height: 14
x: 1
y: -2
text: "✔"
font.pointSize: 18
color: control.down ? "#17a81a" : "#21be2b"
visible: control.checked
}
}
}
}
It doesn't look exactly like the default:
Is there anything we can do to make it like the default one?
A brute force solution is to copy the implementation of the CheckBox.qml to your own code and then to change the required parts. It turned out that the check symbol is not a text, but moreover a simple image.
The following would give you a CheckBox being the same as CheckBox.qml, but having a green Check-Symbol instead of a black work. I copied this code from Qt 5.13.
import QtQuick 2.12
import QtQuick.Templates 2.12 as T
import QtQuick.Controls 2.12
import QtQuick.Controls.impl 2.12
ApplicationWindow {
id: window
title: "Stack"
visible: true
width: 300
CheckBox {
id: control
indicator: Rectangle {
implicitWidth: 28
implicitHeight: 28
x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
y: control.topPadding + (control.availableHeight - height) / 2
color: control.down ? control.palette.light : control.palette.base
border.width: control.visualFocus ? 2 : 1
border.color: control.visualFocus ? control.palette.highlight : control.palette.mid
ColorImage {
x: (parent.width - width) / 2
y: (parent.height - height) / 2
defaultColor: "#353637"
color: "green" // Added this
source: "qrc:/qt-project.org/imports/QtQuick/Controls.2/images/check.png"
visible: control.checkState === Qt.Checked
}
Rectangle {
x: (parent.width - width) / 2
y: (parent.height - height) / 2
width: 16
height: 3
color: control.palette.text
visible: control.checkState === Qt.PartiallyChecked
}
}
}
}
I guess, that there is no way to override parts of the ColorImage component, as there is no id being set, so that the color property cannot be redefined.
Here's a somewhat hackish solution, that could break if CheckBox implementation details change:
CheckBox
{
font.italic: !hasReferential
font.pointSize: 8
indicator.width: 15
indicator.height: 15
Component.onCompleted: indicator.children[0].color = "green"
}
I have frameless main window, created by qml ( ApplicationWindow {..} in my main.qml file)
I instantiate qml by QQmlApplicationEngine::load (class introduced in Qt5.1).
If I set the Qt.FramelessWindowHint flag, the window is frameless, but loses shadow (in Windows).
How to add shadow to my window?
My window listing:
ApplicationWindow {
id: rootWindow
color : "#f8f8f8"
maximumHeight: 445
minimumHeight: 445
minimumWidth: 730
maximumWidth: 730
flags : Qt.FramelessWindowHint | Qt.Window
Component.onCompleted: {
setHeight(455)
setWidth(740)
}
MainObject{
id:mainObject1
anchors.fill: parent
height:445
width:730
}
}
The solution is to implement the shadow part integral to the application, this way you can disable WM decoration and still have decoration, and have it consistent across different platforms.
In the following example the window has a shadow that even animates to create the effect of lifting the window up when moving it. And when the window is maximized, the margins are removed and the shadow is thus no longer visible.
import QtQuick 2.7
import QtQuick.Controls 2.1
import QtGraphicalEffects 1.0
import QtQuick.Window 2.3
ApplicationWindow {
id: main
visible: true
width: 300
height: 200
color: "#00000000"
flags: Qt.FramelessWindowHint | Qt.Window
Rectangle {
id: rect
anchors.fill: parent
anchors.margins: main.visibility === Window.FullScreen ? 0 : 10
MouseArea {
id: ma
anchors.fill: parent
property int dx
property int dy
onPressed: { dx = mouseX; dy = mouseY }
onPositionChanged: {
main.x += mouseX - dx
main.y += mouseY - dy
}
onDoubleClicked: main.visibility = main.visibility === Window.FullScreen ? Window.AutomaticVisibility : Window.FullScreen
}
}
DropShadow {
anchors.fill: rect
horizontalOffset: 1
verticalOffset: 1
radius: ma.pressed ? 8 : 5
samples: 10
source: rect
color: "black"
Behavior on radius { PropertyAnimation { duration: 100 } }
}
}
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.0
ApplicationWindow{
id: window
visible: true
width: 640
height: 480
title: qsTr("Hello World")
flags: Qt.Window | Qt.FramelessWindowHint
color: "#00000000"
Rectangle {
id: rect
anchors.fill: parent
anchors.margins: 10
radius: 5
}
DropShadow {
anchors.fill: rect
samples: 20
source: rect
color: "gray"
}
}
If you mean the drop shadow effect, that is not quite so.
We have no control over the WM decoration in Qt besides the frameless window flag you have just used. It is pretty much WM specific. Windows (TM) WM applies shadow effect to decorate windows, but this is a Windows (TM) choice. Also, you have just hinted that it should not decorate.