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)，垂直方式摆放。

看图:



代码：

看代码备注。

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

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

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

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

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

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

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

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

如：

效果：



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

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

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

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

代码：

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

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

代码：

效果：



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

下面，我们来讲fit,card。

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

用实例说话：

效果：



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

照样用实例说话：

效果：



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

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

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

你再看效果：



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

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

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

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