如何将对话框锚定到listview qt qml中的按钮

Question

我有一排带有按钮的列表视图委托。单击按钮时，我需要在该按钮下方打开一个对话框。我尝试了 mapToItem 属性并部分成功，但此列表视图是可滚动的，并且在滚动对话框时，它会保持在其初始位置。不确定如何让它工作。此外，发布问题的新手。如果我含糊不清，请忽略并帮助我。

我要打开的对话框位于此委托之外。我提供了我的代码的简短大纲。

Listview{
delegate: Row{
  Button1{
   }
  Button2{
   id: button2Id
   onCheckedChanged{
    var coords = button2Id.mapToItem(null,0,0)
    dialogId.x = coords.x
    dialogId.y= coords.y 
    dialogId.visible = true
    }
  }
 }
}

//dialog rect outside of my listview
Rectangle{
id: dialogId
}

Answer 1

您可以将对话框添加到列表的突出显示项。我对您的示例进行了一些修改，以便可以对其进行测试。我将您的Rectangle 封装在Item 中，因为ListView 控制突出显示的根对象的大小和位置。然后Rectangle 只需锚定到Item 的底部。

    ListView {
        id: lv
        width: 200
        height: parent.height
        model: 50
        spacing: 1
        currentIndex: -1
        delegate: Row {
            spacing: 1
            height: 40
            Button {
                text: index
            }
            Button {
                id: button2Id
                text: ">"
                onClicked: {
                    lv.currentIndex = index;
                }
            }
        }

        highlight: Item {  // ListView controls the size/pos of this Item
            z: 1

            Rectangle {
                id: dialogId
                anchors.top: parent.bottom  // Anchor to bottom of parent
                width: 200
                height: 100
                color: "red"
            }
        }
    }

更新：

这是一种使对话框直接位于按钮下方而不计算边距的方法。我把它放在Loader 中，这样列表中的每个项目并不总是随身携带整个对话框。它可能会产生性能差异。

这个解决方案的丑陋部分是 z 排序。列表中的每个项目都绘制在它之前的项目之后。 （我实际上不确定这是否得到保证。）这意味着对话框会被绘制在列表中它之后的任何项目下方。我可以通过将列表中每个项目的 z 值更改为小于它之前的项目来解决这个问题。

ListView {
    id: lv
    width: 200
    height: parent.height
    model: 50
    spacing: 1
    currentIndex: -1
    delegate: Row {
        z: lv.count - index // <<- z-value fix
        spacing: 1
        height: 40
        Button {
            text: index
        }
        Button {
            id: button2Id
            text: ">"
            onClicked: {
                lv.currentIndex = index;
            }

            Loader {
                anchors.top: parent.bottom
                asynchronous: true
                sourceComponent: (index === lv.currentIndex) ? dialogComp : null
            }
        }
    }
}

Component {
    id: dialogComp
    Rectangle {
        id: dialogId
        width: 200
        height: 100
        color: "red"
    }
}