Menu outside MenuBar?

pawelp

Hi!
documentation about Menu (http://qt-project.org/doc/qt-5.1/qtquickcontrols/qml-qtquick-controls1-menu.html#details) says I can use Menu as standalone component or context menu or as component in MenuBar, but I managed to make it work only in last case - in MenuBar. It's really possible as docs says? or maybe I can use MenuBar in other places than ApplicationWindow's menuBar property?

Jens

If you try the "gallery" example there is a context menu when you right click the TextArea. This should give some pointers as to how you can create one.

pawelp

Thanks, context menu is working, but I want to place a few Menus or a MenuBar in other place than ApplicationWindow’s menuBar property. For example can I somehow add Menus or a MenuBar to a Rectangle?

Jens

You cannot create menubar outside of application window. The main reason is that some platforms don't position the menuBar in the window at all. (i.e mac and ubuntu)

If you need a non native menu-bar like item, you can create a fake menubar using menu buttons. Here is a rough sketch of what it might look like:

@
import QtQuick 2.2
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.0

Rectangle {
width: 600
height: 400
Rectangle {
id: fakeMenuBar
height: 21
width: parent.width
gradient: Gradient{
GradientStop{color: "#fff" ; position:0}
GradientStop{color: "#eee" ; position:1}
}
Rectangle {
color: "#777"
height: 1 ; width: parent.width
anchors.bottom: parent.bottom
}
Row {
id: menuBar
Repeater {
model: 4
Button {
text: "Menu " + index
height: 20
width: 100
style: ButtonStyle {
background: Rectangle { color: control.pressed ? "#ccc" : "transparent" }
}
menu: Menu {
MenuItem { text: "item 1" }
MenuItem { text: "item 2" }
MenuItem { text: "item 3" }
}
}
}
}
}
}
@

pawelp

Awesome, but in your solution each button is working separately - I mean typically (e.g. in MenuBar) when you press one of menu buttons, then until you clicked outside of the menu, when you move mouse around other buttons, other menus are showing when those buttons are hovered.

I managed to get it working like a normal menu, but it's done a bit hacky (in short: MouseArea in each Button and using onEntered and some JS functions). Can you get MenuBar like behavior in a simpler way?

Thanks for your clues so far!