egret-docs-master/extension/EUI/useLayout/horizontallayout
guofei 4fe0162b34 fist commit 2024-06-19 13:32:32 +08:00
..
20170920122619.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 项目中创建的教程代码。

在横向布局,以及下面将要讲的垂直布局,网格布局中,都会忽略在子项上的坐标设置,所有子项的位置将由布局类统一管理。

横向布局会自动将所有的子项横着排列,可以做以下的设置:

  • gap属性,设置子项之间的间距
  • horizontalAlign属性,设置水平对齐方式
  • verticalAlign属性,设置垂直对齐方式
  • padding系列属性设置容器内间距相对于4个边分别可以使用 paddingTop, addingBottom, addingLeft, paddingRight

示例:

class hLayout extends egret.Sprite {

    private  myGroup:eui.Group;
    public constructor() {
        super();

        this.myGroup = new eui.Group();
        this.addChild( this.myGroup );

        this.myGroup.layout = new eui.BasicLayout();
        this.myGroup.width = 500;
        this.myGroup.height = 300;
        
        var outline:egret.Shape = new egret.Shape;
        outline.graphics.lineStyle(3,0x00ff00);
        outline.graphics.beginFill(0x000000,0);
        outline.graphics.drawRect(0,0,500,300);
        outline.graphics.endFill();
        this.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";
        this.myGroup.addChild( btn1 );
        this.myGroup.addChild( btn2 );
        this.myGroup.addChild( btn3 );

        var hLayout:eui.HorizontalLayout = new eui.HorizontalLayout();
        hLayout.gap = 10;
        hLayout.paddingTop = 30;
        hLayout.horizontalAlign = egret.HorizontalAlign.CENTER;
        this.myGroup.layout = hLayout;   /// 水平布局

    }
}

效果如图: