egret-docs-master/extension/EUI/useLayout/verticallayout
guofei 4fe0162b34 fist commit 2024-06-19 13:32:32 +08:00
..
56012ed082c88.png fist commit 2024-06-19 13:32:32 +08:00
README.md fist commit 2024-06-19 13:32:32 +08:00

README.md

垂直布局的行为和水平布局类似,只是方向从水平方向变为竖直方向。

这里仍然使用 eui 默认项目。

仍然使用水平布局所用的代码,将布局方式改变为垂直:

var btn1:eui.Button = new eui.Button();
btn1.label = "button A";
var btn2:eui.Button = new eui.Button();
btn2.label = "button B";
var btn3:eui.Button = new eui.Button();
btn3.label = "button C";
this.myGroup.addChild( btn1 );
this.myGroup.addChild( btn2 );
this.myGroup.addChild( btn3 );

var vLayout:eui.VerticalLayout = new eui.VerticalLayout();
vLayout.gap = 10;
vLayout.paddingTop = 30;
vLayout.horizontalAlign = egret.HorizontalAlign.CENTER;
this.myGroup.layout = vLayout; //设置问垂直布局

效果如图:

对比水平布局可以看到容器内的UI控件是作为一个整体参与布局的。