QML mobile app with context menus

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()
      }
    }

I have written my own implementation that is similar to iOS's action sheets. It's basically just a menu that pops up with a similar animation at the bottom of the screen and dims the rest of the application. However, I haven't found a way to use the native action sheets though. If you are more worried about UI conventions then the native "look" (i.e. "feel" is more important), this might be a satisfactory alternative. — ContingencyCoder
@contingencycoder Interesting, do you have a link I could check out? — jp36
I will scrounge around on my development drive and see if I can find the QML file. :) — ContingencyCoder
No, I'm afraid not. What you can do is have a rectangle that contains your menu off-screen, and have a JS method that gets values in addition to popping the menu up. Set the rectangle's y-offset to the screen height, have an animation that a) moves the menu up b) activates a rectangle with a semi-transparent gray to signal that it's modal. Optionally, you can put a mouse area on this big rectangle so that when the user clicks it, the menu disappears. Otherwise, have the mouse area to block clicks to underlying elements. Other than that, style the rectangle to your liking. Sound good? — ContingencyCoder

bootchk bootchk · Accepted Answer · 2014-10-16T12:24:20

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?

QML mobile app with context menus

2 Answers