# 布局器篇

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

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

Vertical : 竖向布局器

Horizontal : 横向布局器

Absolute : 定位布局器

ViewStack : 导航布局器

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

# 改变容器的布局器

容器有一个初始默认布局器，一般是：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
                            }
                        ]
                    }
                ]
            }
        ]
    });

效果图如下：