z元素qt qml的排序
我正在努力解决问题而无法找到解决方案。 我正在用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
}
}
}
}
}
3 个答案:
答案 0 :(得分：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)
}
}
}
}
答案 1 :(得分：1)
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;
答案 2 :(得分：0)
首先阅读：http://doc.qt.io/qt-5/qml-qtquick-item.html#z-prop Z物业订单兄弟项目。
这里的问题只是层次结构，尝试更改你的根，使用rect或其他而不是swipeview，并使你的swipeview和你的按钮成为孩子的。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？