making menubar and menu on QML

Qt Quick Control module has ApplicationWindow object that has menubar, toolbar, footer and contents areas. in this page, I will introduce how to make menubar.

first of all, we need application engine in python. so you can learn the way how to make the application object in python from how to use Qt Quick Controls in PySdie2

we need simple window like below.

import QtQuick 2.13
import QtQuick.Controls 2.13

ApplicationWindow {
    visible: true
    width: 720
    height: 480
    title: "simple window"
}

WindowApplication is invisible by default. so, we should set the visibility to true. and the properties that I used above are derived from QML Item object.

ApplicationWindow has its own properties like below.

• activeFocusControl : Control
• background : Item
• contentData : list
• contentItem : Item
• font : font
• footer : Item
• header : Item
• locale : Locale
• menuBar : Item
• palette : palette

we will focus on only menubar property of them in this page.

the way how to declare MenuBar object is like below.

import QtQuick 2.13
import QtQuick.Controls 2.13

ApplicationWindow {
    visible: true
    width: 720
    height: 480
    title: "simple window"

    menuBar: MenuBar{

    }
}

if you do it like above, you can see the empty menubar.
and then, we will add some menus to it.

import QtQuick 2.13
import QtQuick.Controls 2.13

ApplicationWindow {
    visible: true
    width: 720
    height: 480
    title: "simple window"

    menuBar: MenuBar{
        Menu{
            title: "Menu1"
        }

        Menu{
            title: "Menu2"
        }

        Menu{
            title: "&Menu3"
        }
    }
}

if you add "&" in front of the title string, first character of string is underscored.

at last, we will add some actions to empty menu.

import QtQuick 2.13
import QtQuick.Controls 2.13

ApplicationWindow {
    visible: true
    width: 720
    height: 480
    title: "simple window"

    menuBar: MenuBar{
        Menu{
            title: "Menu1"

            Action{
                text: "Action1"
                onTriggered:{
                    console.log("action1!")
                }
            }
            
            Action{
                text: "Action2"
                onTriggered:{
                    console.log("action2!")
                }
            }
        }

        Menu{
            title: "Menu2"
        }

        Menu{
            title: "&Menu3"
        }
    }
}

just declare Action object inside menu object.
Action object has triggered signal. if the action is clicked, onTriggered handler will be called. when called, I printed out the name of action to console