定制 GUI 的Control节点

已经有好多control节点了…

然而,这远远不够。创建您的自定义控件,并使其按您希望的方式工作,这几乎是每个GUI程序员都向往的事情。Godot提供了大量这样的工具,但它们可能并不完全如您所愿的方式工作。在使用支持对角滚动条的下拉请求与开发人员联系之前,至少应该了解如何从脚本轻松地创建这些控件。

绘制

谈到绘制, 推荐看看这篇 2D中的自定义绘图 的教程。同样的原理适用与控件绘制。这里有些函数值得一提, 因为它们在绘制时有用, 所以接下来将进行详细说明:

检查控件的大小

Unlike 2D nodes, “size” is important with controls, as it helps to organize them in proper layouts. For this, the Control.rect_size property is provided. Checking it during _draw() is vital to ensure everything is kept in-bounds.

检查输入焦点

Some controls (such as buttons or text editors) might provide input focus for keyboard or joypad input. Examples of this are entering text or pressing a button. This is controlled with the Control.focus_mode property. When drawing, and if the control supports input focus, it is always desired to show some sort of indicator (highlight, box, etc.) to indicate that this is the currently focused control. To check for this status, the Control.has_focus() method exists. Example

GDScript

C#

  1. func _draw():
  2. if has_focus():
  3. draw_selected()
  4. else:
  5. draw_normal()
  1. public override void _Draw()
  2. {
  3. if (HasFocus())
  4. {
  5. DrawSelected()
  6. }
  7. else
  8. {
  9. DrawNormal();
  10. }
  11. }

调整大小

As mentioned before, size is important to controls. This allows them to lay out properly, when set into grids, containers, or anchored. Controls, most of the time, provide a minimum size to help properly lay them out. For example, if controls are placed vertically on top of each other using a VBoxContainer, the minimum size will make sure your custom control is not squished by the other controls in the container.

To provide this callback, just override Control.get_minimum_size(), for example:

GDScript

C#

  1. func get_minimum_size():
  2. return Vector2(30, 30)
  1. public override Vector2 _GetMinimumSize()
  2. {
  3. return new Vector2(20, 20);
  4. }

Alternatively, set it using a function:

GDScript

C#

  1. func _ready():
  2. set_custom_minimum_size(Vector2(30, 30))
  1. public override void _Ready()
  2. {
  3. SetCustomMinimumSize(new Vector2(20, 20));
  4. }

输入

控件(Control)节点提供了一些帮助, 使管理输入事件比常规节点容易得多。

输入事件

在此之前有几个关于输入的教程, 但值得一提的是, 控件有一个特殊的输入方法, 只有在以下情况下才起作用:

  • 鼠标指针悬停在控件上。
  • 鼠标按键在此控件上被按下 (控件始终捕获输入, 直到按钮被释放)
  • Control provides keyboard/joypad focus via Control.focus_mode.

This function is Control._gui_input(). Simply override it in your control. No processing needs to be set.

GDScript

C#

  1. extends Control
  2. func _gui_input(event):
  3. if event is InputEventMouseButton and event.button_index == BUTTON_LEFT and event.pressed:
  4. print("Left mouse button was pressed!")
  1. public override void _GuiInput(InputEvent @event)
  2. {
  3. if (@event is InputEventMouseButton mbe && mbe.ButtonIndex == (int)ButtonList.Left && mbe.Pressed)
  4. {
  5. GD.Print("Left mouse button was pressed!");
  6. }
  7. }

有关事件(event)本身的详细信息, 请查看 InputEvent 教程。

通知

Controls also have many useful notifications for which no dedicated callback exists, but which can be checked with the _notification callback:

GDScript

C#

  1. func _notification(what):
  2. match what:
  3. NOTIFICATION_MOUSE_ENTER:
  4. pass # Mouse entered the area of this control.
  5. NOTIFICATION_MOUSE_EXIT:
  6. pass # Mouse exited the area of this control.
  7. NOTIFICATION_FOCUS_ENTER:
  8. pass # Control gained focus.
  9. NOTIFICATION_FOCUS_EXIT:
  10. pass # Control lost focus.
  11. NOTIFICATION_THEME_CHANGED:
  12. pass # Theme used to draw the control changed;
  13. # update and redraw is recommended if using a theme.
  14. NOTIFICATION_VISIBILITY_CHANGED:
  15. pass # Control became visible/invisible;
  16. # check new status with is_visible().
  17. NOTIFICATION_RESIZED:
  18. pass # Control changed size; check new size
  19. # with get_size().
  20. NOTIFICATION_MODAL_CLOSE:
  21. pass # For modal pop-ups, notification
  22. # that the pop-up was closed.
  1. public override void _Notification(int what)
  2. {
  3. switch (what)
  4. {
  5. case NotificationMouseEnter:
  6. // Mouse entered the area of this control.
  7. break;
  8. case NotificationMouseExit:
  9. // Mouse exited the area of this control.
  10. break;
  11. case NotificationFocusEnter:
  12. // Control gained focus.
  13. break;
  14. case NotificationFocusExit:
  15. // Control lost focus.
  16. break;
  17. case NotificationThemeChanged:
  18. // Theme used to draw the control changed;
  19. // update and redraw is recommended if using a theme.
  20. break;
  21. case NotificationVisibilityChanged:
  22. // Control became visible/invisible;
  23. // check new status with is_visible().
  24. break;
  25. case NotificationResized:
  26. // Control changed size; check new size with get_size().
  27. break;
  28. case NotificationModalClose:
  29. // For modal pop-ups, notification that the pop-up was closed.
  30. break;
  31. }
  32. }