z Bestellung von Elementen qt qml

Question

Ich kämpfe mit einem Problem, und ich kann keine Lösung finden. Ich entwickle ein Embedded-Gerät (eine grafische Schnittstelle für einen Ofen) mit Qt. Ich habe die Hauptseite, wo ich ein SwipeView mit einem Gitter nach innen habe, um n-Fliesen zu zeigen. Die Kachel wird in einer anderen object.qml definiert, die ich auf der Hauptseite anrufe. Auf jeder Kachel habe ich ein Bild mit 3 Punkten und wenn Sie darauf klicken, erscheint ein Popup, mit dem Sie die Kachel bearbeiten können. Das Problem zeigt dieses Popup, denn wenn ich auf das Drei-Punkt-Bild klicke, erscheint das Popup-Objekt unterhalb der Kachel und ich kann dieses Problem nicht lösen. Ich habe versucht, die z-Eigenschaft zu ändern, aber es funktioniert nicht. Wie auch immer, ich werde etwas Code und zwei Bilder der Schnittstelle anhängen.

Danke

MyPgRecipeGrid.qml das ist mein Haupt-Seite

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 das ist, wo ich die Fliese

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

ContextMen bauen uEditTile.qml und das ist mein 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 
        } 
       } 
      } 
     } 
    } 

Answer 1

Nur ein Item { id: overlay } haben, die in main.qml, auf diese Weise zuletzt ist es garantiert auf dem Rest des Inhalts zu sein, und Ihr Popup mit dem Overlay parented zeigen .

Es wird besser sein, höchstens eine von denen zu einer Zeit und zentriert auf dem Bildschirm für eine bessere Benutzererfahrung zu haben. Sie könnten jedoch die bestimmte Kachelposition dem Bildschirm zuordnen, damit das Popup relativ dazu angezeigt wird.

Es ist auch schön, wenn das Popup eine Unterlage hat, die den "leeren" Bereich ausfüllt, also schließt das Klicken außerhalb des Popups es.

Dies bedeutet, dass Sie sich nicht mit irgendeiner manuellen z-Bestellung beschäftigen müssen. Außerdem würde es nur für enge Geschwister und so, viel Glück beim Erreichen der gewünschten Ergebnisse in Ihrem Anwendungsfall funktionieren ...

Hier ist ein kurzes Beispiel, wie Sie ein einzelnes Popup-Menü wiederverwenden und es mit einem beliebigen Element verbinden können seine Funktionalität zuzugreifen:

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

lesen, dass zuerst: http://doc.qt.io/qt-5/qml-qtquick-item.html#z-prop die Z Eigenschaft Auftragspositionen Geschwister.

Das Problem hier ist nur Hierarchie, versuchen Sie, Ihre Root zu ändern, verwenden Sie rect oder andere anstelle von swipeview und machen Sie Ihre swipeview und Ihre Schaltfläche ihre Kinder.

Answer 3

Sie könnten versuchen, das Kontextmenü mit SwipeView Komponente gesetzt als Mutter dynamisch zu erstellen:

var comp = Qt.createComponent("ContextMenuEditTile.qml"); 
var contextMenu = comp.createObject(view); 

Mit dieser Lösung müssen Sie nicht mit z-Index-Werten kämpfen um. Zumindest wenn Sie die asynchrone Loader Komponente verwenden, wird der Z-Index überhaupt nicht funktionieren.

Nach dem Kontextmenü Erstellen Sie Ihre x- und y-Werte entsprechend einstellen:

contextMenu.x = (your big switch case) 
contextMenu.y = (your big switch case) 
contextMenu.visible = true;