码迷,mamicode.com
首页 > 其他好文 > 详细

FineUI第十四天---布局之垂直布局和水平布局

时间:2015-01-07 18:29:54      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:

布局值水平布局和垂直布局

垂直盒子布局和水平盒子布局非常灵活易用,在很大程度上能够取代锚点布局,行布局和列布局。

 

1.垂直盒子布局:

 BoxConfigAlign:控制子容器的的尺寸

  • Start:位于父容器的开始位置(默认值)
  • Center:位于父容器的中间位置;
  • Stretch:被拉伸至父容器的大小;
  • StretchMax:所有子控件被拉伸至最大子控件的大小。

 BoxConfigPosition:用来控制子容器的位置

  • Start:子控件靠父容器的开始位置排列(默认值);
  • End:子控件靠父容器的结束位置排列;
  • Center:子控件靠父容器的中间位置排列;

 BoxConfigChildMargin:每个子容器的外边距

  • 如果是四个数字组成的字符串,分别表示上边距、右边距、下边距、左边距;
  • 如果是三个数字组成的字符串,分别表示上边距、右边距、下边距,左边距同右边距;
  • 如果是两个数字组成的字符串,分别表示上边距、右边距,左边距同右边距,下边距同上边距;
  • 如果是一个数字组成的字符串,四个方面的边距都为此值。跟css用法一样。
BoxConfigPadding:父容器的内边距
  • 此属性和BodyPadding的作用相同,只不过此时BodyPadding失效了,需要使用此属性设置内边距。
BoxFlex:相对值。。除去一个之外。
第一个子容器BoxFlex=1,第三个子容器BoxFlex=2。所以第一个子容器占据(除去第二个固定高度的子容器)1/3的高度,相应的第三个子容器占据2/3的高度。并且第一个和第三个子容器的高度随着父容器的高度变化而变化。

 小技巧:

父容器设置了BoxConfigChildMargin=0 0 5 0,也即是说每个子容器的下边距为5px,不过最后一个子容器通过BoxMargin=0覆盖了这一属性,从而保证最后一个子容器距离父容器下边界也是5px。


界面效果:

技术分享 

2.水平盒子: 

 跟垂直布局差不多,还有绝对布局,表格布局。都差不多,这里就不多说了!用的时候查api

 

 

FineUI第十四天---布局之垂直布局和水平布局

标签:

原文地址:http://www.cnblogs.com/duyao/p/4208874.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!