ListView inside Menu

Archie888

In the doc it says:

contentModel : model

This property holds the model used to display menu items.

The content model is provided for visualization purposes. It can be assigned as a model to a content item that presents the contents of the menu.

Menu {
    id: menu
    contentItem: ListView {
        model: menu.contentModel
    }
}

The model allows menu items to be statically declared as children of the menu.

(Source: https://doc.qt.io/qt-6/qml-qtquick-controls2-menu.html#contentModel-prop )

--> Are there any working examples of doing this? I can't get it working in my tests.

Archie888

I finally got it rendering, I used anchors.fill: parent on the ListView, which caused nothing to be rendered.

This will render the same as when the ListView is not used:

    Menu {
        id: testMenu
        width: 150;
        height: 150

        MenuItem {
            text: "New..."
        }
        MenuItem {
            text: "Open..."
        }
        MenuItem {
            text: "Save"
        }

        contentItem: ListView {
            model: testMenu.contentModel
        }
    }

Why would I want to do that? I assume that the point is to use a delegate in the ListView to render imaginary menu elements, no? But adding the delegate, nothing is rendered:

    Menu {
        id: testMenu
        width: 150;
        height: 150

        MenuItem {
            text: "New..."
        }
        MenuItem {
            text: "Open..."
        }
        MenuItem {
            text: "Save"
        }

        contentItem: ListView {
            model: testMenu.contentModel
            delegate: Rectangle {
                color: "blue"
                width: 150
                height: 30
                Text { text: modelData.text }
            }
        }
    }

EDIT:

Ok, added anchors.fill: parent to the delegate, and it started rendering. Now it renders exactly also like when the ListView is not used, and the delegate is not showing at all, it is just a normal menu:

Menu {
        id: testMenu
        width: 150;
        height: 150
        title: qsTr("TestMenu Root")

        MenuItem {
            text: "New..."
        }
        MenuItem {
            text: "Open..."
        }
        MenuItem {
            text: "Save"
        }

        contentItem: ListView {
            model: testMenu.contentModel
            delegate: Rectangle {
                anchors.fill: parent
                color: "blue"
                width: 150
                height: 30
                Text { text: modelData.text }
            }
        }
    }

What is the point, and is there some use for this ListView as contentItem mechanic? The delegate seems not to be used.

EDIT 2:

Ok, so it looks like the ListView can be used to modify how the MenuItems flow and so on, by setting properties and so on. A horizontal menu can be achieved like this:

    Menu {
        id: testMenu
        width: 150;
        height: 150
        title: qsTr("TestMenu Root")

        MenuItem {
            text: "New..."
        }
        MenuItem {
            text: "Open..."
        }
        MenuItem {
            text: "Save"
        }

        contentItem: ListView {
            model: testMenu.contentModel
            orientation: Qt.Horizontal
        }
    }

However, the ListView delegate can't be used, and I am not sure how to customize MenuItem visuals in other ways without rolling out your own menus.

EDIT 3:

Ok, found how to do that, but mildly disappointed that the ListView delegate can't be used.

The trick is to set up a custom MenuItem as the delegate of the Menu itself.

https://doc.qt.io/qt-6/qtquickcontrols2-customize.html#customizing-menu

Anyways, I hope this thread helps someone who is wondering about the same thing.

dheerendra

What is not working ? Minimal example would help. You can create few menuitems and assign the listView as content item. Menu will be like a listView style with menuitem as added.

Archie888