Sencha touch 开发系列:组件布局

你如果对ST的组件有了一些认识后，然后你又想做一些东东来体验下ST。拿到设计图后，那么你就需要好好的规划你的应用，需要哪些组件，各组件都应该摆放在哪里？

这个时候你就需要了解一下ST里面的布局（layout)

同样，打开我们的API文当http://docs.sencha.com/touch/2-0/#!/api

找到layout,并展开，

我们可以看到ST为我们提供了：vbox,hbox,card,fit

有人肯定会问还有abstractBox,和default

abstractBox（抽象盒子）是vbox和hbox的父类，是default的子类，

default（默认）提所有布局的基类，一般不需要提交

所以常用的只有vbox,hbox,card,fit

我在此特别声明一下：所有的布局方式都是应用于（容器的）子组件的摆放上面，比如：一个厨房，厨房里面很多东西，如何摆放你必须告诉厨房，而不是告诉桌子或凳子。

下面我们就一一介绍下喽!

vbox:垂直摆放盒子

hobx:水平摆放盒子

card:卡片式存放

fit:填充式存放

先从字面意思上去理解一下

vbox：

就是将容器内部的所有项(item)，垂直方式摆放。

看图:

代码：

//在一个全屏的容器中，我们放了四个子项，第一项占了一份 
Ext.create('Ext.Container', {
    fullscreen:true,   
    layout: 'vbox',
    items: [
        {
            //第一项，占了四份中的一份
            html: "First Item",
            style:'background:red',
            flex:1,
        },
        {
            //第二项，占了四份中的一份
            html: "Second Item",
            style:'background:yellow',
            flex:1,
        },
        {
            //第三项，占了四份中的一份
            html: "Third Item",
            style:'background:blue',
            flex:1,
        },
        {
            //第四项，占了四份中的一份
            html: "Fourth Item",
            style:'background:green',
            flex:1,
        }
    ]
});

看代码备注。

我们在一个全屏的容器，放了四个item，我们又采用了vbox，意味着，我们将需要把这些项垂直摆放。

有人会问了，那如何去确定某一项占多少位置（高度）呢?

恩，我们确实需要告诉这个容器，各子项需要多少位置才能放得下，在这我们应用了flex（份数），通过flex去请求容器给它对应的空间。

容器在这种布局会汇总所有子项的flex总数。然后平分，在这我们flex总数是4，那就意味着，我们这个全容器将分成4分，每个子项的flex都是1，说明他们都只点了一份了（平均分配了！）

在图上，你可以看出，他们的高度都相等的哦。

你可以把上面的代码复制到我们的code editor中去查看他的效果，然后改变各项的 flex去体验容器是怎么分配空间的。

又有人会问了，flex无法确定我的实际高度？

恩，确实，这里我们还有一个利器 height，我们可以通过设定某一个子项的height告诉容器它需要审请多少高度。

如：

//在一个全屏的容器中，我们放了四个子项，第一项占了150的高度，然后将容器的剩余高度分成了三份，每项占一份
Ext.create('Ext.Container', {
    fullscreen:true,   
    layout: 'vbox',
    items: [
        {
            //第一项，占了150px的高度
            html: "First Item",
            style:'background:red',
            height:150,
        },
        {
            //第二项，占了三份中的一份
            html: "Second Item",
            style:'background:yellow',
            flex:1,
        },
        {
            //第三项，占了三份中的一份
            html: "Third Item",
            style:'background:blue',
            flex:1,
        },
        {
            //第四项，占了三份中的一份
            html: "Fourth Item",
            style:'background:green',
            flex:1,
        }
    ]
});

效果：

注意看代码备注，或许已经明白了？

vbox是作于垂直方向的，用来分配窗器高度的。

那么hobx就很明显了，他是平分容器宽度的。

我们把上述代码的layout改为hbox,看看效果。

代码：

//在一个全屏的容器中，我们放了四个子项，第一项占了150的宽度，然后将容器的剩余高度分成了三份，每项占一份
Ext.create('Ext.Container', {
    fullscreen:true,   
    layout: 'hbox',
    items: [
        {
            //第一项，占了150px的高度
            html: "First Item",
            style:'background:red',
            width:150,
           
        },
        {
            //第二项，占了三份中的一份
            html: "Second Item",
            style:'background:yellow',
            flex:1,
        },
        {
            //第三项，占了三份中的一份
            html: "Third Item",
            style:'background:blue',
            flex:1,
        },
        {
            //第四项，占了三份中的一份
            html: "Fourth Item",
            style:'background:green',
            flex:1,
        }
    ]
});

同样看备注，你或许能够明白了vbox和hbox的区别与作用了？不明白的，速度加入我们的社区或群:13453484

下面我们一搞个vbox和hbox结合的例子

代码：

//在一个全屏的容器中，我们放了四个子项，将容器的剩余高度分成了四份，每项占一份
Ext.create('Ext.Container', {
    fullscreen:true,   
    layout: 'vbox',
    items: [
        {
            //第一项，占了四份中的一份      
            style:'background:red',
            flex:1,
            layout:'hbox',
            items:[{html:'hbox的子项一',flex:1, style:'background:white'},{html:'hbox的子项二',flex:1, style:'background:gray',}]
           
        },
        {
            //第二项，占了四份中的一份
            html: "Second Item",
            style:'background:yellow',
            flex:1,
        },
        {
            //第三项，占了四份中的一份
            html: "Third Item",
            style:'background:blue',
            flex:1,
        },
        {
            //第四项，占了四份中的一份
            html: "Fourth Item",
            style:'background:green',
            flex:1,
        }
    ]
});

效果：

至此，你会用了没,理解了没？不会的,不理解的，就code editor里面多多练习，多多体会哈。这很重要哦......

 

下面，我们来讲fit,card。

fit是用来将子项整个填充至容器中，意思就是窗口有多子，那么他下面的子项就有多大了。

用实例说话：

//创建一个300*200的容器，里面放了一个子项，并指定这个容器的layout为fit布局
var container= Ext.create('Ext.Container', {
    width: 300,
    height: 200,
    layout: 'fit',
    items: {
        xtype: 'panel',
        html: '我也将是300*200的大小',
        style:'background:red'
    }
});

//将container添加到我们的St应用的顶层容器中，Ext.Viewport是一个全局容器，无需定义，它指向的是你应用的最顶层。
Ext.Viewport.add(container);

效果：

那么card布局是怎样的呢，他其实和fit相似，只是他可以有多层，就像卡放一样叠起来放在容器中。

照样用实例说话：

//创建一个全屏的容器，在里面放了四项，容器的layout为card
var container= Ext.create('Ext.Container', {
    layout: 'card',
    fullscreen:true,
    items: [
        {
            html: "First Item"
        },
        {
            html: "Second Item"
        },
        {
            html: "Third Item",
            style:'background:red',

        },
        {
            html: "Fourth Item"
        }
    ]
});
//默认我们会显示第一项，因采用card布局，我们可以指定将第三项显示出来（下标从0开始）
container.setActiveItem(2);

效果：

//看备注，明白了么？很简单，card布局内的东西就是把它一层层堆在里面，要显示哪一层的时候，只需要调用容器的setActiveItem  

card在一次显示上，只会显示一个子项，而其它的子项将是不可见的。

就上面的例子，我们把layout的card改为fit

你再看效果：

即便是我们调和了setActiveItem容器也是把四个项都显示出来的，很乱？

现在明白fit和card的区别了吧

如果容器中只一项，且需要填充显示的时候你可以用fit,如果有多项且需要分层灵活显示，那么你就需要用card了。

至此，我们的布局全部讲完了，学习还得靠自己哈，多多练习，就在我们的code editor里面，每种布局你都需要玩熟哦。

学习中有不明白的，速度加入我们的社区或群:13453484

 

 

 

作者：Louja
出处：http://html5mob.cnblogs.com 同步在：http://html5mob.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此声明，且在文章页面给出原文连接，否则保留追究法律责任的权利。