从2D编辑器添加不同的布局选项

问题描述

我想为纵向和横向模式制作以下视图：

纵向显示视图为

A
B
C

（看起来好像它们在VBox中）

在横向中，将视图显示为

A C
B

（看起来像HBox（VBox（A，B），C））

我可以通过使用自定义容器来做到这一点，但这意味着我自己要测量尺寸，并要求容器中的直属子代所有3个节点。

我想知道是否存在一种不同的方法，我们可以在编辑器中定义两个完全独立的布局，并将某些节点与所需的节点关联；这是我通过android dev更熟悉的一种模式，在该模式下，我们可以创建两个完全不同的布局，并通过具有相同的id关联某些视图。

对于这种情况，我将能够使用现有的VBox和HBox创建上面提到的布局，并告诉根注释将A，B，C放置在应有的位置。子级不再是根容器的直接子级，我可以将其他节点添加到布局中的一个，而不是另一个。如果用户在这两种布局之间切换，我希望保留共享节点（A，B，C）中的内容。

在Godot中有没有办法做类似的事情？

解决方法

您可以通过在编辑器中创建两个单独的布局并在需要时实例化+替换来完成您要描述的事情。

extends Control
        
const LANDSCAPE_LAYOUT = preload("res://Landscape.tscn")
const PORTRAIT_LAYOUT = preload("res://Portrait.tscn")
var orientation = 0
onready var layout = $Layout // root node of UI you will replace

func _process(delta):
    if orientation != OS.screen_orientation:
        _change_layout()


func _change_layout():
    orientation = OS.screen_orientation
    var new_layout = null
    match orientation:
        0:
            new_layout = LANDSCAPE_LAYOUT.instance()
        1:
            new_layout = PORTRAIT_LAYOUT.instance()
        _:
            return  // feel free to include the other cases in ScreenOrientation enum.

    var layout_position = layout.get_position_in_parent()
    remove_child(layout)
    add_child(new_layout)
    move_child(new_layout,layout_position)
    layout = new_layout

类似于Android活动生命周期，每当方向更改时，您都将破坏并重新创建UI的一部分。

我正在手动检查方向，因为当前无法获取回调。如果要让多个节点检查方向，则最好设置一个单例并在检测到更改时发出信号。