z元素qt qml的排序

Question

我正在努力解决问题而无法找到解决方案。 我正在用Qt开发嵌入式设备（烤箱的图形界面）。 我有一个主页面，我有一个SwipeView，里面有一个网格来显示n-tiles。 磁贴在我在主页面中调用的另一个object.qml中定义，在每个磁贴上我有一个带有3个点的图像，当您单击它时，会弹出一个弹出窗口，允许您编辑磁贴。 问题是显示这个弹出窗口，因为当我点击三点图像时，弹出对象显示在磁贴下面，我似乎无法解决这个问题。 我尝试更改z属性，但它不起作用。 无论如何，我要附上一些代码和两个界面图片。

谢谢

MyPgRecipeGrid.qml这是我的主页

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这是我构建磁贴的地方

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，这是我的弹出窗口

    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
                    }
                }
            }
        }
    }

Answer 1

只有Item { id: overlay }的最后一个main.qml，这样才可以保证在其他内容之上，并显示您的弹出窗口作为替代。

最好一次最多只有一个并以屏幕为中心以获得更好的用户体验。但是，您可以将特定的平铺位置映射到屏幕，以使弹出窗口相对于它显示。

如果弹出窗口有一个填充＆＃34;空＆＃34;区域，因此单击弹出窗口外部将关闭它。

这意味着您不必为任何手动z订购而烦恼。此外，它只适用于亲密的兄弟姐妹等，祝你在用例中取得理想的效果......

以下是一个快速示例，说明如何重复使用单个弹出菜单并将其连接到任意项以访问其功能：

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)
      }
    }
  }
}

Answer 2

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;

Answer 3

首先阅读：http://doc.qt.io/qt-5/qml-qtquick-item.html#z-prop Z物业订单兄弟项目。

这里的问题只是层次结构，尝试更改你的根，使用rect或其他而不是swipeview，并使你的swipeview和你的按钮成为孩子的。