[Solved] Menu component “falling” from center of the page instead of emerging from bottom
Hi, Menu components in MeeGo Harmattan apps pre-installed in the N9 emerge from the bottom of the display. However, in my app appears at the center of the display and then “falls” until hitting the ToolBar. I haven’t been able to find anything special in my code instructing that, neither I have found in the docs any reference to different animations for Menu components to show up.
For what is worth this is the structure of the code:
- ToolBar {
- tools: ToolBarLayout {
- ToolIcon {
- id: backIcon
- iconId: "toolbar-back";
- onClicked: {
- exitMenu.open()
- }
- Menu {
- id: exitMenu
- MenuLayout {
- MenuItem { ... }
- MenuItem { ... }
- MenuItem { ... }
- MenuItem { ... }
- }
- }
- }
The qml file can be found at http://gitorious.org/miniature/miniature/blobs/master/src/frontend/OnlineBoard.qml
6 replies
Yes, the ToolBar contains already
- anchors.bottom: parent.bottom
otherwise the Page is not usable at all (? but this is irrelevant here).
I found your idea interesting and I added “anchors.bottom: parent.bottom” to the rest of components involved, but the problem stays. Somehow the Menu wants to appear at the middle of the screen instead of emerging from the bottom…
Please also try creating the Menu outside of the ToolBar so that the Page is its parent element. Then no anchors should be needed.
THAT WAS IT! Thank you very much.
Putting the Menu outside the toolbar as a child of Page makes it behave just like it should, without needing to anchor it anywhere.
So simple. And so not-evident. It doesn’t make much sense to me but then again I’m not a compiler. ;)
Thanks again!
For the records: Creating a ToolBar on your own is not needed in most cases.
Following code should run fine:
- Page {
- // The actual content
- Rectangle {
- anchors.fill: parent
- color: "red"
- }
- tools: ToolBarLayout {
- Item {}
- ToolIcon {
- iconId: "toolbar-view-menu"
- onClicked: menu.open()
- }
- }
- Menu {
- id: menu
- MenuLayout {
- MenuItem {
- text: "hello"
- }
- }
- }
- }
Oh, I see. Another thing I’ve learned.
I still don’t think I have got everything clear out of the loop of docs PageStackWindow – PageStack – Page – ToolBar – ToolBarLayout – tools… The principle and outcome is simple, yet at this point the docs themselves are more complex than needed. Looking forward to see a simplifications as soon as the com.nokia.meego stuff gets assimilated in Qt Quick components upstream.
Anyway, not an excuse for me. I’m looking again at the examples provided at http://harmattan-dev.nokia.com/docs/library/html/qt-components/qt-components-meego-menu.html and they keep tool and menu separate.
You must log in to post a reply. Not a member yet? Register here!