第 34 课 · Button 按钮

⏱ 预计时长 30 分钟📊 难度入门📚 模块 第 4 部分 · UI 界面 · 动画 · 特效

🎯 本课学习目标

掌握 Button 的创建与样式
用信号处理点击
自定义按钮外观

按钮是 UI 交互的核心。本课做各种按钮：普通、切换、图片按钮，并处理点击事件。

📖 详细教学步骤

创建按钮并改文字实操

添加 Button 节点
检查器 Text 输入按钮文字（如「开始游戏」）
调整 Size 让按钮大小合适

💡 常用快捷键：双击按钮可快速编辑文字。

处理点击：连接 pressed 信号代码

按钮点击（松开时）触发 pressed 信号：

GDSCRIPTextends CanvasLayer

@onready var btn: Button = $StartButton

func _ready():
    btn.pressed.connect(_on_start_pressed)

func _on_start_pressed():
    print("开始游戏！")

按钮其他信号概念

信号	触发时机
pressed	点击松开时（最常用）
button_down	按下瞬间
button_up	松开瞬间
mouse_entered	鼠标移入
mouse_exited	鼠标移出
toggled	切换按钮状态改变时

按钮类型与属性属性

Disabled：禁用（灰色不可点）
Toggle Mode：切换开关（再点取消选中）
Button Group：单选组（多个按钮只能选一个）
Focus Mode：键盘/手柄导航

自定义按钮外观美化

用 Theme Overrides 改外观：

Colors → Font Color：文字颜色
Styles → Normal / Hover / Pressed：三种状态背景
新建 StyleBoxFlat 可调背景色、圆角、边框

💡 要做漂亮按钮，重点调 Hover（悬停）和 Pressed（按下）两种状态。

代码里做图片按钮进阶

用纹理做图标按钮：

GDSCRIPTfunc make_icon_button():
    var b = Button.new()
    b.text = "⚙"
    # 或用图标：b.icon = load("res://assets/icons/settings.png")
    b.tooltip_text = "设置"
    b.pressed.connect(_on_settings_pressed)
    add_child(b)

⚠️

按钮点击没反应？

检查：①是否连接了 pressed 信号；②函数是否存在；③按钮是否被其他 UI 盖住（Mouse Filter）。

⚠️

Disable 的按钮还能触发？

禁用后不会触发 pressed，但 button_down 可能仍触发。判断按钮状态用 is_disabled()。

🧪 动手试一试

🏋️ 课后练习

做 3 个按钮：开始（跳转/打印）、设置（Toggle 开关切换一个面板显隐）、退出。并让「开始」按钮悬停变色。

设置面板 visible 切换；Theme Overrides → Styles → Hover 自定义。

💡

单选组（Button Group）做「难度选择：简单/中等/困难」非常方便。

💡

给按钮加 Tooltip Text 悬停提示，体验更好。

🎓 本课小结

Button 核心是 pressed 信号；支持 Disabled/Toggle/单选组；用 Theme Overrides 的 Styles 自定义三种状态外观。