布局器是EdoJS界面排布的基石，它跟容器紧密配合，排布容器内的子组件，达到理想的界面布局效果。

EdoJS目前一共有4种布局器，如下：

布局器只能被容器使用，一个容器必须使用一个布局器来排布其容纳的子组件们。布局器是静态对象，因此无需实例化。

改变容器的布局器

容器有一个初始默认布局器，一般是：vertical。

要改变一个容器的布局器，我们可以这样做：

ct.set('layout', 'horizontal');

布局器的布局配置属性

布局器对象本身不需要配置布局属性，但是其实从一个布局逻辑的角度来说，必然或有一些布局属性配置。

EdoJS将布局属性分摊在容器和容器内的子组件上，比如：

Edo.create({
    type: 'box',
    height: 100,
    width: 300,
    layout: 'horizontal',    
    horizontalGap: 0,           //横向间距
    verticalAlign: 'center',    //竖向位置
    horizontalAlign: 'right',   //横向位置
    children: [
        {
            type: 'button',
            text: 'button',
            height: '100%'
        },
        {
            type: 'text',
            width: '30%',
            height: '50%'       //子组件上的布局属性
        }
    ],
    render: document.body
});

效果图如下：

这里，horizontalGap、verticalAlign和horizontalAlign设置在容器对象上，这三个属性就是horizontal布局器需要的布局配置属性，horizontal布局器通过这三个属性的值，得知将子组件的横向间距设置为0，并且右下摆放。

子组件的width和height属性是百分比，horizontal布局器同时从每个子组件的宽度和高度得知，他们应该是容器尺寸的百分之多少，从而设置子组件的尺寸外观大小。

每个布局器都有自己独特的布局逻辑，并且需要容器和组件的配合。当您选择使用不同的布局器时，对容器和组件的布局属性要求也不一样。下面我们一一介绍下4种布局器的布局属性和布局效果：

Vertical 竖向布局器

Vertical 是控制竖向排布的布局器。当设置容器的layout为"vertical"时，就应用了此布局器。

容器布局属性：横向定位horizontalAlign（left\center\right）, 竖向定位verticalAlign（top\middle\bottom）, 横向间距horizontalGap（Number数字），竖向间距verticalGap（Number数字）。

示例代码如下：

Edo.create({
    type: 'box',
    layout: 'vertical',
    width: 200,
    height: 100,
    horizontalAlign: 'center',  //左右居中定位
    verticalAlign: 'bottom',    //上下置底定位
    verticalGap: 10,            //组件竖向间距30
    children: [
        {
            type: 'text'
        },
        {
            type: 'button',
            text: '按钮'
        }
    ],
    render: document.body
});

效果如如下：

Horizontal 横向布局器

容器布局属性：横向定位horizontalAlign（left\center\right）, 竖向定位verticalAlign（top\middle\bottom）, 横向间距horizontalGap（Number数字），竖向间距verticalGap（Number数字）。跟Vertical竖向布局器是一样的布局属性。

示例代码如下：

Edo.create({
    type: 'box',
    layout: 'horizontal',
    width: 200,
    height: 100,
    horizontalAlign: 'center',  //左右居中定位
    verticalAlign: 'middle',    //上下居中定位
    horizontal: 10,            //组件横向间距30
    children: [
        {
            type: 'text'
        },
        {
            type: 'button',
            text: '按钮'
        }
    ],
    render: document.body
});

效果图如下：

Absolute 定位布局器

Absolute是定位布局器，此布局器的布局属性，作用在子组件上：left,、top、right、bottom。

示例代码如下：

Edo.create({
    type: 'box',
    layout: 'absolute',
    width: 200,
    height: 100,        
    children: [
        {
            type: 'text',
            left: 5,
            top: 5
        },
        {
            type: 'box',                
            left: 30,
            top: 40,
            bottom: 10,
            right: 10
        }
    ],
    render: document.body
});

效果图如下：

ViewStack 导航布局器

Viewstack一个时刻只能显示容器中的某一个组件，而不能全部显示。

有一个作用在容器上的布局属性：selectedIndex，表示当前显示容器内的哪一个索引号的子组件。

此布局器经常用在Tabs切换导航场景中，如下示例：

Edo.build({
    type: 'box', verticalGap: 0, renderTo: '#body',        
    children:[
        {
            type: 'tabbar', selectedIndex: 0,
            onselectionchange: function(e){                    
                ct2.set('selectedIndex', this.selectedIndex);
            },
            children: [{text: 'tab1', type: 'button'},{text: 'tab2', type: 'button'}]
        },
        {
            id: 'ct2', type: 'box', border: [1,0,1,1], layout: 'viewstack', 
            style: 'background-color:white;', width: '100%',
            children: [
                {
                    type: 'button',
                    text: 1
                },
                {
                    type: 'dialog',
                    title: '表单2',                        
                    children:[
                        {
                            type: 'box',
                            width: 100,
                            height: 50
                        }
                    ]
                }
            ]
        }
    ]
});

效果图如下：