I've faced with a very strange behaviour for ApplicationWindow. Here is my code :
import QtQuick 2.12
import QtQuick.Controls 2.5
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("App test")
Rectangle {
width : parent.width/2
height : parent.height/2
anchors.centerIn: parent
color : "red"
}
}
I press maximize window button, then minimize and see the following picture:
Then again maximize and minimize and things seems to get worse :
What am I doing wrong?
Related
I'm fairly new to QML/Qt. Basically I would like to know how to apply a blur to the inside of the white rectangle seen on the photo below and only the inside so that it blurs the part of the background image within the rectangle. I tried doing this in a normal Qt project but don't think its possible without using QML.
It's possible. Use ShaderEffectSource item:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.12
import "qrc:/"
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Image {
id: bug
anchors.fill: parent
width: 32
height: 32
source: "qrc:/Original_bug.png"
ShaderEffectSource{
id: shader
sourceItem: bug
width: 128
height: 128
anchors{
right: parent.right
rightMargin: 32
verticalCenter: parent.verticalCenter
}
sourceRect: Qt.rect(x,y, width, height)
}
GaussianBlur {
anchors.fill: shader
source: shader
radius: 8
samples: 4
}
}
}
Using sourceRect property you can specify an area to be blurred.
There are some issues when resizing the source image. This example works good only for static one.
when applying property bindings in QML I have encountered one problem. When we have a parent component (Window) and a child (Rectangle), which has some properties bind to parent's (width, height, or anchors.fill: parent), when I change parents properties in JS code, and if I want to read the values of the child's properties (that are bound to parent's) in the same JS code, it shows the old values (not updated). It looks like that the change of parents properties hasn't been propagated to child's. Here is the example of this problem:
Window {
id:myWindow
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle{
id:customRec
width:parent.width
height: parent.height
color: "blue"
}
Button{
id:myBtn
onClicked: {
myWindow.width = 800
myWindow.height = 600
console.log(customRec.width)
console.log(customRec.height)
}
}}
After clicking on the button, it shows:
qml: 640
qml: 480
instead of 800 and 600, new values. Although the rectangle has been scaled well. After clicking again it will show updated values (800 and 600). Can someone please explain what is happening here and how can binding property change be propagated immediately to bound properties. I am using Qt 5.12.2 with msvc2017_64 compiler.
You are printing the properties before they got updated. With the below code you can find that onWidthChanged signal comes after the console log. onWidthChanged signal comes after updating the width.
import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Controls 2.2
Window {
id:myWindow
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle{
id:customRec
width: parent.width
height: parent.height
color: "blue"
onWidthChanged: console.log("***********")
}
Button{
id:myBtn
width: 100
height: 100
onClicked: {
myWindow.width = myWindow.width +50
myWindow.height = myWindow.height +50
console.log("--------------------------")
console.log("window width" + myWindow.width)
console.log("window height" + myWindow.height)
console.log("customrect width" + customRec.width)
console.log("customrect height" + customRec.height)
}
}
}
I have a simple QuickControls2 QML design where an image should stretch horizontally to fill the application window and maintain its aspect ratio. But when I run my program, the image doesn't scale/stretch.
Is the problem that the image is smaller than the current window size and QT doesn't upscale/increase the size of the image? Is there a setting to make QT resize the image to fill the width regardless of image size?
Can you let me know what is wrong and how I can fix it?
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
ApplicationWindow {
id: applicationWindow
visible: true
width: 640
height: 480
title: qsTr("Scroll")
ColumnLayout {
id: mainLayout
anchors.fill: parent
Image {
id: imagePane
Layout.fillWidth: true
fillMode: Image.PreserveAspectFit
source: "placeholder.jpg"
}
}
}
Try this:
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
ApplicationWindow {
id: applicationWindow
visible: true
width: 640
height: 480
title: qsTr("Scroll")
ColumnLayout {
id: mainLayout
anchors.fill: parent
Image {
id: imagePane
Layout.preferredWidth: parent.width
Layout.preferredHeight: parent.height
fillMode: Image.PreserveAspectFit
source: "placeholder.jpg"
}
}
}
Using Image.PreserveAspectFit, image is scaled uniformly to fit without cropping ,
Now since you are not filling Layout height, image can't scale beyond it's implicit height.
As your requirement is to make QT resize the image to fill the width regardless of image size means you accept to crop the image beyond the height limit, in which case you need to use:
fillMode: Image.PreserveAspectCrop
The issue seems so trivial that I almost believe it's a bug in Qt itself:
import QtQuick.Window 2.2
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Layouts 1.1
Window {
id: window
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
color: "white"
Layout.columnSpan: 2
Layout.fillHeight: true
Layout.fillWidth: true
radius: 5
width: 640/2
height: 480/2
TextArea {
id: txtMemo
anchors.fill: parent
anchors.margins: 5
textColor: "black"
wrapMode: TextEdit.Wrap
readOnly: false
}
}
Button {
x: 0
y: 480/2
width: 640/2
height: 480/2
onClicked: {
//Qt.inputMethod.hide()
txtMemo.visible = false
}
}
}
You need to run this on an Android device to see the bug:
Type something in to the text area so the cursor and virtual keyboard appears.
When you click the button, the cursor & keyboard stay on screen. No idea why, perhaps a feature.
Anyways, that's not the main issue. When I uncomment Qt.inputMethod.hide() and trying to reproduce, an interesting thing happens:
if the keyboard is visible, both the cursor and keyboard disappear - awesome, exactly what I want
however if the keyboard isn't visible (closed by the arrow on the bottom during typing) and the cursor is, the cursor won't disappear at all:
(apologies for the picture quality)
So how do I get rid of the cursor? Tested on Qt 5.9.6 on Android (seems unrelated on Android version, happens on the latest version as well).
I have a TextArea. If I set padding constantly padding working normally.
import QtQuick 2.9
import QtQuick.Controls 2.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
TextArea{
font.pixelSize: 20
anchors.fill: parent
wrapMode: TextArea.Wrap
leftPadding: 100 //*parent.width/640
rightPadding: 100 //*parent.width/640
}
}
If I uncomment lines above then I have strange behavior.
What am I doing wrong?
Screenshot
It seems to be a bug, probably some updates are missing, when setting up the width of the contentItem of the ApplicationWindow, so the line lengths are not calculated properly.
If you write:
leftPadding: {
console.log(parent, parent.width)
return 100 * parent.width/640
}
You can see, that the parent.width is initially set to 0 and then changes to 640. When this change happens, there must be something going wrong with the signals.
A resize of the window will update the line lengths, so the proper layout is restored. You might try to file a bugreport on http://bugreports.qt.io to have it fixed.
Other than that, you may give an ID to your ApplicationWindow and use this instead of parent
import QtQuick 2.7
import QtQuick.Controls 2.0
ApplicationWindow {
id: win
visible: true
width: 640
height: 480
title: qsTr("Hello World")
TextArea{
font.pixelSize: 20
anchors.fill: parent
wrapMode: TextArea.Wrap
leftPadding: 100 * win.width/640
rightPadding: 100 * win.width/640
}
}