[QT] Menu & Dynamic Menu

๐Ÿ‘‰๐Ÿป QML์—์„œ ๋ฉ”๋‰ด๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์„ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.
Explains how to create a menu in QML.

๐Ÿ‘‰๐Ÿป ์„ค๋ช…์€ ์ฃผ์„์„ ์ฐธ๊ณ  ํ•˜์„ธ์š”
Please refer to the comments for explanation.

โœ”๏ธMain.cpp

— Main.cppํŒŒ์ผ์€ ์ˆ˜์ •ํ•˜์ง€ ์•Š์•„๋„ ๋ฉ๋‹ˆ๋‹ค.
You do not need to modify the Main.cpp file.

โœ”๏ธMain.qml

import QtQuick
import QtQuick.Controls

// QML์—์„œ ApplicationWindow ์‚ฌ์šฉ ์ถ”์ฒœ
// Recommended to use ApplicationWindow in QML
ApplicationWindow {
    width: 400
    height: 300
    visible: true
    title: "Menu Example"

    // == ์ปดํฌ๋„ŒํŠธ ๋ฉ”๋‰ด / Component Menu ==
    menuBar: AppMenuBar {}

    // ํ…์ŠคํŠธ ์ „์ฒด ์ •๋ ฌ / Align entire text
    Text {
        text: "Center Text"
        anchors.centerIn: parent
    }

    // ์ˆ˜ํ‰๋งŒ ์ค‘์•™ ์ •๋ ฌ / Center alignment only horizontally
    Text {
        text: "horizontalCenter"
        anchors.horizontalCenter: parent.horizontalCenter
        // anchors.left๊ฐ€ ์žˆ์–ด์•ผ leftMargin์ด ์ ์šฉ๋จ.
        anchors.top: parent.top
        anchors.topMargin: 50

    }

    // ์ˆ˜์ง ์ค‘์•™ ์ •๋ ฌ / vertical center alignment
    Text {
        text: "Vertical Center"
        anchors.verticalCenter: parent.verticalCenter
        // anchors.left๊ฐ€ ์žˆ์–ด์•ผ leftMargin์ด ์ ์šฉ๋จ.
        anchors.left: parent.left
        anchors.leftMargin: 30
    }
}

โœ”๏ธ NewWindow.qml

import QtQuick
import QtQuick.Controls

/*-----------------------------------------------------------------------------------------------

    -- ๋™์  ๋ฉ”๋‰ด  / Dynamic Menu--
    ์ด ์ฐฝ ๋‚ด์—์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ •์˜ํ•˜๊ณ  ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ๋ฉ”๋‰ด๋ฅผ ๊ต์ฒดํ•˜๋Š” ๋ฉ”๋‰ด
    A menu that defines components within this window and replaces them when a button is clicked.

-------------------------------------------------------------------------------------------------*/

ApplicationWindow {
    id: root
    width: 400
    height: 300
    visible: true
    title: "Dynamic Menu Example"

    property bool adminMode: false

    //  ๋ฉ”๋‰ด๋ฅผ ์‹ค์ œ๋กœ ๋ณด์—ฌ์ฃผ๋Š” ๊ณณ / Where the menu actually appears
    menuBar: Loader {
        id: menuLoader
        sourceComponent: adminMode ? adminMenu : normalMenu
    }

    // ์ผ๋ฐ˜ ์‚ฌ์šฉ์ž ๋ฉ”๋‰ด / General user menu
    Component {
        id: normalMenu
        MenuBar {
            Menu {
                title: "File"
                MenuItem {
                    text: "Open"
                    onTriggered: console.log("Open clicked (normal user)")
                }
                MenuItem {
                    text: "Exit"
                    onTriggered: Qt.quit()
                }
            }
            Menu {
                title: "Help"
                MenuItem {
                    text: "About"
                    onTriggered: console.log("About clicked (normal user)")
                }
            }
        }
    }

    //  ๊ด€๋ฆฌ์ž ๋ฉ”๋‰ด / Administrator Menu
    Component {
        id: adminMenu
        MenuBar {
            Menu {
                title: "Admin"
                MenuItem {
                    text: "User Management"
                    onTriggered: console.log("User management clicked (admin)")
                }
                MenuItem {
                    text: "System Log"
                    onTriggered: console.log("System log clicked (admin)")
                }
            }
            Menu {
                title: "Tools"
                MenuItem {
                    text: "Diagnostics"
                    onTriggered: console.log("Diagnostics clicked (admin)")
                }
            }
        }
    }

    //  ๋ฒ„ํŠผ์œผ๋กœ ๋ฉ”๋‰ด ๊ต์ฒด / Change menu with buttons
    Button {
        text: adminMode ? "Switch to Normal Menu" : "Switch to Admin Menu"
        anchors.centerIn: parent
        onClicked: adminMode = !adminMode
    }
}

โœ”๏ธ AppMenuBar.qml

import QtQuick
import QtQuick.Controls

// == ์ด AppMenuBarํŒŒ์ผ์ด ํ•˜๋‚˜์˜ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋จ / This AppMenuBar file becomes a component ==

    MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("Open")
                onTriggered: console.log("Open clicked")
            }
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit()
            }
        }
        Menu {
            title: qsTr("Edit")
            MenuItem {
                text: qsTr("Write")
                onTriggered: console.log("Write clicked")
            }
            MenuItem {
                text: qsTr("Action")
                onTriggered: Qt.quit()
            }
        }

        Menu {
            title: qsTr("View")
            MenuItem {
                text: qsTr("Show left sidebar")
                onTriggered: console.log("About clicked")
            }
            MenuItem {
                text: qsTr("Show right sidebar")
                onTriggered: console.log("About clicked")
            }
        }
        Menu {
            title: qsTr("Window")
            MenuItem {
                text: qsTr("Open New Window")
                onTriggered: {
                    console.log("Open New Window clicked")

                    // ์ƒˆ ์ฐฝ ์ปดํฌ๋„ŒํŠธ ์ƒ์„ฑ, ๋ฉ”๋‰ด์„ ํƒ์‹œ ์ƒˆ์ฐฝ ์˜คํ”ˆ
                    // Create a new window component, open a new window when a menu is selected
                    const comp = Qt.createComponent("NewWindow.qml")
                    if (comp.status === Component.Ready) {
                        const win = comp.createObject(null)
                        if (win) win.show()
                    } else {
                        console.error("Component load error:", comp.errorString())
                    }
                }
            }
            MenuItem {
                text: qsTr("Show right sidebar")
                onTriggered: console.log("About clicked")
            }
        }
        // ๋งฅos์—์„œ๋Š” help๋‚˜ ์ด๋ฆ„์ด ์ด์ƒํ•˜๋ฉด ๋ฉ”๋‰ด๊ฐ€ ์•ˆ ๋‚˜ํƒ€๋‚  ์ˆ˜ ์žˆ์Œ
        // In macOS, the menu may not appear if the help or name is strange.
        Menu {
            title: qsTr("help center")
            MenuItem {
                text: qsTr("Record list")
                onTriggered: console.log("About clicked")
            }
            MenuItem {
                text: qsTr("Record help")
                onTriggered: console.log("About clicked")
            }
        }
    }

โœ”๏ธ CMakeList.txt

— qmlํŒŒ์ผ์ด ์•„๋ž˜์˜ ์ฝ”๋“œ์ฒ˜๋Ÿผ ๋“ฑ๋ก๋˜์–ด ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
The qml file must be registered as shown in the code below.

qt_add_qml_module(appMenu
    URI Menu
    VERSION 1.0
    QML_FILES
        Main.qml
        AppMenuBar.qml
        NewWindow.qml
)

โœ”๏ธ ์Šคํฌ๋ฆฐ์ƒท / ScreenShot

Leave a Reply

Your email address will not be published. Required fields are marked *