当前位置：首页 > ops >正文

【Godot4】工具栏组件ToolBar

ops 2025/7/23 9:36:54

概述

用Godot开发程序，是缺乏一些UI组件的，其中就包括工具栏ToolBar。这次制作一个简单的工具栏组件。统一处理单个工具栏的按钮点击事件。

基础实现

处理按钮点击

func _on_tool_bar_btn_click(text: String) -> void:print(text)

完整代码

@tool
extends PanelContainer
# ============================== 信号 ==============================
signal btn_click(text:String) # 按钮点击# ============================== 参数 ==============================
## 按钮设置字符串
@export_multiline var btns:String:set(val):btns = valif !is_node_ready():await readyload_btns()## 图标集
@export var icons:Array[Texture2D]:set(val):icons = valif !is_node_ready():await readyload_btns()## 按钮最小尺寸
@export var btn_size:= Vector2(50,20):set(val):btn_size = valcustom_minimum_size = valif !is_node_ready():await readyload_btns()## 是否显示文本
@export var is_show_text:bool= true:set(val):is_show_text = valif !is_node_ready():await readyload_btns()#var y = panel.size.y#custom_minimum_size.y = y#size.y = y# ============================== 节点引用 ==============================
@onready var flow: FlowContainer = %Flow# 清空按钮
func cls() -> void:for chd in flow.get_children():chd.queue_free()# 添加分割线
func add_line(vertical:= true) -> void:var c = PanelContainer.new()c.custom_minimum_size.y = btn_size.yvar l = StyleBoxLine.new()l.vertical = verticalc.add_theme_stylebox_override("panel",l)flow.add_child(c)# 加载按钮
func load_btns() -> void:cls()for btn_data in btns.split("\n",false): # 遍历数据行var split = btn_data.split(",")if split.size()==1:    # 没有逗号if btn_data == "---":  # 分隔符add_line()else:flow.add_child(create_btn(btn_data,null,is_show_text))if split.size()==2:    # 有逗号if split[1] != "": # 第二项不等于空var icon_idx = int(split[1])if icon_idx in range(icons.size()):flow.add_child(create_btn(split[0],icons[icon_idx],is_show_text))# 创建按钮
func create_btn(text:String,icon:Texture2D=null,show_text:=true) -> Button:var btn = Button.new()if show_text:  # 显示文本btn.text = text# 设置图标位置btn.icon_alignment = HORIZONTAL_ALIGNMENT_LEFTbtn.vertical_icon_alignment = VERTICAL_ALIGNMENT_CENTERbtn.tooltip_text = textif icon:btn.icon = icon# 设置图标位置btn.icon_alignment = HORIZONTAL_ALIGNMENT_CENTERbtn.vertical_icon_alignment = VERTICAL_ALIGNMENT_TOPbtn.custom_minimum_size = btn_sizebtn.connect("pressed",func():emit_signal("btn_click",btn.tooltip_text))return btnfunc _on_flow_resized() -> void:if !is_node_ready():await ready#panel.size.y = flow.size.ycustom_minimum_size.y = flow.size.y