QML - элемент ListView, который отображает меню при нажатии

Я ищу несколько советов и указателей по отображению меню под элементом списка, когда пользователь нажимает на элемент.

Если у меня есть ListModel вроде этого:

ListModel {
    ListElement {
        name: "Bill Smith"
        number: "555 3264"
    }
    ListElement {
        name: "John Brown"
        number: "555 8426"
    }
    ListElement {
        name: "Sam Wise"
        number: "555 0473"
    }
}

Затем ListView вот так:

Rectangle {
    width: 180; height: 200

    Component {
        id: contactDelegate
        Item {
            width: 180; height: 40
            Column {
                Text { text: '<b>Name:</b> ' + name }
                Text { text: '<b>Number:</b> ' + number }
            }
        }
    }

    ListView {
        anchors.fill: parent
        model: ContactModel {}
        delegate: contactDelegate
        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
        focus: true
    }
}

Затем, когда пользователь нажимает на элемент, я хочу отобразить меню:

Menu {
    id: menu
    MenuItem { text: "item1" }
    MenuItem { text: "item2"; }
    MenuItem { text: "item3"; }
}

Глядя на некоторые другие образцы QML, я нашел код, который добавляет MouseArea и позиционирует меню в зависимости от высоты и ширины Window - Menu:

MouseArea {
    anchors.fill: parent
    onClicked: {
        menu.x = (window.width - menu.width) / 2
        menu.y = (window.height - menu.height) / 2
        menu.open();
    }
}

Однако я изо всех сил пытаюсь заставить его работать, может ли кто-нибудь указать мне правильное направление?


qt qml qtquick2 qt5 qt-quick
person CLiown    schedule 19.02.2018    source источник
comment
Вы можете объяснить, что хотите получить, ваше объяснение можно интерпретировать по-разному.   -  person eyllanesc    schedule 20.02.2018
comment
Я бы хотел, чтобы меню располагалось под выбранным элементом списка. Прямо под ним.   -  person CLiown    schedule 20.02.2018
comment
Где вы разместили код MouseArea?   -  person Jake Stoeffler    schedule 20.02.2018

Ответы (1)


arrow_upward
1
arrow_downward

Если установлено, что родительским элементом Меню является ListView, тогда достаточно будет только установить относительное положение элемента, нажатого через mapToItem:

Rectangle {
    width: 180; height: 200

    Component {
        id: contactDelegate
        Item {
            width: 180; height: 40
            Column {
                Text { text: '<b>Name:</b> ' + name }
                Text { text: '<b>Number:</b> ' + number }
            }

            MouseArea{
                anchors.fill: parent
                onClicked:  {
                    var pos = mapToItem(listView, 0, height)
                    menu.x = pos.x
                    menu.y = pos.y
                    menu.open()
                }
            }
        }
    }

    ListView {
        id: listView
        objectName: "list"
        anchors.fill: parent
        model: ContactModel{}
        delegate: contactDelegate
        focus: true

        Menu {
            id: menu
            MenuItem { text: "item1" }
            MenuItem { text: "item2"; }
            MenuItem { text: "item3"; }
        }

    }
}

Полный пример можно найти по следующей ссылке.

person eyllanesc    schedule 19.02.2018