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" ,<br>            style: 'background:red' ,<br>          },          {              html: "Fourth Item"          }      ] }); //默认我们会显示第一项，因采用card布局，我们可以指定将第三项显示出来（下标从0开始） container.setActiveItem(2);

效果：

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

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

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

你再看效果：

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

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

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

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