【Godot4.2】文件系统自定义控件 - GroupButtons

GroupButtons

概述

读者朋友们好,我是巽星石,这是我的Godot4.2文件系统自定义控件系列文章。

在很多程序或插件设计中,都会用到一堆按钮的形式,好处是比较直观,用啥点啥,本质上相当于一个简化的二级树形导航结构。

这种结构我在自己编写的Godot插件myAdd中使用过,这次是基于Godot4.2重新编写,并通过解析自定义数据形式简化使用的版本。

在这里插入图片描述

代码

同样只需要拷贝下面的代码到你的插件或程序项目(Godot4.2或以上)中,可以命名为“GroupButtons.gd”。

# =============================================
# 名称:GroupButtons
# 类型:自定义节点(扩展控件)
# 描述:专用于显示分组按钮
# 作者:巽星石
# Godot版本:v4.2.1.stable.official [b09f793f5]
# 创建时间:20242723:59:18
# 最后修改时间:20242801:30:44
# =============================================
@tool
extends PanelContainer
class_name GroupButtons## 按钮点击时触发
signal button_clicked(group_title:String,title:String)## 包含分组和具体按钮文本的自定义数据,格式如下:[br]
## 分组标题==按钮名称||按钮名称...[br]
## 分组标题==按钮名称||按钮名称...[br]
## ...
@export_multiline var data:String = "":set(val):data = valreload()## 展开图标,显示在分组按钮右侧
@export var expand_icon:Texture2D:set(val):expand_icon = valreload()## 收起图标,显示在分组按钮右侧
@export var fold_icon:Texture2D:set(val):fold_icon = valreload()var root:VBoxContainer  # 添加分组的VBox容器# 实例化时进行初始化构建
func _init():# 创建最基础的容器框架var scroll = ScrollContainer.new()var vbox = VBoxContainer.new()vbox.size_flags_horizontal=Control.SIZE_EXPAND_FILLscroll.add_child(vbox)add_child(scroll)root = vbox# 根据data重新加载整个分组按钮列表
func reload():# 清空原有分组for child in root.get_children():child.queue_free()# 加载新分组var datas = data.split("\n")for dt in datas:add_group(dt)# 根据分组数据(形如“分组标题==按钮名称||按钮名称”)添加一个分组
func add_group(gup_data:String):var gup_name = gup_datavar datas = gup_data.split("==")if datas.size()>0:gup_name = datas[0]# 创建分组和分组标题按钮var vbox = vbox(group_button(gup_name))var grid = grid()grid.columns = 2# 创建具体的按钮if datas.size()>1:var btns = datas[1].split("||")for bt in btns:var btn = button(bt)btn.size_flags_horizontal=Control.SIZE_EXPAND_FILL## 按钮点击处理btn.connect("pressed",func():emit_signal("button_clicked",gup_name,bt))grid.add_child(btn)vbox.add_child(grid)root.add_child(vbox)# ============================ 控件生成函数 ============================
# ============== 说明:以下函数仅用于生成控件或容器,用于简化代码 
# 创建并返回一个VBoxContainer实例,并添加child为子节点
func vbox(child:Control = null) -> VBoxContainer:var v_box = VBoxContainer.new()if child:v_box.add_child(child)return v_box# 创建并返回一个GridContainer实例,并添加child为子节点
func grid(child:Control = null) -> GridContainer:var g = GridContainer.new()if child:g.add_child(child)return g# 创建并返回一个按钮实例
func button(title:String) -> Button:var btn = Button.new()btn.text = titlereturn btn# 创建并返回一个分组标题按钮实例
func group_button(gup_name:String) -> Button:var gup_btn = button(gup_name)gup_btn.icon = fold_icongup_btn.expand_icon = truegup_btn.icon_alignment=HORIZONTAL_ALIGNMENT_RIGHTgup_btn.flat = true# 分组按钮点击处理gup_btn.connect("pressed",func():var parent = gup_btn.get_parent()if parent is VBoxContainer:var grid = parent.get_child(1)if grid is GridContainer:grid.visible = not grid.visibleif gup_btn.icon == fold_icon:gup_btn.icon = expand_iconelse:gup_btn.icon = fold_icon)return gup_btn

使用方法

脚本拷贝和创建到项目中后,在具体场景中添加节点。

在这里插入图片描述
将控件放大至合适大小,在检视器面板设定参数,其中data属性采用的是我自定义的一种数据形式,格式如下:

分组标题==按钮名称||按钮名称...
分组标题==按钮名称||按钮名称...
...

也就是说:

  • 每一行描述一个分组
  • ==之前是分组标题,之后==之后是分组下的按钮标题,每个按钮标题之间用||作为分隔
    在这里插入图片描述
    expand_icon和fold_icon用于在分组折叠或展开时显示。
    在这里插入图片描述
    因为本质上GroupButtons是基于PanelContainer,因此你可以用自定义的StyleBox资源修饰它。
    通过自定义背景颜色,就可以获得更好的样式:
    在这里插入图片描述
    以下是调整后的样式:
    在这里插入图片描述

但是在制作编辑器插件时,我更倾向于不去调整原始的控件和容器样式,因为一切都可以直接跟随编辑器的样式发生变化。

获取按钮点击信息

通过连接和处理自定义信号button_clicked,可以获取每个按钮的分组标题及其自身的标题,通过match之类的分支结构,可以进行具体的处理。
在这里插入图片描述

信号处理代码如下:

func _on_group_button_button_clicked(group_title, title):print(group_title,":",title)pass

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/460022.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

re:从0开始的CSS学习之路 5. 颜色单位

0. 写在前面 没想到在CSS里也要再次了解这些颜色单位,感觉回到了大二的数字图像处理,可惜现在已经大四了,感觉并没有学会什么AI的东西 1. 颜色单位 预定义颜色名:HTML和CSS规定了147种颜色名。例如:red yellow green …

米贸搜|关于Facebook广告受限:在这些情况下,Meta会限制广告主的广告能力!

如果你被限制了投放广告,那么你会在Facebook上收到通知。 除了审查广告之外,Meta还监控和调查广告主在Meta技术上的行为,在某些情况下,Meta可能会对广告主施加限制,限制广告主的广告能力,这些限制旨在帮助保…

【QT学习十三】QChart

目录 一、概述 二、头文件及配置 实例演示 三、基本功能 1. 图表组件管理 2. 系列和数据处理 3. 坐标轴管理 4. 图表绘制和显示 5. 主题和样式: 四、QChart 类中的一些方法 1. addSeries(QAbstractSeries *series) 2. removeSeries(QAbstractSeri…

波卡 2023 四季度报告:开发者数量位列加密生态前三,五项新技术将于今年发布

作者:Nicholas Garcia|Messari 研究分析师 编译:OneBlock 原文:https://messari.io/report/state-of-polkadot-q4-2023?utm_mediumorganic_social&utm_sourcetwitter_messari&utm_campaignstate_of_polkadot_q4_2023 …

Python Paramiko 使用交互方式获取终端输出报错

近期接到一个需求,要批量登录网络设备获取配置。 原计划使用 Paramiko exec即可,但是后来发现,有些设备命令也执行了,但是没有回显。 于是尝试使用 invoke_shell() 方式。 前期调试倒是OK,直到遇见一个输出内容较长的…

[VulnHub靶机渗透] dpwwn: 1

🍬 博主介绍👨‍🎓 博主介绍:大家好,我是 hacker-routing ,很高兴认识大家~ ✨主攻领域:【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 🎉点赞➕评论➕收藏…

CV | Medical-SAM-Adapter论文详解及项目实现

******************************* 👩‍⚕️ 医学影像相关直达👨‍⚕️******************************* CV | SAM在医学影像上的模型调研【20240207更新版】-CSDN博客 CV | Segment Anything论文详解及代码实现 本文主要讲解Medical-SAM-Adapter论文及项…

ELAdmin 的 CRUD

数据表结构 弄个测试的数据表,不同类型的几个字段,表名位 mp_reply。 生成代码 ELAdmin 可以自动生成代码。 左侧目录系统工具–代码生成,点开以后可以看到上面创建的数据表mp_reply,点击配置。 进入的页面内容有两部分&#…

单片机无线发射的原理剖析

目录 一、EV1527编码格式 二、OOK&ASK的简单了解 三、433MHZ 四、单片机的地址ID 五、基于STC15W104单片机实现无线通信 无线发射主要运用到了三个知识点:EV1527格式;OOk;433MHZ。下面我们来分别阐述: EV1527是数据的编…

IAR报错:Error[Pa045]: function “halUartInit“ has no prototype

在IAR工程.c文件末尾添加一个自己的函数,出现了报错Error[Pa045]: function "halUartInit" has no prototype 意思是没有在开头添加函数声明,即void halUartInit(void); 这个问题我们在keil中不会遇到,这是因为IAR编译器规则的一…

Electron实战(二):将Node.js和UI能力(app/BrowserWindow/dialog)等注入html

文章目录 设置webPreferences参数安装electron/remotemain进程中初始化html中使用dialog踩坑参考文档 上一篇:Electron实战(一):环境搭建/Hello World/打包exe 设置webPreferences参数 为了能够在html/js中访问Node.js提供fs等模块,需要在n…

NLP_语言模型的雏形 N-Gram 模型

文章目录 N-Gram 模型1.将给定的文本分割成连续的N个词的组合(N-Gram)2.统计每个N-Gram在文本中出现的次数,也就是词频3.为了得到一个词在给定上下文中出现的概率,我们可以利用条件概率公式计算。具体来讲,就是计算给定前N-1个词时&#xff0…