Skip to content

布局类型(Layout)折叠条目内的 UI 控件类型都提供了将 UI 对象(UI Object)放置在嵌套布局(如水平、垂直或网格)中的功能。

布局类型的 UI 对象会将其所有子级 UI 对象按照其具体布局方式和设置的属性进行布局。

能够使用自动布局功能,自动按照规范排列所有子级 UI 对象,方便用户制作列表、翻页等功能。

【UIEditor_Layout001.png】

UI 控件窗口(UI Controller)中显示的 布局类型(Layout)折叠条目内的 UI 控件类型。

名称图标实例化样式
水平布局(Horizontal Layout)【UIEditor_Layout002.png】【UIEditor_Layout005.png】
垂直布局( Vertical Layout)【UIEditor_Layout003.png】【UIEditor_Layout006.png】
网格布局(Grid Layout)【UIEditor_Layout004.png】【UIEditor_Layout007.png】

CAUTION

布局类型的 UI 对象他们都是 Control 类的,HorizontalLayout、VerticalLayout、GridLayout 类都不继承自 Control,因此我们不能和除了 视图(Panel)控件类型以外的所有控件类型一样通过类名获取布局类型的 UI 对象。

如果您要获取 HorizontalLayout、VerticalLayout、GridLayout 类,获取方式类似场景中通过 游戏对象(Game Object)获取 组件(Component),您可以通过 Control.GetLayoutGroup(LayoutGroup) 在对应的 UI 对象中获取 HorizontalLayout、VerticalLayout、GridLayout 类(其中 LayoutGroup 可以是 HorizontalLayout、VerticalLayout、GridLayout 之一)。具体使用方法请参阅 API 文档关于 Control.GetLayoutGroup 的内容。获取的代码示例如下:

typescript
class FindLayoutGroup extends Component {

    //定义私有变量保存 UI 组件类(UI Component);
    private _uiComponent: UIComponent;
    //定义私有变量保存 UI 画布;
    private _uiCanvas: Canvas;

    /*
    编辑运行时事件;
    */
    OnStart(): void {
        //获取 UI 组件类(UI Component)并将其保存为 _uiComponent 私有变量;
        this._uiComponent = this.gameObject.GetComponent(UIComponent);
        //获取 UI 画布并将其保存为 _uiCanvas 私有变量;
        this._uiCanvas = this._uiComponent.canvas;

        // 获取布局基类
        let layoutGroupControl:Control = this._uiCanvas.FindChild(Control,"HorizontalLayout");
        let layoutGroup:LayoutGroup = layoutGroupControl.GetLayoutGroup();

        // 获取水平布局
        let horizontalLayoutControl:Control = this._uiCanvas.FindChild(Control,"HorizontalLayout");
        let horizontalLayout:HorizontalLayout = horizontalLayoutControl.GetLayoutGroup(HorizontalLayout);

        // 获取垂直布局
        let verticalLayoutControl:Control = this._uiCanvas.FindChild(Control,"VerticalLayout");
        let verticalLayout:VerticalLayout = verticalLayoutControl.GetLayoutGroup(VerticalLayout);

        // 获取网格布局
        let gridLayoutControl:Control = this._uiCanvas.FindChild(Control,"GridLayout");
        let gridLayout:GridLayout = gridLayoutControl.GetLayoutGroup(GridLayout);

    }

    OnUpdate(): void {
    }

}