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.
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'm trying to use a Pane which I add Material.elevation: 6 but in turn I want to give it a rounded edge and I can not get both together at the same time
The following is attempted but the elevation is lost.
Pane {
// ...
Material.elevation: 6
background: Rectangle {
radius: 15
}
// ...
}
The idea is that you can keep both aspects to achieve something like:
You have to overwrite based on the source code:
RoundPane.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12
import QtQuick.Controls.Material.impl 2.12
Pane {
id: control
property int radius: 2
background: Rectangle {
color: control.Material.backgroundColor
radius: control.Material.elevation > 0 ? control.radius : 0
layer.enabled: control.enabled && control.Material.elevation > 0
layer.effect: ElevationEffect {
elevation: control.Material.elevation
}
}
}
IconPane.qml
import QtQuick 2.12
import QtQuick.Controls.Material 2.12
import QtQuick.Layouts 1.12
RoundPane {
id: control
property alias name: txt.text
property alias icon: image.source
Material.elevation: 6
radius: 15
RowLayout{
anchors.fill: parent
Image {
id: image
sourceSize.height: parent.height
}
Text {
id: txt;
}
}
}
main.qml
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
IconPane{
name: "Stack <b>Overflow</b>"
icon: "https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg"
anchors.centerIn: parent
}
}
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?
I'm using Qt5.9.1 . when i try to open drawer from another qml file i got error
QML Drawer: cannot find any window to open popup in
I have my drawer in drawerBottom.qml and i want to open it from tablePage.qml using a qml function call. Here is my code....
DrawerBottom.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts1.3
import QtQuick.Window 2.3
import QtQuick.Dialogs 1.2
import Qt.labs.settings 1.0
Item {
id: itemDrawerBottom
Settings {
id: settingBtm
property string style: "Default"
}
Drawer{
id: drawerBottom
Flickable{
width: 1338
height: 142
anchors.rightMargin: 8
anchors.leftMargin: 13
anchors.topMargin: 15
anchors.bottomMargin: 0
id: flickable
clip: true
anchors.fill: parent
contentWidth: flickable.width ;
contentHeight: flickable.height*1.2;
Grid {
id: gridBottom
anchors.rightMargin: 9
anchors.bottomMargin: 10
anchors.fill: parent
anchors.leftMargin: 21
anchors.topMargin: 10
columns: 2
spacing: 20
flow: Grid.LeftToRight
Component{
id: componentDrawer
Button{
id:tBtnBottom1
implicitWidth: 130
implicitHeight: 35
}
}
}
}
ScrollIndicator.vertical: ScrollIndicator { }
}
function draweropen(){
drawerbottom.open()
} }
and tablePage.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Window 2.3
import QtQuick.Dialogs 1.2
import Qt.labs.settings 1.0
Item {
id: itemtable
property Item itemDrawerBottom:DrawerBottom {}
Button {
id: button41
x: 159
y: 503
width: 20
height: 20
onClicked:{
itemDrawerBottom.draweropen()
}
}
}
and i use an application window which is in mail.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Window 2.3
import QtQuick.Dialogs 1.2
import Qt.labs.settings 1.0
ApplicationWindow {
id:mainwindow
visible: true
width:Screen.width
height: Screen.height
title: qsTr("E-eatZ")
GridLayout {
id: gridLayouttableview
x: 1048
y: 168
width: 529
height: 592
TablePage{
}
ColumnLayout {
id: columnLayout1DrawerBottom
x: -373
y: 412
width: 50
height: 348
DrawerBottom{
}
}
}
}
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
}
}
}
}
}