Class: Layout ​

控制布局
当添加了控制布局组件后，原本的position、size和scale可能会被自动管控手动设置将不会生效

// 创建节点
const node = new Transform();
// 添加布局组件
const layout = node.addComponent(Layout);
// 设置铺满整个父节点
layout.left = 0;
layout.right = 0;
layout.top = 0;
layout.right = 0;
// 放入父节点
parent.addChild(node);

Hierarchy ​

• Component

  ↳ Layout

Table of contents ​

Constructors ​

• constructor

Properties ​

• _markResize
• emitter
• id
• name
• node

Accessors ​

• bottom
• horizontal
• left
• right
• top
• vertical

Methods ​

• destroy
• getOffsetLocation
• onDestroy
• resize
• saveNewSize
• start
• update

Constructors ​

constructor ​

• new Layout()

组件不能单独实例化，必须通过Transform.addComponent创建

const node = new Transform();
const componet = node.addComponent(Component);

Inherited from ​

Component.constructor

Defined in ​

src/core/component/Component.ts:37

Properties ​

_markResize ​

• _markResize: boolean = false

Defined in ​

src/core/component/Layout.ts:157

emitter ​

• emitter: EventEmitter<string | symbol, any>

事件处理器

Inherited from ​

Component.emitter

Defined in ​

src/core/component/Component.ts:27

id ​

• id: number

用于表示组件的唯一标识

Inherited from ​

Component.id

Defined in ​

src/core/component/Component.ts:12

name ​

• name: string = ''

组件名

Inherited from ​

Component.name

Defined in ​

src/core/component/Component.ts:17

node ​

• node: Transform<Container>

组件挂载节点

Inherited from ​

Component.node

Defined in ​

src/core/component/Component.ts:22

Accessors ​

bottom ​

• get bottom(): number

相对底部的距离

Returns ​

number

Defined in ​

src/core/component/Layout.ts:67

• set bottom(val): void

Parameters ​

Returns ​

void

Defined in ​

src/core/component/Layout.ts:70

horizontal ​

• get horizontal(): number

垂直居中
top 和 bottom 将失效
注意：如果要让节点真正实现垂直居中需要设置节点的anchor

const node = new Transform();
node.anchor.y = 0.5;
node.addComponent(Layout);

Returns ​

number

Defined in ​

src/core/component/Layout.ts:109

• set horizontal(val): void

Parameters ​

Returns ​

void

Defined in ​

src/core/component/Layout.ts:112

left ​

• get left(): number

相对左边的距离

Returns ​

number

Defined in ​

src/core/component/Layout.ts:31

• set left(val): void

Parameters ​

Returns ​

void

Defined in ​

src/core/component/Layout.ts:34

right ​

• get right(): number

相对右边的距离

Returns ​

number

Defined in ​

src/core/component/Layout.ts:55

• set right(val): void

Parameters ​

Returns ​

void

Defined in ​

src/core/component/Layout.ts:58

top ​

• get top(): number

相对顶部的距离

Returns ​

number

Defined in ​

src/core/component/Layout.ts:43

• set top(val): void

Parameters ​

Returns ​

void

Defined in ​

src/core/component/Layout.ts:46

vertical ​

• get vertical(): number

水平剧中
left 和 right 将失效
注意：如果要让节点真正实现水平居中需要设置节点的anchor

const node = new Transform();
node.anchor.x = 0.5;
node.addComponent(Layout);

Returns ​

number

Defined in ​

src/core/component/Layout.ts:87

• set vertical(val): void

Parameters ​

Returns ​

void

Defined in ​

src/core/component/Layout.ts:90

Methods ​

destroy ​

▸ destroy(): void

消毁

Returns ​

void

Inherited from ​

Component.destroy

Defined in ​

src/core/component/Component.ts:55

getOffsetLocation ​

▸ getOffsetLocation(): Vector2

获取本地偏移

Returns ​

Vector2

Defined in ​

src/core/component/Layout.ts:149

onDestroy ​

▸ Optional onDestroy(): void

组件被销毁时触发

Returns ​

void

Inherited from ​

Component.onDestroy

Defined in ​

src/core/component/Component.ts:62

resize ​

▸ resize(): void

重新计算布局/矫正布局

const node = new Transform();
const layout = node.addComponent(Layout);
node.anchor.set(0.5, 0.5);
layout.resize();

Returns ​

void

Defined in ​

src/core/component/Layout.ts:168

saveNewSize ​

▸ saveNewSize(): void

当挂载节点尺寸发生变化，且需要重新动态计算时调用
将保存当前组件的位置和大小状态

Returns ​

void

Defined in ​

src/core/component/Layout.ts:138

start ​

▸ start(): void

组件被挂载到节点时触发

Returns ​

void

Overrides ​

Component.start

Defined in ​

src/core/component/Layout.ts:121

update ​

▸ update(): void

每帧调用

Returns ​

void

Overrides ​

Component.update

Defined in ​

src/core/component/Layout.ts:153