概述

Godot中的菜單創建是一個復雜的災難性工作，往往無從下手，我也是不止一次嘗試簡化菜單的創建。

從自己去年的發明“簡易樹形數據”用于簡化Tree控件獲得靈感，于是嘗試編寫了用于表示菜單數據的EasyMenuData類，以及對應的純文本數據格式和對應的MenuBar控件擴展ETDMenuBar。

于是乎，你只需要在創建菜單欄時，添加一個ETDMenuBar控件，并為其data屬性指定符合規定的簡易數據，以及圖標集。便可以輕松設計和獲得復雜層次的菜單，以用于你創建的Godot桌面程序。

得到的效果：

原理

• MenuBar生成菜單的原理，可以參看我之前寫的《【Godot4.2】菜單相關控件和節點完全解析》
• 簡易樹形數據解析的原理，可以參看我之前寫的《【Godot4.2】EasyTreeData通用解析》

EasyMenuData

• 我創建了一個名叫EasyMenuData的類，可以解析形如下的數據，并通過其to_menu()方法返回一個PopUpMenu實例

文件新建 | 0 | -1 | Ctrl+S打開 | 1 | 0最近 | 1 | 1文件1文件2文件3
========關閉 | -1 | -1 | Ctrl+Q

其格式采用：

文本 | 圖標索引 | 復選狀態標記 | 快捷鍵

其中：

• |是分隔符，順序和意義對應，可以忽略后面的設定，但順序依然不能改變，符合要求的形式舉例如下：

文本
文本 | 圖標索引
文本 | 圖標索引 | 復選狀態標記
文本 | 圖標索引 | 復選狀態標記 | 快捷鍵

• 圖標索引：為負數或超出icons屬性提供的圖標集范圍時，將不顯示
• 復選狀態標記：為負數則不顯示復選框，大于等于0，顯示復選框，0不選中，大于0選中
• 快捷鍵：只需要指定以+號連接的字符串形式即可，不區分大小寫

ETDMenuBar

• 我創建了一個擴展的MenuBar類型ETDMenuBar，其data屬性接收如下形式的數據：

文件新建 | 0 | -1 | Ctrl+S打開 | 1 | 0最近 | 1 | 1文件1文件2文件3---關閉 | -1 | -1 | Ctrl+Q
========
編輯撤銷重做---清空

也就是在多個一級菜單之間用========進行分隔。

• 運行場景后，會自動根據data屬性給定的數據，生成菜單欄。

EasyMenuData源碼

# ========================================================
# 名稱：EasyMenuData
# 類型：類
# 簡介：基于ETD構造PopupMenu的類
# 作者：巽星石
# Godot版本：v4.3.stable.steam [77dcf97d8]
# 創建時間：2025年2月21日20:11:05
# 最后修改時間：2025年3月1日22:24:40
# ========================================================
class_name EasyMenuDatavar _root:EasyMenuItem# 獲取生成的菜單
func to_menu() -> PopupMenu:return _root.to_menu()# 獲取根節點信息
func get_root_data() -> String:return _root.data if _root else ""# ============================ 內部類 ============================
# 單項數據
class EasyMenuItem:# ------- 圖標集var icons:Array[Texture2D]var icon_width:float   # 圖標最大寬度# ------- 菜單項信息var label:String       # 菜單項文本var icon:Texture2D     # 菜單項圖標var shortcut:Shortcut  # 菜單項快捷鍵var show_checkbox:bool # 是否顯示復選var checked:bool       # 是否選中# ------- 節點信息var data:String                    # 原始未解析的文本var deep:int                       # 節點深度var parent:EasyMenuItem            # 父節點var children:Array[EasyMenuItem]   # 子節點集合func _init(_data:String,_deep:int,_icons:Array[Texture2D],_icon_width:float) -> void:data = _datadeep = _deepicons = _iconsicon_width = _icon_widthparse_data()children = []# 解析傳入的數據func parse_data():if data != "" or data != "---":var ds = data.split(" | ",false)match ds.size():1:label = data2:label = ds[0]var idx = int(ds[1])icon = get_idx_icon(idx)3:label = ds[0]var idx = int(ds[1])icon = get_idx_icon(idx)show_checkbox = is_show_box(int(ds[2]))checked = int(ds[2])4:label = ds[0]var idx = int(ds[1])icon = get_idx_icon(idx)show_checkbox = is_show_box(int(ds[2]))checked = int(ds[2])shortcut = new_shortcut(ds[3])# 是否顯示復選框func is_show_box(tag:int) -> bool:return true if tag >= 0 else false  # 僅在大于等于0顯示# 獲取對應下標的圖標func get_idx_icon(idx:int) -> Texture2D:var icn:Texture2Dif icons:if idx in range(icons.size()):icn = icons[idx]return icn# 按給定字符串創建并返回一個快捷鍵func new_shortcut(key_str:String) -> Shortcut:var sc:Shortcutif key_str != "":sc = Shortcut.new()var event := InputEventKey.new()event.pressed = truevar keys = key_str.split("+",false)for key in keys:match key.to_lower(): # 小寫"ctrl":event.ctrl_pressed = true"alt":event.alt_pressed = true"shift":event.shift_pressed = true_:event.keycode = OS.find_keycode_from_string(key)sc.events.append(event)return scfunc get_path():var path = ""path += labelif parent:path = parent.get_path() + "/" + pathreturn path# 轉為菜單項或子菜單func to_menu(menu:PopupMenu = null):var root_menu:PopupMenuif menu == null:  # 根節點menu = PopupMenu.new()if data != "":menu.name = label  # 名稱與菜單項一致root_menu = menufor child in children:child.to_menu(root_menu)return root_menuelse:# 添加菜單項if data == "---":  # 分割線menu.add_separator()else:menu.add_item(label)  # 文本var last = menu.item_count-1# 將路徑以元數據形式存儲menu.set_item_metadata(last,get_path())# 圖標if icon: menu.set_item_icon(last,icon)menu.set_item_icon_max_width(last,icon_width) # 設定圖標寬度# 復選框menu.set_item_as_checkable(last,show_checkbox)if show_checkbox:menu.set_item_checked(last,checked)# 快捷鍵if shortcut:menu.set_item_shortcut(last,shortcut,true)# 如果有子節點if children.size()>0:# 創建子PopupMenuvar sub_menu = PopupMenu.new()sub_menu.name = label  # 名稱與菜單項一致menu.add_child(sub_menu)# 指定為當前項的子菜單menu.set_item_submenu_node(menu.item_count-1,sub_menu)for child in children:child.to_menu(sub_menu)# ============================ 方法 ============================
# 創建并返回一個EasyTreeItem實例
func create_item(text:String,icons:Array[Texture2D],icon_width:float,p_node:EasyMenuItem = null) -> EasyMenuItem:var itm = EasyMenuItem.new(text,0,icons,icon_width)if _root:if p_node:itm.deep = p_node.deep + 1itm.parent = p_nodep_node.children.append(itm)else:itm.deep = _root.deep + 1itm.parent = _root_root.children.append(itm)else:_root = itmreturn itm# 由多行文本創建
static func new_with_etd_str(etd_str:String,icons:Array[Texture2D],icon_width:float) ->EasyMenuData:var edt = EasyMenuData.new()var items = etd_str.split("\n",false)    # 將ETD字符串按行切分為字符串數組var pre_itm:EasyMenuItem                 # 記錄前一項var p_itm:EasyMenuItem = null            # 記錄父節點# 遍歷每行數據for i in range(items.size()):if items[i].strip_edges() != "":# 第1行直接添加為Tree控件的根節點（跳過下面if部分）# 從第2行開始比較當前行與前一行的縮進深度（也就是\t的數目）if i > 0: var d_deep = deep(items[i-1]) - deep(items[i])  # 與前一行數據的縮進差值match d_deep:-1:                                # 縮進比前一項深：p_itm = pre_itm                # 將前一項作為父節點0:                                 # 縮進深度與前一項一樣：p_itm = pre_itm.parent   # 父節點與前一項父節點一樣_:                                 if d_deep>0:                   # 縮進比前一項淺# 通過縮進差值計算獲得合適的父節點p_itm = pre_itm            for j in range(d_deep+1):p_itm = p_itm.parent# 實際創建和添加TreeItem到Tree控件var itm:EasyMenuItem = edt.create_item(items[i].replace("\t",""),icons,icon_width,p_itm)pre_itm = itm                              # 將當前項記錄為前一項return edt# 返回字符串的Tab縮進值
static func deep(sttr:String):return sttr.rstrip(" ").count("\t")

ETDMenuBar源碼

# ========================================================
# 名稱：ETDMenuBar
# 類型：自定義控件（MenuBar擴展）
# 簡介：基于EasyMenuData構造的MenuBar
# 作者：巽星石
# Godot版本：v4.3.stable.steam [77dcf97d8]
# 創建時間：2025年2月21日20:49:44
# 最后修改時間：2025年3月1日22:26
# ========================================================class_name ETDMenuBar extends MenuBarsignal item_click(path:String) # 菜單項被點擊# ================================ 參數 ================================
@export_multiline var data:String   ## 菜單欄簡易數據
@export var icons:Array[Texture2D]  ## 圖標集合
@export var icon_width:float = 16.0 ## 圖標最大寬度func _ready() -> void:reload()# ============================ 方法 ============================
# 重新加載
func reload():clear()for dt in data.split("=".repeat(8),false):var emd = EasyMenuData.new_with_etd_str(dt,icons,icon_width)var menu = emd.to_menu()set_connects(menu)add_child(menu)# 遞歸形式為所有層級的菜單處理菜單項點擊的信號處理
func set_connects(menu:PopupMenu):# 統一設置字號var font_size = get("theme_override_font_sizes/font_size")menu.set("theme_override_font_sizes/font_size",font_size)menu.connect("index_pressed",func(index:int):emit_signal("item_click",menu.get_item_metadata(index)))for sub_menu in menu.get_children():if sub_menu is PopupMenu:set_connects(sub_menu)# 清空子節點
func clear():for child in get_children():child.queue_free()

菜單項點擊的處理

只需要鏈接item_click信號，就可以處理菜單項的點擊了。

信號參數path會返回菜單項的路徑，類似于下面這樣：

文件/最近/文件2
文件/關閉

這樣通過寫一個math分支語句來匹配菜單項的路徑，就可以實現具體菜單項的功能。

美化

通過外面套一個PanelContainer，并且設定flat，可以快速的美化菜單欄。

而且我設定所有的子菜單都保持于MenuBar一致的字號，只要在MenuBar上設置一次就可以了。

總結

• EasyMenuData其實對應的是單個PopupMenu的描述和生成，可以用于普通菜單生成，也可用于彈出菜單的設計
• 而ETDMenuBar，則是對應菜單欄生成。