I'm struggling with an issue and I can't find a solution.
I am developing an embedded device (a graphic interface for an oven) with Qt.
I have the main page where I have a SwipeView with a grid inside to show n-tiles.
The tile is defined in another object.qml that I call in the main page and on each tile I have an image with 3 dots and when you click on it, a popup comes out that lets you edit the tile.
The problem is showing this popup because when I click on the three-dot-image the popup object shows underneath the tile and I can't seem to solve this problem.
I tried changing the z property but it doesn't work.
Anyway, I'm gonna attach some code and two images of the interface.
Thank you
MyPgRecipeGrid.qml this is my main page
import QtQuick 2.6
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3
SwipeView {
id: view
property int numProgrammi : myVar.progCategoryRecipeGrid.count
currentIndex: 0
width:parent.width
height: parent.height*0.75
anchors.top: searchRect.bottom; anchors.topMargin: parent.height*0.025
Repeater {
id: gridRepeat
property int numgrid: ((Math.floor(view.numProgrammi/12)) + (((view.numProgrammi%12)==0) ? 0 : 1))
model: numgrid
delegate: Rectangle {
color: "transparent"
GridView {
id:grid
width: parent.width*0.95; height: parent.height
anchors.horizontalCenter: parent.horizontalCenter
clip: false
property int numPage: index
cellWidth: 190; cellHeight: 180
interactive: false
model: 12 //Draws 12 tiles
delegate: Rectangle {
width: grid.cellWidth; height: grid.cellHeight
color: "transparent"
TileCategoryRecipeGrid {
property int indicelista: ((grid.numPage * 12)+index < myVar.progCategoryRecipeGrid.count) ? ((grid.numPage * 12 )+index) : 0
visible: ((grid.numPage*12)+index) < view.numProgrammi ? true : false
nomeTypCat: qsTr(myVar.progCategoryRecipeGrid.get(indexlist).nameCategory)
urlimageTypCat: myVar.progCategoryRecipeGrid.get(indexlist).urlCategoryImage
emptyTypCat: myVar.progCategoryRecipeGrid.get(indexlist).emptyCategory
userTypCat: myVar.progCategoryRecipeGrid.get(indexlist).userCategory
}
}
}
}
}
}
TileCategoryRecipeGrid.qml this is where I build the tile
import QtQuick 2.6
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3
//Tile
Button{
id: tileCategoryRecipeGrid
width: 180; height: 172
property string myFont: myVar.medium
property string myFont2: myVar.fontTile
background: Rectangle {
anchors.fill: parent;
color: "transparent"; radius: 2
opacity: parent.down ? 0.80 : 1
clip: true
Image {
anchors.fill: parent
anchors.horizontalCenter: parent.horizontalCenter;
anchors.verticalCenter: parent.verticalCenter; anchors.verticalCenterOffset: -10
source: image
}
}
}
Button{
id: btnPoints
width: 35; height: 35
anchors.right: parent.right; anchors.rightMargin: 3
anchors.top: parent.top; anchors.topMargin: 3
background: Rectangle {
id: threePoints
anchors.fill: parent;
color: "transparent";
opacity: parent.down ? 0.25 : 1
Image {
anchors.fill: parent
source: contextMenu.visible ? "qrc:/QmlContents/IMG/close_btn.png" : "qrc:/QmlContents/IMG/threepoints.png"
}
}
onClicked: {
contextMenu.visible == false ? contextMenu.visible = true : contextMenu.visible = false
indexLocationPopup = index
}
}
Text {
id: showCookingTime
anchors.left: parent.left; anchors.leftMargin: 42
anchors.top: parent.top; anchors.topMargin: 3
text: qsTr("00:20"); color: clrPaletta.white
font.family: myFont; font.pixelSize: 20
}
contentItem: Rectangle{
anchors.fill: parent; opacity: parent.down ? 0.80 : 1
color: "transparent"
Text{
color: clrPaletta.white; opacity: 0.50
text: qsTr("cooking type")
font.family: myFont ; font.pixelSize: 17
anchors.left: parent.left ; anchors.leftMargin: parent.width*0.05
anchors.bottom: parent.bottom; anchors.bottomMargin: parent.height*0.10
}
//Popup edit tile
ContextMenuEditTile {
id: contextMenu
visible: false
x: {
switch(indexLocationPopup) {
case 0: dp(parent.width*0.60); break
case 1: -dp(parent.width-parent.width*0.70); break
case 2: -dp(parent.width-parent.width*0.70); break
case 3: dp(parent.width*0.60); break
case 4: -dp(parent.width-parent.width*0.70); break
case 5: -dp(parent.width-parent.width*0.70); break
case 6: dp(parent.width*0.60); break
case 7: -dp(parent.width-parent.width*0.70); break
case 8: -dp(parent.width-parent.width*0.70); break
case 9: dp(parent.width*0.60); break
case 10: -dp(parent.width-parent.width*0.70); break
case 11: -dp(parent.width-parent.width*0.70); break
}
}
y: {
switch(indexLocationPopup) {
case 0: dp(parent.height-parent.height*0.75); break
case 1: dp(parent.height-parent.height*0.75); break
case 2: dp(parent.height-parent.height*0.75); break
case 3: dp(parent.height-parent.height*0.75); break
case 4: dp(parent.height-parent.height*0.75); break
case 5: dp(parent.height-parent.height*0.75); break
case 6: dp(parent.height-parent.height*0.75); break
case 7: dp(parent.height-parent.height*0.75); break
case 8: dp(parent.height-parent.height*0.75); break
case 9: -dp(parent.height+parent.height*0.30); break
case 10: -dp(parent.height+parent.height*0.30); break
case 11: -dp(parent.height+parent.height*0.30); break
}
}
z: ((indexLocationPopup >= 0) && (indexLocationPopup <= 11)) ? 99 : 0
}
}
}
ContextMenuEditTile.qml and this is my popup
import QtQuick 2.7
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3
Rectangle {
id:contextMenu
width: 245; height: 265
visible: false
radius: 2;
color: clrPaletta.tileMenuclr1
ListView {
id:listView
anchors.fill: parent; clip: true;
boundsBehavior: Flickable.StopAtBounds
model: ListModel{
id: model
ListElement{ name:qsTr("Accessories"); urlImage: "qrc:/QmlContents/IMG/accessories.png" }
ListElement{ name:qsTr("Copy"); urlImage: "qrc:/QmlContents/IMG/copy.png" }
ListElement{ name:qsTr("Rename"); urlImage: "qrc:/QmlContents/IMG/rename_folder.png" }
ListElement{ name:qsTr("Modify"); urlImage: "qrc:/QmlContents/IMG/move_icon.png" }
ListElement{ name:qsTr("Delete"); urlImage: "qrc:/QmlContents/IMG/delete_folder.png" }
}
delegate: Button{
id:buttonLista
width: parent.width; height: listView.height/5
contentItem: Rectangle {
anchors.fill: parent; color: "transparent"
opacity: this.down ? 0.80 : 1
Rectangle{
width: parent.width; height: 1;
color: clrPaletta.lineTileContxMenu
anchors.bottom: parent.bottom;
visible: model.index < 4 ? true : false
}
Text {
id:testoItem
text: qsTr(name)
font.capitalization: Font.Capitalize; font.family: myVar.fontTile
color: clrPaletta.black; font.pixelSize: 18
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left; anchors.leftMargin: 65
}
Image {
id:imageList
source: urlImage
anchors.left: parent.left; anchors.leftMargin: 20
anchors.verticalCenter: parent.verticalCenter
}
}
}
}
}
Just have a Item { id: overlay } that is last in main.qml, this way it is guaranteed to be on top of the rest of the content, and show up your popup parented to the overlay.
It will be better to have at most one of those at a time and centered in the screen for better user experience. You could however map the particular tile position to the screen to have the popup appear relative to it.
It will also be nice if the popup has an underlay that fills the "empty" area, so clicking outside of the popup closes it.
This means you won't have to bother with any manual z ordering whatsoever. Besides, it would only work for close siblings and such, good luck achieving the desired results in your use case...
Here is a quick example how you could reuse a single popup menu and have it connected to an arbitrary item to access its functionality:
Window {
visible: true
width: 600
height: 300
GridView {
id: view
model: 6
anchors.fill: parent
cellWidth: 200
cellHeight: 150
delegate: Rectangle {
id: dlg
width: 200
height: 150
color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
function foo() { return index }
MouseArea {
anchors.fill: parent
onClicked: menu.item = dlg // to open the menu for this item
}
}
}
Item { // the overlay
anchors.fill: parent
visible: menu.item
MouseArea {
anchors.fill: parent
onClicked: menu.item = null // close the menu
}
Rectangle {
color: "black"
anchors.fill: parent
opacity: .5
}
Rectangle {
color: "white"
anchors.fill: menu
anchors.margins: -10
}
Column {
id: menu
anchors.centerIn: parent
property Item item: null
Button {
text: "index"
onClicked: console.log(menu.item.foo())
}
Button {
text: "color"
onClicked: console.log(menu.item.color)
}
}
}
}
You could try to create your context menu dynamically with SwipeView component set as parent:
var comp = Qt.createComponent("ContextMenuEditTile.qml");
var contextMenu = comp.createObject(view);
With this solution you do not need to struggle around with z-index values. At least when you use asynchonous Loader component the z-index will not work at all.
After creating the context menu you have to set your x and y values accordingly:
contextMenu.x = (your big switch case)
contextMenu.y = (your big switch case)
contextMenu.visible = true;
Read that first : http://doc.qt.io/qt-5/qml-qtquick-item.html#z-prop
the Z property order sibling items.
The problem here is only hierarchy, try to change your root, use rect or other instead of swipeview and make your swipeview and your button its childrens.
Related
Is there a way to call a signal from a mouseArea included in a component which is loaded somewhere else?
onClicked in the example below is not entered when i click on the rectangle.
The structure needs to remain as defined. To be able to define a qml component that applies a shadow to any source
Here is the code:
Window{
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Item
{
id: mainRectangle
anchors.centerIn: parent
width: loaderId.width + 60
height: loaderId.height + 60
Rectangle {
id: rect2
anchors.right: mainRectangle.right
anchors.top: mainRectangle.top
anchors.rightMargin: -30
anchors.topMargin: -30
width: 100
height: 100
color: "red"
opacity: 0.5
}
Loader {
id: loaderId
anchors.centerIn: parent
sourceComponent: component
active:true
}
visible: false
}
ShaderEffectSource {
id: shader
anchors.fill: mainRectangle
anchors.margins: -30
sourceItem: mainRectangle
opacity: 0.5
visible: true
}
Component {
id: component
Rectangle {
id: rect
width: 100
height: 100
color: "black"
MouseArea {
anchors.fill: parent
onClicked: {
console.log("Clicked!")
// call a signal from here
}
}
}
}
}
In the end the should show what it does now and the mouseArea should work.
onClicked in the example below is not entered when i click on the rectangle.
mainRectangle is not visible, and items that aren't visible don't get input events. Since the MouseArea is a child of mainRectangle, it won't get events either.
In the end the should show what it does now and the mouseArea should work.
Instead of hiding the source item and using ShaderEffectSource, you can set the opacity directly on mainRectangle and use item layers (the link has a similar example) to ensure that there is no overlap due to transparency:
import QtQuick 2.0
import QtQuick.Window 2.0
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Item {
id: mainRectangle
anchors.centerIn: parent
width: loaderId.width + 60
height: loaderId.height + 60
opacity: 0.5
layer.enabled: true
Rectangle {
id: rect2
anchors.right: mainRectangle.right
anchors.top: mainRectangle.top
anchors.rightMargin: -30
anchors.topMargin: -30
width: 100
height: 100
color: "red"
}
Loader {
id: loaderId
anchors.centerIn: parent
sourceComponent: component
active: true
}
}
Component {
id: component
Rectangle {
id: rect
width: 100
height: 100
color: "black"
MouseArea {
anchors.fill: parent
onClicked: {
console.log("Clicked!")
// call a signal from here
}
}
}
}
}
I've got a draggable object that is created by a Javascript, which is working fine. But when I create a PieMenu inside it, the object isn't created/visible in the Javascript context:
import QtQuick 2.8
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
import QtQml.Models 2.2
Rectangle {
id: rev
width: 100
height: 80
color: "transparent"
antialiasing: false
Drag.active: dragArea.drag.active
MouseArea {
id: dragArea
width: parent.width
height: parent.height + 10 // easier to get
anchors.centerIn: parent
drag.target: parent
drag.axis: Drag.XAndYAxis
onClicked: pieMenu.popup(mouseX, mouseY), console.log("clicked")
}
PieMenu {
id: pieMenu
MenuItem {
text: "Add vertical bar"
onTriggered: print("Action 2")
}
}
Gauge {
id: revgauge
anchors.fill: parent
anchors.margins: 10
orientation : Qt.Horizontal
minorTickmarkCount: 4
tickmarkStepSize : 5000
minimumValue: 0
maximumValue: 10000
Behavior on value {
NumberAnimation {
duration: 5
}
}
Text {
font.pixelSize: (parent.height / 3)
anchors.top : parent.top
font.bold: true
font.family: "Eurostile"
color: "white"
anchors.horizontalCenter: parent.horizontalCenter
}
style: GaugeStyle {
valueBar: Rectangle {
implicitWidth: rev.height /3
color: Qt.rgba(revgauge.value / revgauge.maximumValue, 0, 1 - revgauge.value / revgauge.maximumValue, 1)
}
}
}
}
Can Mousearea handle dragging and a PieMenu at once? If not how can it be solved?
Consider QML PieMenu boundingItem. It addresses an exact issue with MouseArea you presented.
I want to create an animated accordion-like element that expands on click. Here's how it should work.
When the user clicks one of the red rectangles, the green rectangle which is the actual content, should expand. I want this expansion to be animated. The height of the contents of the green rectangles could be different for each red header.
I have been able to implement the click-to-expand behavior, but there's no animation. Here is the code I currently have.
AccordionElement.qml
import QtQuick 2.5
import QtQuick.Layouts 1.1
ColumnLayout {
id: rootElement
property string title: ""
property bool isOpen: false
default property alias accordionContent: contentPlaceholder.data
anchors.left: parent.left; anchors.right: parent.right
// Header element
Rectangle {
id: accordionHeader
color: "red"
anchors.left: parent.left; anchors.right: parent.right
height: 50
MouseArea {
anchors.fill: parent
Text {
text: rootElement.title
anchors.centerIn: parent
}
cursorShape: Qt.PointingHandCursor
onClicked: {
rootElement.isOpen = !rootElement.isOpen
}
}
}
// This will get filled with the content
ColumnLayout {
id: contentPlaceholder
visible: rootElement.isOpen
anchors.left: parent.left; anchors.right: parent.right
}
}
And this is how it is used from the parent element:
Accordion.qml
ColumnLayout {
Layout.margins: 5
visible: true
AccordionElement {
title: "Title1"
accordionContent: Rectangle {
anchors.left: parent.left; anchors.right: parent.right
height: 20
color: "green"
}
}
AccordionElement {
title: "Title2"
accordionContent: Rectangle {
anchors.left: parent.left; anchors.right: parent.right
height: 50
color: "green"
}
}
AccordionElement {
title: "Title3"
accordionContent: Rectangle {
anchors.left: parent.left; anchors.right: parent.right
height: 30
color: "green"
}
}
// Vertical spacer to keep the rectangles in upper part of column
Item {
Layout.fillHeight: true
}
}
This produces the following result (when all rectangles are expanded):
Ideally I would like the green rectangles to roll out of the red rectangles (like paper out of a printer). But I am stuck on how to do this. I have tried several approaches using the height property, and I got the green rectangle to disappear but the white space remains under the red rectangle.
Any help would be appreciated. Is there an approach I'm missing?
Here is a quick and simple example:
// AccItem.qml
Column {
default property alias item: ld.sourceComponent
Rectangle {
width: 200
height: 50
color: "red"
MouseArea {
anchors.fill: parent
onClicked: info.show = !info.show
}
}
Rectangle {
id: info
width: 200
height: show ? ld.height : 0
property bool show : false
color: "green"
clip: true
Loader {
id: ld
y: info.height - height
anchors.horizontalCenter: info.horizontalCenter
}
Behavior on height {
NumberAnimation { duration: 200; easing.type: Easing.InOutQuad }
}
}
}
// Acc.qml
Column {
spacing: 5
AccItem {
Rectangle {
width: 50
height: 50
radius: 50
color: "blue"
anchors.centerIn: parent
}
}
AccItem {
Rectangle {
width: 100
height: 100
radius: 50
color: "yellow"
anchors.centerIn: parent
}
}
AccItem {
Rectangle {
width: 75
height: 75
radius: 50
color: "cyan"
anchors.centerIn: parent
}
}
}
You are needlessly over-complicating it with the anchors and the layouts. It doesn't seem the problem calls for any of those.
Update: I slightly refined the implementation, compared to the initial one the content would actually slide out of the header as paper out of printer rather than simply being unveiled, and also removed the source of a false positive binding loop warning.
I want to create an animated accordion-like element that expands on click. Here's how it should work.
When the user clicks one of the red rectangles, the green rectangle which is the actual content, should expand. I want this expansion to be animated. The height of the contents of the green rectangles could be different for each red header.
I have been able to implement the click-to-expand behavior, but there's no animation. Here is the code I currently have.
AccordionElement.qml
import QtQuick 2.5
import QtQuick.Layouts 1.1
ColumnLayout {
id: rootElement
property string title: ""
property bool isOpen: false
default property alias accordionContent: contentPlaceholder.data
anchors.left: parent.left; anchors.right: parent.right
// Header element
Rectangle {
id: accordionHeader
color: "red"
anchors.left: parent.left; anchors.right: parent.right
height: 50
MouseArea {
anchors.fill: parent
Text {
text: rootElement.title
anchors.centerIn: parent
}
cursorShape: Qt.PointingHandCursor
onClicked: {
rootElement.isOpen = !rootElement.isOpen
}
}
}
// This will get filled with the content
ColumnLayout {
id: contentPlaceholder
visible: rootElement.isOpen
anchors.left: parent.left; anchors.right: parent.right
}
}
And this is how it is used from the parent element:
Accordion.qml
ColumnLayout {
Layout.margins: 5
visible: true
AccordionElement {
title: "Title1"
accordionContent: Rectangle {
anchors.left: parent.left; anchors.right: parent.right
height: 20
color: "green"
}
}
AccordionElement {
title: "Title2"
accordionContent: Rectangle {
anchors.left: parent.left; anchors.right: parent.right
height: 50
color: "green"
}
}
AccordionElement {
title: "Title3"
accordionContent: Rectangle {
anchors.left: parent.left; anchors.right: parent.right
height: 30
color: "green"
}
}
// Vertical spacer to keep the rectangles in upper part of column
Item {
Layout.fillHeight: true
}
}
This produces the following result (when all rectangles are expanded):
Ideally I would like the green rectangles to roll out of the red rectangles (like paper out of a printer). But I am stuck on how to do this. I have tried several approaches using the height property, and I got the green rectangle to disappear but the white space remains under the red rectangle.
Any help would be appreciated. Is there an approach I'm missing?
Here is a quick and simple example:
// AccItem.qml
Column {
default property alias item: ld.sourceComponent
Rectangle {
width: 200
height: 50
color: "red"
MouseArea {
anchors.fill: parent
onClicked: info.show = !info.show
}
}
Rectangle {
id: info
width: 200
height: show ? ld.height : 0
property bool show : false
color: "green"
clip: true
Loader {
id: ld
y: info.height - height
anchors.horizontalCenter: info.horizontalCenter
}
Behavior on height {
NumberAnimation { duration: 200; easing.type: Easing.InOutQuad }
}
}
}
// Acc.qml
Column {
spacing: 5
AccItem {
Rectangle {
width: 50
height: 50
radius: 50
color: "blue"
anchors.centerIn: parent
}
}
AccItem {
Rectangle {
width: 100
height: 100
radius: 50
color: "yellow"
anchors.centerIn: parent
}
}
AccItem {
Rectangle {
width: 75
height: 75
radius: 50
color: "cyan"
anchors.centerIn: parent
}
}
}
You are needlessly over-complicating it with the anchors and the layouts. It doesn't seem the problem calls for any of those.
Update: I slightly refined the implementation, compared to the initial one the content would actually slide out of the header as paper out of printer rather than simply being unveiled, and also removed the source of a false positive binding loop warning.
I'm showing a message on the bottom:
Msg.qml
import QtQuick 2.4
Item {
property alias text: mf.text
anchors.fill: parent
antialiasing: false
opacity: 0.9
z: 100
MsgForm {
id: mf
width: parent.width
y: parent.height - height - 5
}
}
MsgForm.ui.qml
import QtQuick 2.4
Item {
property alias text: msg.text
width: 200
id: message
height: msg.height+10
Rectangle {
id: rectangle
color: "#fb9191"
anchors.fill: parent
border.color: "#fd6666"
border.width: 2
Text {
id: msg
anchors.top: parent.top
anchors.topMargin: 2
textFormat: Text.PlainText
anchors.right: parent.right
anchors.rightMargin: 4
anchors.left: parent.left
anchors.leftMargin: 4
wrapMode: Text.WordWrap
clip: false
font.bold: true
font.pointSize: 12
font.family: "Tahoma"
}
}
}
How can I animate the form to appear from the bottom smoothly?
After the animation, if the window resizes, the message must stay always on the bottom.
You can play with anchors.bottomMargin property to raise the message item from the bottom.
import QtQuick 2.4
Item {
property alias text: mf.text
anchors.fill: parent
antialiasing: false
opacity: 0.9
z: 100
MsgForm {
id: mf
property bool showing: false
width: parent.width
anchors{
bottom: parent.bottom
bottomMargin: mf.showing ? 0 : -mf.height
Behavior on bottomMargin{
NumberAnimation{ }
}
}
}
}
Thanks everyone. In the end I've solved the issue by following advices received in the qtcentre forum.
The desired effect can be achieved easily by defining a local numerical property that is use to bind to either an anchors.XXXXmargin or the y property expression.
Following this approach a possible solution is the following:
MsgForm {
property bool showing: false
property int position: showing ? height : 0
width: parent.width
y: parent.height - position
Behavior on position {
NumberAnimation {duration: 500}
}
}
You can make an animation on the opacity change:
Msg.qml
import QtQuick 2.4
Item {
property alias text: mf.text
anchors.fill: parent
antialiasing: false
opacity: 0.9
z: 100
MouseArea{
anchors.fill: parent
onClicked: mf.opacity = !mf.opacity
}
MsgForm {
id: mf
//y: parent.height - height - 5
opacity:0
Behavior on opacity {
NumberAnimation{
duration:600
}
}
width: parent.width
anchors.bottom: parent.bottom
}
}
or any other NumberAnimation. I recommand you to create States, within it do some propertyChanges, and on some actions, example button clicked change states.
example in your MsgForm.ui.qml add:
MouseArea{
anchors.fill: parent
onClicked: mf.state= "show"
}
and in the action, example:
in my mouseArea I change the state of mf
MouseArea{
anchors.fill: parent
onClicked: mf.state= "show"
}
If you want an Animation on the y try this:
MsgForm.ui.qml
import QtQuick 2.4
Item {
id: message
property alias text: msg.text
width: parent.width
height: msg.height+10
Rectangle {
id: rectangle
color: "#fb9191"
anchors.fill: parent
border.color: "#fd6666"
border.width: 2
Text {
id: msg
anchors.top: parent.top
anchors.topMargin: 2
textFormat: Text.PlainText
anchors.right: parent.right
anchors.rightMargin: 4
anchors.left: parent.left
anchors.leftMargin: 4
wrapMode: Text.WordWrap
clip: false
font.bold: true
font.pointSize: 12
font.family: "Tahoma"
}
}
Behavior on y {
NumberAnimation{
duration:300
}
}
states: [
State {
name: "show"
PropertyChanges {
target: message
y: parent.height - height
}
},
State {
name: "hide"
PropertyChanges {
target: message
y: parent.height + height + 5
}
}
]
}
Msg.qml
import QtQuick 2.4
Rectangle {
property alias text: mf.text
width:800
height: 480
antialiasing: false
opacity: 0.9
z: 100
MouseArea{
anchors.fill: parent
onClicked: mf.state= "show"
}
MsgForm {
id: mf
//y: parent.height - height - 5
y: parent.height +height + 5
width: parent.width
}
}