๐๐ป 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