容器、按钮定义
// 容器
let myGroup = new eui.Group();
this.addChild(myGroup);
myGroup.width = this.stage.stageWidth;
myGroup.height = 500;
var outline: egret.Shape = new egret.Shape;
outline.graphics.lineStyle(3, 0x00ff00);
outline.graphics.beginFill(0x000000, 0);
outline.graphics.drawRect(0, 0, myGroup.width, myGroup.height);
outline.graphics.endFill();
myGroup.addChild(outline);
// 按钮组
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";
myGroup.addChild(btn1);
myGroup.addChild(btn2);
myGroup.addChild(btn3);
基本布局
单个元素水平垂直居中
btn1.horizontalCenter = 0; // 在父级容器中距水平中心位置的距离
btn1.verticalCenter = 0; // 在父级容器中距竖直中心位置的距离
myGroup.layout = new eui.BasicLayout();
边距设置
btn2.top = 100;
btn2.left = 40;
btn2.bottom = 200;
btn2.right = 20;
百分比设定
btn3.percentWidth = 60;
btn3.percentHeight = 80;
水平布局 & 垂直布局
- 水平布局：
eui.HorizontalLayout - 垂直布局：
eui.VerticalLayout - 参数：
-
gap：设置子项之间的间距 -
horizontalAlign：设置水平对齐方式 -
verticalAlign：设置垂直对齐方式 -
padding：设置容器内间距，相对于4个边分别可以使用paddingTop,addingBottom,addingLeft,paddingRight
水平布局
/** 水平布局 */
var hLayout: eui.HorizontalLayout = new eui.HorizontalLayout();
hLayout.gap = 10; // 布局元素之间的间隔（以像素为单位）
hLayout.paddingTop = 10;
hLayout.paddingBottom = 10;
hLayout.horizontalAlign = egret.HorizontalAlign.CENTER;
hLayout.verticalAlign = egret.VerticalAlign.MIDDLE;
myGroup.layout = hLayout;
垂直布局
/** 垂直布局 */
var vLayout:eui.VerticalLayout = new eui.VerticalLayout();
vLayout.gap = 10;
vLayout.paddingTop = 10;
vLayout.paddingBottom = 10;
vLayout.horizontalAlign = egret.HorizontalAlign.CENTER;
vLayout.verticalAlign = egret.VerticalAlign.MIDDLE;
myGroup.layout = vLayout;
网格布局
- 网格布局：
eui.TileLayout - 参数：
-
horizontalGap：设置子项之间的水平间距 -
verticalGap：设置子项之间的垂直间距 -
columnAlign：指定如何将完全可见列与容器宽度对齐。 -
rowAlign：指定如何将完全可见行与容器高度对齐。 -
padding：设置容器内间距，如果需要分开设置可以使用paddingTop,paddingBottom,paddingLeft,paddingRight -
requestedColumnCount：明确指定要显示的列数
var tLayout:eui.TileLayout = new eui.TileLayout();
tLayout.horizontalGap = 10;
tLayout.verticalGap = 10;
tLayout.columnAlign = eui.ColumnAlign.JUSTIFY_USING_WIDTH;
tLayout.rowAlign = eui.RowAlign.JUSTIFY_USING_HEIGHT;
tLayout.paddingTop = 10;
tLayout.paddingRight = 20;
tLayout.paddingBottom = 30;
tLayout.paddingLeft = 40;
tLayout.requestedColumnCount = 2; // 设置两列显示
myGroup.layout = tLayout; // 网格布局
