小白逆向设计ui : ➡️ 先手动摆放节点大致位置 ➡️ 再放入容器调整间距 ➡️ 最后调整节点细节
ui参考: www.uisdc.com/bento-box
成品展示⬇️⬇️⬇️
卡片间距设置⬇️⬇️⬇️
# 用代码统一间距
var a := 18 #卡片间距
func _ready() -> void:
$Control/VBoxContainer.add_theme_constant_override("separation",a)
$Control/VBoxContainer/HBoxContainer3.add_theme_constant_override("separation",a)
$Control/VBoxContainer/HBoxContainer3/VBoxContainer.add_theme_constant_override("separation",a)
$Control/VBoxContainer/HBoxContainer3/VBoxContainer2/HBoxContainer.add_theme_constant_override("separation",a)
$Control/VBoxContainer/HBoxContainer3/VBoxContainer2/HBoxContainer/VBoxContainer.add_theme_constant_override("separation",a)
$Control/VBoxContainer/HBoxContainer3/VBoxContainer2/HBoxContainer2.add_theme_constant_override("separation",a)
$Control/VBoxContainer/HBoxContainer.add_theme_constant_override("separation",a)
卡片圆角设置⬇️⬇️⬇️
卡片阴影设置⬇️⬇️⬇️
卡片宽高⬇️⬇️⬇️
# 用代码设置宽高比例
var wh := Vector2.ZERO #卡片宽高
func _ready() -> void:
wh = $Control.size
$Control/VBoxContainer/HBoxContainer3/VBoxContainer/Panel.custom_minimum_size = Vector2(wh.x * 0.45 , wh.y *0.2)
$Control/VBoxContainer/HBoxContainer3/VBoxContainer/Panel2.custom_minimum_size = Vector2(wh.x * 0.45 , wh.y *0.5)
$Control/VBoxContainer/HBoxContainer3/VBoxContainer2/HBoxContainer/VBoxContainer/Panel.custom_minimum_size = Vector2(wh.x * 0.2 , wh.y *0.25)
$Control/VBoxContainer/HBoxContainer3/VBoxContainer2/HBoxContainer/VBoxContainer/Panel2.custom_minimum_size = Vector2(wh.x * 0.2 , wh.y *0.2)
$Control/VBoxContainer/HBoxContainer3/VBoxContainer2/HBoxContainer/Panel.custom_minimum_size = Vector2(wh.x * 0.35 , wh.y *0.45)
$Control/VBoxContainer/HBoxContainer3/VBoxContainer2/HBoxContainer2/Panel.custom_minimum_size = Vector2(wh.x * 0.35 , wh.y *0.23)
$Control/VBoxContainer/HBoxContainer3/VBoxContainer2/HBoxContainer2/Panel2.custom_minimum_size = Vector2(wh.x * 0.2 , wh.y *0.23)
$Control/VBoxContainer/HBoxContainer/Panel.custom_minimum_size = Vector2(wh.x * 0.25 , wh.y *0.3)
$Control/VBoxContainer/HBoxContainer/Panel2.custom_minimum_size = Vector2(wh.x * 0.45 , wh.y *0.3)
$Control/VBoxContainer/HBoxContainer/Panel3.custom_minimum_size = Vector2(wh.x * 0.30 , wh.y *0.3)
卡片按下⬇️⬇️⬇️
func _on_texture_button_button_down() -> void:
print("大家好")
pass
图片嵌入⬇️⬇️⬇️
父节点设置
图片节点设置
