|
窗口布局是解决一个窗体中元素的摆放与对齐的问题。
在XUL最常用的就是box布局。
- box
通过修改orient为”horizental”，表示元素水平摆放。为”vertical” 表示元素垂直摆放。
- hbox
元素水平摆放
- vbox
元素垂直摆放
- groupbox
成组框。可以摆放多个元素。它会显示一个框，还可以有标题。
- radiogroup
与groupbox类似。只不过，里面所有的radio按钮都编成一个组，只能有一个被选中。
那么一个box布局的元素只能有一种摆放方向。但box中还可以嵌套box。这样，box+spacer+元素使用flex属性就可以很好的安排元
素在一个窗体中的布局了。完善我们的findfile窗体为：
<vbox
flex=”1″>
<description>
Enter your search criteria below and
select the Find button to begin
the search.
</description>
<hbox>
<label
value=”Search for:” control=”find-text”/>
<textbox
id=”find-text”/>
</hbox>
<hbox>
<spacer flex=”1″/>
<button id=”find-button” label=”Find” default=”true”/>
<button id=”cancel-button” label=”Cancel”/>
</hbox>
</vbox>
效果为：
box中的子元素如果设置为可变，那么当box发生变化时，子元素也会发生变化。当子元素未设置flex时，这个子元素在水平方面不会发生变化，但
在竖直方面可能会发生变化。这是由于box有一个align的属性缺省为stretch，它表示其中的子元素会发生纵向扩展。那么align有以下几个
值：
- start
如果是水平的box，它就是顶端对齐。如果是竖直的box，它就是左对齐。
- center
居中
- end
如果是水平的box，它就是底端对齐。如果是竖直的box，它就是右对齐。
- baseline
文本线对齐，只可以用在水平box上。
- stretch
自动扩展
可以看出align与box本身的方向相反。那么box还有一个同方向的属性设置是pack，它有以下几个值：
- start
对于水平的box，它就是左对齐。对于竖直的box，它就是顶端地齐。
- center
居中
- end
对于水平的box，它就是右对齐。对于竖直的box，它就是底端对齐。
因此pack和align是用来控制不同的方向。因此可以组合出9种不同的位置。
|
