如何将对话框锚定到列表视图中的按钮 qt qml

Question

I have a row for a listview delegate with buttons on it. On click of a button, i need a dialog to open just below that button. I tried mapToItem property and partially succeeded but this listview is scrollable and on scrolling the dialog stays in its initial position. Unsure of how to get it working. Also, new to posting questions. Kindly ignore if I am being vague and help me out.

The dialog i want to open is placed outside of this delegate. I have provided a short outline of my code.

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

You could add the dialog to the highlight item of the list. I have modified your example a little so that I could test it. I encapsulated your Rectangle in an Item because ListView controls the size and position of the root object of the highlight. The Rectangle then just has to be anchored to the bottom of that 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"
            }
        }
    }

UPDATE:

Here is a way to keep the dialog directly under the button without calculating margins. I put it in a Loader so that each item in the list doesn't always carry the whole dialog around with it. It might make a performance difference.

The ugly part of this solution is the z-ordering. Each item in the list is drawn after the one that comes sequentially before it. (I'm not actually sure if that's even guaranteed.) That means the dialog gets drawn underneath any item that comes after it in the list. I was able to get around that by changing the z value of each item in the list to be less than the item before it.

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