Question

I want to create a mobile app (with possible desktop use) that uses a context menu and has as close to a native look and feel as possible for both Android and iOS. (This is my first foray into both Qt and QML.)

I figured out how to create a Menu and call myMenu.popup() to show the context menu. And in Android this context menu looks very similar to a native android context menu. This context menu also looks native on the desktop. The problem comes with iOS.

iOS has a similar concept to context menus called actionsheets. Examples. But the contextMenu looks like a windows context menu (right click menu) floating on the window.

tl;dr;

Is there a way to get the Menu in qml to look similar to iOS actionsheets when run on a iOS device? I have searched for hours today and can't find anything.

code:

The Menu code is mostly copied from the Qt docs just to see how things look and work

Menu
{
    id: myContextMenu
    title: "Edit"

        MenuItem {
            text: "Cut"
            onTriggered: {console.log("cut")}
        }

        MenuItem {
            text: "Copy"
            onTriggered: {console.log("copy")}
        }

        MenuItem {
            text: "Paste"
            onTriggered: {console.log("paste")}
        }

        MenuSeparator { }

        Menu {
            title: "More Stuff"

            MenuItem {
                text: "Do Nothing"
            }
        }
}
MouseArea {
      id: longPressArea
      anchors.fill: text
      onClicked: {
          myContextMenu.popup()
      }
    }
Was it helpful?

Solution

Summarizing the comments above: No, not in the current version of Qt, unless you roll your own in QML.

Quick Controls uses one of [native, QWidget, QML] implementations, whichever is found first. You can read the source to see that there is no native implementation: grep for createPlatformMenu() in Qt/../Src/qtbase/src/plugins/platforms/ios. Thats where the adaptors to native widgets are.

Another answer is: you could contribute by creating the adaptor to the native widget for iOS (if you are an iOS and C++ programmer.) Also assuming that a UIActionSheet is the proper widget to adapt (it seems so.)

I suppose your concern is that a centered menu (instead of a native one that animatedly slides onto the screen like a drawer, the feel) doesn't meet the HIG (or that the style/look is wrong.) Thats a moving target. The iOS8 documentation under showInView seems to say a centered popup menu is an option (at least on iPad, its unclear whether it would work on a phone.) And its fuzzy what the store would reject.

Isn't that an intended benefit of QML: you could provide different skins for tablet and phone?

OTHER TIPS

With Qt Labs, since Qt5.8, you can get native looking menus on macOS, iOS, Android and Linux (gtk+). Haven't tried it myself yet, but you can take a look: https://doc.qt.io/qt-5.12/qml-qt-labs-platform-menu.html

You need to import Qt.labs.platform 1.1, link against widgets with QT += widgets and use a QApplication instead of QGuiApplication.

For comparison, here is also the stable menu from qml which does not try to look native. https://doc.qt.io/qt-5.12/qml-qtquick-controls2-menu.html

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top