【Godot4】工具栏组件ToolBar

概述

用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 = val
		if !is_node_ready():
			await ready
		load_btns()
		
## 图标集
@export var icons:Array[Texture2D]:
	set(val):
		icons = val
		if !is_node_ready():
			await ready
		load_btns()

## 按钮最小尺寸
@export var btn_size:= Vector2(50,20):
	set(val):
		btn_size = val
		custom_minimum_size = val
		if !is_node_ready():
			await ready
		load_btns()

## 是否显示文本
@export var is_show_text:bool= true:
	set(val):
		is_show_text = val
		if !is_node_ready():
			await ready
		load_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.y
	var l = StyleBoxLine.new()
	l.vertical = vertical
	c.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_LEFT
		btn.vertical_icon_alignment = VERTICAL_ALIGNMENT_CENTER
	btn.tooltip_text = text
	if icon:
		btn.icon = icon
	# 设置图标位置
	btn.icon_alignment = HORIZONTAL_ALIGNMENT_CENTER
	btn.vertical_icon_alignment = VERTICAL_ALIGNMENT_TOP
	btn.custom_minimum_size = btn_size
	btn.connect("pressed",func():
		emit_signal("btn_click",btn.tooltip_text)
	)
	return btn


func _on_flow_resized() -> void:
	if !is_node_ready():
		await ready
	#panel.size.y = flow.size.y
	custom_minimum_size.y = flow.size.y