I'm new to QtQuick 2 development and currently learning layouts.
In my application I simply have 3 rectangles I'm placing in a column layout.
A "header" rectangle at the top with height 30
A "footer" rectangle at the bottom with height 30
A "body" rectangle in between to fill up the remaining space
When I maximize the window on Windows 10 by snapping the application window to the top of screen, everything resizes correctly, however the "old" footer rectangle remains where it used to be. I noticed it stays there until I click a button or execute some action that forces the UI to finally refresh and erase where the footer used to be. So when I place something like an indeterminate progressbar in the application, the issue goes away.
import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
Window {
id: mainWindow
visible: true
minimumHeight:500
minimumWidth:1300
height: 500
width: 1300
//visibility: Window.Maximized
title: qsTr("layout practice")
ColumnLayout{
anchors.fill: parent
spacing: 0
Rectangle{
id:header
height: 30
color:"black"
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
Layout.preferredHeight: 30
Layout.maximumHeight: 30
Layout.minimumHeight: 30
Layout.fillWidth: true
}
Rectangle{
id:body
color:"blue"
Layout.fillHeight: true
Layout.fillWidth: true
Button {
id: button
x: 36
y: 200
text: qsTr("Button")
}
// ProgressBar{
// x: 36
// y: 118
// width:100
// height:10
// indeterminate: true
// }
}
Rectangle{
id:footer
height: 30
color:"grey"
Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
Layout.preferredHeight: 30
Layout.maximumHeight: 30
Layout.minimumHeight: 30
Layout.fillWidth: true
}
}
}
Before maximizing: https://drive.google.com/open?id=1jblUnaMdMV1Sc3uMJI96fQ57j75zzZso
After maximizing:https://drive.google.com/open?id=1osIszI6utIWlRziaiFW38jxlpgriTOH4
How do I avoid this? How would I force a refresh when the window height is changed?
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.
I am trying to have a display value continuously increment by 1 while a button is pressed and held down. I implemented my button with an Image element which is using a MouseArea to increment the display value when pressed once. I am not sure if there is another default signal that supports it, and if there is, I can't find one.
I am using Python+Pyside6, but would hope this is something I can accomplish with just QML.
Image{
id: incrementValue
source: "icons/arrow-up-circle-sharp.svg"
fillMode: Image.PreserveAspectFit
property int size: 50
sourceSize.width: size
sourceSize.height: size
smooth: true
Layout.alignment: Qt.AlignTop
visible: true
MouseArea {
anchors.fill: parent
onClicked: {
displayValue.text = (( displayValue.text*1.00) + 1.0).toLocaleString(Qt.locale("f"))
}
}
}
Text{
id: displayValue
text: "00.00"
}
I write this Example For you :
If you want set Image for Button Put Image inside it.
import QtQuick 2.12
import QtQuick.Window 2.12
import Qt.labs.qmlmodels 1.0
import QtQuick.Controls 2.13
Window {
visible: true
width: 400
height: 400
title: qsTr("Hello World")
property int counter: 0
Button {
id: button
x: 45
y: 46
text: qsTr("up")
onClicked:
{
counter +=1
}
}
Button {
id: button1
x: 188
y: 46
text: qsTr("down")
onClicked:
{
counter -=1
}
}
Text {
id: name
x: 118
y: 130
width: 98
height: 60
text: counter
}
}
As I understand from your question :
There is PressAndHold Signal in Button use onPressAndHold instead of onClicked.
Use a Timer with a 1s interval. Bind it’s running property to the pressed property of a MouseArea or Button. On timeout, increase respectively decrease the value.
I am working on an android application and I am facing a problem. In a page of the application I have some input fields, one of them is for date and I wanted to add a Calendar that open on demand for selecting the date or just enter the date manually, for this, I created a custom component which is composed of a TextInput and a button which when clicked will create the calendar item with a loader and set the size of the loader to 80 (it was 0 initially) all this components are included in a columnlayout. When the button get clicked the calendar is drawn below the other input fields.
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1
FocusScope {
id: root
Layout.preferredHeight: 20
property alias text: input.text
property alias border: background.border
property alias backgroundColor: background.color
property alias textColor: input.color
ColumnLayout{
anchors.fill: parent
spacing: 1
RowLayout{
Layout.fillHeight: true
Layout.fillWidth: true
Rectangle {
id: background
Layout.fillHeight: true
Layout.fillWidth: true
color: "darkgrey"
TextInput {
id: input
anchors.fill: parent
anchors.margins: 3
verticalAlignment: TextInput.AlignVCenter
focus: true
text: dateInput.selectedDate
}
}
CustomButton {
id: calandar
Layout.fillHeight: true
Layout.preferredWidth: 40
image: "icons/CalandarButton.svg"
onClicked: {
console.log("clicked calandar")
if(calendarLoader.status === Loader.Null){
calendarLoader.height = 80
calendarLoader.sourceComponent = Qt.createQmlObject("import QtQuick 2.5; import QtQuick.Controls 1.4; Calendar {}",
calendarLoader,
"calandarpp")
}
else{
calendarLoader.height = 0
calendarLoader.sourceComponent = undefined
}
}
}
}
Loader {
id: calendarLoader
Layout.fillWidth: true
height: 0
}
}
}
If something is below, then try changing its z coordinate.
There is no need to do Qt.createQmlObject() ever. It's enough to toggle Loader.active or Item.visible.
Example is not reproducible, make sure that it runs by itself with qmlscene.
This works for me:
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1
FocusScope {
id: root
Layout.preferredHeight: 20
property alias text: input.text
property alias border: background.border
property alias backgroundColor: background.color
property alias textColor: input.color
z: 1
Loader {
id: calendarLoader
active: false
sourceComponent: Calendar {}
z: 1
}
ColumnLayout {
anchors.fill: parent
spacing: 1
RowLayout{
Layout.fillHeight: true
Layout.fillWidth: true
Rectangle {
id: background
Layout.fillHeight: true
Layout.fillWidth: true
color: "darkgrey"
TextInput {
id: input
anchors.fill: parent
anchors.margins: 3
verticalAlignment: TextInput.AlignVCenter
focus: true
}
}
Button {
id: calandar
Layout.fillHeight: true
Layout.preferredWidth: 40
onClicked: {
console.log("clicked calandar")
calendarLoader.active = !calendarLoader.active
}
}
}
}
}
I have QML ApplicationWindow named ueWindowMain and declared in main.qml. Inside it there is QML StatusBar named ueStatusBar with two icons, named ueStatusIndicatorDatabaseConnected and ueStatusIndicatorBluetoothPrinterConnected, showing some state and one checkable QML Button, named ueStaffSelector:
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.0
import QtQuick.Controls.Styles 1.4
import si.mikroelektronika 1.0
import "gui/items"
ApplicationWindow
{
id: ueWindowMain
title: qsTr("uBlagajna Mobile Client ver 0 revision 101")
width: Screen.desktopAvailableWidth
height: Screen.desktopAvailableWidth
visible: true
opacity: 1.0
contentOrientation: Qt.LandscapeOrientation
color: "black"
statusBar: StatusBar
{
id: ueStatusBar
height: 96
clip: true
antialiasing: true
style: StatusBarStyle
{
background: Rectanglstrong texte
{
width: parent.width
height: parent.height
color: "#303030"
} // background
} // style
RowLayout
{
spacing: 8
UeDatabaseStatusIndicator
{
id: ueStatusIndicatorDatabaseConnected
Layout.minimumWidth: 96
Layout.preferredWidth: 96
Layout.maximumWidth: 96
Layout.fillHeight: true
ueParamImageStatusOn: "qrc:///ueIcons/icons/ueDbConnectionOk.png"
ueParamImageStatusOff: "qrc:///ueIcons/icons/ueDbConnectionError.png"
} // ueStatusIndicatorDatabaseConnected
UeBluetoothStatusIndicator
{
id: ueStatusIndicatorBluetoothPrinterConnected
Layout.minimumWidth: 96
Layout.preferredWidth: 96
Layout.maximumWidth: 96
Layout.fillHeight: true
ueParamImageStatusOn: "qrc:///ueIcons/icons/ueBtConnectionOk.png"
ueParamImageStatusOff: "qrc:///ueIcons/icons/ueBtConnectionError.png"
} // ueStatusIndicatorBluetoothPrinterConnected
UeStaffSelector
{
id: ueStaffSelector
Layout.minimumWidth: 96
Layout.preferredWidth: 96
Layout.maximumWidth: 96
Layout.fillHeight: true
} // ueStaffSelector
} // RowLayout
} // ueStatusBar
} // ueWindowMain
Now, those three items inside StatusBar are positioned using RowLayout. How can I calculate their coordinates inside QML code, i.e. programmatically?
I've managed to solve problem with following code chunk:
x: ueStatusIndicatorDatabaseConnected.width+
ueStatusIndicatorBluetoothPrinterConnected.width+2*ueStatusBarLayout.spacing
y: ueWindowMain.height-ueStatusBar.height-ueStaffView.height
and for now it seems it works fine.
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.