【Godot4.2】按钮控件全解析

2024-02-26 19:44
文章标签 解析 控件 按钮 godot4.2

本文主要是介绍【Godot4.2】按钮控件全解析,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

概述

Godot虽然有内置文档和在线文档,但是对于特定控件的讲解资料是很少的。因此对于使用者可能会造成一定困扰。笔者(Bilibili@巽星石)一直想实现一个Godot控件的详细教程,为了实现这个目的,我会开始一系列的文章来进行总结,并不断地修改,以便于读者食用。

Button

Button是最基础的按钮控件,也是日常最常用的按钮类型。其继承和派生关系如下图:

image.png

在“检视器”面板你可以看到Button类型的属性:

image.png

设定按钮文本

text属性设定按钮显示的文本,我们可以直接在“检视器”面板中直接设定,也可以通过代码来设定。

# 改变按钮文本
button.text = "普通按钮"

设定文本的对齐方式

通过alignment属性可以设定按钮文本在按钮矩形区域中的对齐方式。

image.pngimage.png

设定文本超出按钮矩形区域的行为

因为text属性没有限定文本的长度,所以一定会存在按钮和文本长度不一致时的行为问题。
text_overrun_behaviorclip_text,都用于设定文本超出按钮矩形区域后是否裁剪文本。
在中文文本下,text_overrun_behavior除了默认的不裁剪外的其他几个选项似乎没有多大的区别,甚至你可以直接忽略这个属性直接启用clip_text。效果是类似的。
image.pngimage.pngimage.png

为按钮设定图标

通过icon属性我们可以为按钮设定图标。默认图标在左,文本在右。
image.png

设定图标与按钮的不同位置组合

通过icon_alignmentvertical_icon_alignment两个属性,结合设定文本对齐的alignment属性,可以组合出多种图标和按钮的位置关系。
image.png

image.png
默认,图标在左,文本在右。
image.pngimage.png图标在上,文本在下。
image.pngimage.png文本在右,图标在左。
image.pngimage.png文本在上,图标在下。

让图标跟随按钮缩放

expand_icon设定图标是否跟随按钮的大小变化进行动态缩放。但在一般情况下这会使得图标变得不清晰。
image.png

BaseButton

Godot的普通按钮Button,继承自基类BaseButton,它提供了所有按钮类型共用的一些基础属性和方法。
image.png

禁用按钮

disabled属性规定了按钮是否处于禁用状态,禁用状态下按钮及其文本变为灰色,并且无法响应鼠标点击。
image.png

切换按下与松开状态

toggle_mode则决定按钮是否在按下与未按下的状态间进行切换,默认为false。也就是默认情况下按钮被点击后先是被按下,然后松开后回弹,并不会一直处于按下状态。toggle_mode则改变了这一行为,按下的按钮将不会回弹,再次点击才会回弹,类似于一种开关的状态切换。
button_pressed则是返回toggle_mode=true状态下,按钮是否被按下。

设定按钮可以响应的鼠标按键

action_mode是设定按钮被确定为按下时的时机,一个是按下就触发,一个是释放时才触发。
image.png
button_mask,设定按钮可以响应鼠标的左键、中间还是右键点击。默认情况下按钮只接受左键点击。
image.png

# 设定按钮能同时响应鼠标左键和右键的点击
button.button_mask = MOUSE_BUTTON_MASK_LEFT | MOUSE_BUTTON_MASK_RIGHT

移出后的细节

keep_pressed_outside=true,则按钮被按下后,鼠标移出按钮区域外时仍然保持按钮被按下的状态。

创建按钮组

button_group,通过创建一个ButtonGroup资源,将多个按钮联系在一起,形成一个按钮组,同一时间只有一个按钮能被按下。
我们创建多个Button,然后启用toggle_mode,并为它们同一创建ButtonGroup。或者为其中一个按钮创建ButtonGroup后,右键“复制值”,或者Ctrl+C,然后转到其他节点的button_group信号处,右键“粘贴值”(或Ctrl+V)。
image.png
image.pngimage.png
这时候运行,就会发现三个按钮只有一个按钮能被按下,类似于在多个可选项中进行单选。
image.png

设定按钮快捷键

通过为shortcut属性创建Shortcut资源可以为按钮设定快捷键。甚至你可以为同一个按钮设置多个快捷键,或者为不同的设备设定此按钮的快捷键。

在这里插入图片描述

Godot4.2也贴心的为我们进行按键监听,我们只需要点击“配置按钮”,在打开的类似于“输入映射”配置的窗口中输入键盘快捷键。
image.png
关闭后,会自动帮我们填写到其属性中。
image.png
shortcut_feedback决定在按快捷键时,按钮是否显示被按下的时的高亮,默认为true。如果是false,而且toggle_mode=false时,则按快捷键时,按钮本身不会有任何视觉反馈。
shortcut_in_tooltip决定是否在鼠标提示文本中添加快捷键信息,默认为true。将鼠标移动到按钮上可以看到用括号括起来的快捷键信息。
image.png
我们为按钮添加一段鼠标提示文本。再次运行可以看到带有鼠标提示文本和快捷键提示的效果。
image.pngimage.png

Control

image.png

按钮的状态

状态说明
normal默认(鼠标未移入)
hover鼠标移入
pressed按下
disabled禁用
focus获得焦点

相应的我们可以在主题覆盖部分,设定按钮在五种状态下的“样式盒”、文本以及图标的颜色。
image.png

设定按钮字体和字号

同样是在样式覆盖部分,可以设定按钮的字体和字号。
image.png

为按钮文本添加描边

在样式覆盖的常量部分,可以通过outline_size设定按钮文本的描边宽度,颜色部分的font_outline_color则可以设定描边的颜色。
image.pngimage.png
image.png

限制按钮图标的最大宽度

image.png

设定按钮的焦点和邻居

图形用户界面的控件之间存在一种“焦点”的东西,在同一个窗口中,通常同一时间只能有一个控件获得焦点。而且可以人为的设定焦点顺序,以及控件的毗邻关系。从而可以通过键盘的Tab/Shift+Tab键快速向前或向后切换焦点。以及用键盘或手柄的方向键上下左右切换到指定的毗邻节点。
image.png

限定按钮快捷键为局部快捷键

上面通过shortcut属性设定的快捷键默认是全局的,但有些情况下可能需要在某个局部GUI获得焦点时,在局部使用这些快捷键,这时可以设定shortcut_context,来限定快捷键为局部快捷键。
image.png

特殊按钮类型

Button派生的有4个按钮子类型。
image.png

CheckButton

CheckButton类似于一个开关。它类似于一个开启了flat的按钮后面跟了一个表示按下或未按下(也可以理解为选中或未选中)的图标。
image.png

自定义CheckButton的图标

通过主题覆盖部分,图标分组下,可以设定自定义的选中和非选中状态下的图标。比如这里我们使用的对钩图标。
image.pngimage.png

MenuButton

MenuButton是一种特殊按钮,点击后会弹出一个下拉菜单。通过其items属性,我们可以设定菜单项。
image.pngimage.pngimage.png
也可以为每个菜单项设定图标,以及是否可以勾选并显示复选框或单选框。
image.png
通过添加separator属性为true的菜单项,可以添加菜单项之间的分割线,用于菜单项的人为分组。
image.pngimage.png

OptionButton

OptionButton也是一个带下拉框的按钮,其样式更像传统的“组合框”(ComboBox)。
同样通过其items属性添加下拉选项,也可以设定分割线,为项添加图标等。
image.pngimage.png

LinkButton

LinkButton模拟超链接的效果,通过设定有效网站链接或本地文件系统路径,点击时将通过系统默认浏览器打开网站或者资源管理器打开文件夹或默认程序打开文件。
image.pngimage.png

TextureButton

TextureButton是最特殊的一种按钮,它允许你通过设定按钮几种状态下的图片来创建图片按钮。或者至少你需要设定一张图片来作为按钮的外形。
image.png

这篇关于【Godot4.2】按钮控件全解析的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/749937

相关文章

线上Java OOM问题定位与解决方案超详细解析

《线上JavaOOM问题定位与解决方案超详细解析》OOM是JVM抛出的错误,表示内存分配失败,:本文主要介绍线上JavaOOM问题定位与解决方案的相关资料,文中通过代码介绍的非常详细,需要的朋... 目录一、OOM问题核心认知1.1 OOM定义与技术定位1.2 OOM常见类型及技术特征二、OOM问题定位工具

深度解析Python中递归下降解析器的原理与实现

《深度解析Python中递归下降解析器的原理与实现》在编译器设计、配置文件处理和数据转换领域,递归下降解析器是最常用且最直观的解析技术,本文将详细介绍递归下降解析器的原理与实现,感兴趣的小伙伴可以跟随... 目录引言:解析器的核心价值一、递归下降解析器基础1.1 核心概念解析1.2 基本架构二、简单算术表达

深度解析Java @Serial 注解及常见错误案例

《深度解析Java@Serial注解及常见错误案例》Java14引入@Serial注解,用于编译时校验序列化成员,替代传统方式解决运行时错误,适用于Serializable类的方法/字段,需注意签... 目录Java @Serial 注解深度解析1. 注解本质2. 核心作用(1) 主要用途(2) 适用位置3

Java MCP 的鉴权深度解析

《JavaMCP的鉴权深度解析》文章介绍JavaMCP鉴权的实现方式,指出客户端可通过queryString、header或env传递鉴权信息,服务器端支持工具单独鉴权、过滤器集中鉴权及启动时鉴权... 目录一、MCP Client 侧(负责传递,比较简单)(1)常见的 mcpServers json 配置

从原理到实战解析Java Stream 的并行流性能优化

《从原理到实战解析JavaStream的并行流性能优化》本文给大家介绍JavaStream的并行流性能优化:从原理到实战的全攻略,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的... 目录一、并行流的核心原理与适用场景二、性能优化的核心策略1. 合理设置并行度:打破默认阈值2. 避免装箱

Maven中生命周期深度解析与实战指南

《Maven中生命周期深度解析与实战指南》这篇文章主要为大家详细介绍了Maven生命周期实战指南,包含核心概念、阶段详解、SpringBoot特化场景及企业级实践建议,希望对大家有一定的帮助... 目录一、Maven 生命周期哲学二、default生命周期核心阶段详解(高频使用)三、clean生命周期核心阶

深入解析C++ 中std::map内存管理

《深入解析C++中std::map内存管理》文章详解C++std::map内存管理,指出clear()仅删除元素可能不释放底层内存,建议用swap()与空map交换以彻底释放,针对指针类型需手动de... 目录1️、基本清空std::map2️、使用 swap 彻底释放内存3️、map 中存储指针类型的对象

Java Scanner类解析与实战教程

《JavaScanner类解析与实战教程》JavaScanner类(java.util包)是文本输入解析工具,支持基本类型和字符串读取,基于Readable接口与正则分隔符实现,适用于控制台、文件输... 目录一、核心设计与工作原理1.底层依赖2.解析机制A.核心逻辑基于分隔符(delimiter)和模式匹

Java+AI驱动实现PDF文件数据提取与解析

《Java+AI驱动实现PDF文件数据提取与解析》本文将和大家分享一套基于AI的体检报告智能评估方案,详细介绍从PDF上传、内容提取到AI分析、数据存储的全流程自动化实现方法,感兴趣的可以了解下... 目录一、核心流程:从上传到评估的完整链路二、第一步:解析 PDF,提取体检报告内容1. 引入依赖2. 封装

深度解析Python yfinance的核心功能和高级用法

《深度解析Pythonyfinance的核心功能和高级用法》yfinance是一个功能强大且易于使用的Python库,用于从YahooFinance获取金融数据,本教程将深入探讨yfinance的核... 目录yfinance 深度解析教程 (python)1. 简介与安装1.1 什么是 yfinance?