z要素の順序付けqt qml

Question

私は問題に苦しんでおり、解決策を見つけることができません。 Qtを使って組み込み機器（オーブン用のグラフィックインターフェイス）を開発しています。 メインページにスワイプビューがあり、そこにグリッドがあり、nタイルを表示しています。 タイルは、私がメインページで呼び出す別のobject.qmlで定義されています。各タイルに3ドットの画像があります。クリックすると、タイルを編集できるポップアップが表示されます。 3ドットイメージをクリックすると、ポップアップオブジェクトがタイルの下に表示され、この問題を解決できないように見えるため、このポップアップが表示されています。 zプロパティを変更しようとしましたが、動作しません。とにかく、私はいくつかのコードとインターフェイスの2つの画像を添付するつもりです。

は、私がタイルに

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を構築する場所です、これは私のメインページ

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ある

MyPgRecipeGrid.qmlありがとうuEditTile.qmlこれはちょうどmain.qmlの最後でItem { id: overlay }、オーバーレイを親コンテンツの残りの部分の上にあることが保証され、あなたのポップアップが表示され、この方法を持っている私のポップアップ

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

です。

ユーザーエクスペリエンスを向上させるためには、一度に最大1つを持ち、画面の中央に配置する方がよいでしょう。ただし、特定のタイルの位置を画面にマッピングして、ポップアップを相対的に表示させることができます。

ポップアップにアンダーレイが「空の」領域を埋めるので、ポップアップの外側をクリックすると閉じます。

これは、マニュアルz注文を気にする必要がないことを意味します。あなたのユースケースで望ましい結果を達成する幸運と、近い兄弟のためだけに働くでしょう...

ここでは、単一のポップアップメニューを再利用して、任意の項目アイテム兄弟http://doc.qt.io/qt-5/qml-qtquick-item.html#z-prop 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

読む：その機能にアクセスします。

ここでの問題は階層だけです。ルートを変更してみてください。スワイプビューの代わりにrectやその他を使用してスワイプビューとボタンを子どもにしてください。

Answer 3

あなたは親として設定SwipeViewコンポーネントを動的にコンテキストメニューを作成しようとすることができます：

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

このソリューションでは、あなたは、zインデックス値の周り苦労する必要はありません。少なくとも非同期のLoaderコンポーネントを使用すると、Zインデックスはまったく機能しません。

あなたがそれに応じて、xとyの値を設定する必要がコンテキストメニューを作成した後：

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