【Godot4】状态栏组件StatusBar

概述

一个包含多个水平排列文本的状态栏组件。

类设计

// 状态栏
StatusBar{
    items:Array[StatusBarItem]        // 项数据
    style:StyleBoxFlat                // 样式盒子
    add_item(text,pos:=-1,fill=false,h_aligin= left)   	// 添加文本项
} 

// 状态栏项[内部类]
StatusBarItem(Resource){
    text:String     // 文本
    fill:bool   // 书否水平拉伸
    aligin:left	// 文本对齐方式
}

实现

状态栏组件

# 状态栏组件
# 创建时间2025年7月22日
@tool
extends PanelContainer

# 水平对齐方式
enum h_aligns{LEFT,CENTER,RIGHT}

# -------------------------- 参数 --------------------------
@export var items:Array[StatusBarItem]:        # 按行划分的项数据
	set(val):
		items = val
		if !is_node_ready():
			await ready
		load_items()

# 整个状态栏的背景样式盒子
@export var bg_style:StyleBoxFlat:               
	set(val):
		bg_style = val
		if !is_node_ready():
			await ready
		add_theme_stylebox_override("panel",val)

# 单个状态栏单元格的样式
@export var cell_style:StyleBoxFlat:               
	set(val):
		cell_style = val
		if !is_node_ready():
			await ready
		load_items()

# -------------------------- 节点引用 --------------------------
@onready var hbox: HBoxContainer = %HBox
# -------------------------- 方法 --------------------------
# 添加项
func add_item(text:String,pos:int=-1,fill:bool=false,h_align:int= h_aligns.LEFT): 
	var itm = StatusBarItem.new()
	itm.text = text
	itm.align = h_align
	itm.fill = fill
	if pos == -1:
		items.append(itm)
	else:
		items.insert(pos,itm)

# 清空
func clear():
	for child in hbox.get_children():
		child.queue_free()
	pass

# 加载所有已经设置好的项目为Label控件
func load_items():
	clear()
	for itm in items:
		var lab = Label.new()
		lab.text = itm.text
		lab.horizontal_alignment = itm.fill
		lab.add_theme_stylebox_override("normal",cell_style)
		if itm.fill:
			lab.size_flags_horizontal = Control.SIZE_EXPAND_FILL
		hbox.add_child(lab)

# 设置制定项的文本
func set_itm_text(idx:int,new_text:String):
	if idx in range(items.size()):
		items[idx].text = new_text

StatusBarItem

# 状态栏项信息
# 2025年7月22日
@tool
extends Resource
class_name StatusBarItem

enum h_align{LEFT,CENTER,RIGHT}
## 文本
@export var 	text:String: 
	set(val):
		text = val
		emit_changed()

## 是否水平拉伸
@export var 	fill:bool:   
	set(val):
		fill = val
		emit_changed()
## 文本对齐方式
@export_enum("left","center","right") var align:int:  
	set(val):
		align = val
		emit_changed()

效果：