窗口布局是解決一個(gè)窗體中元素的擺放與對(duì)齊的問(wèn)題。

在XUL最常用的就是box布局。

• box
  通過(guò)修改orient為”horizental”，表示元素水平擺放。為”vertical” 表示元素垂直擺放。
• hbox
  元素水平擺放
• vbox
  元素垂直擺放
• groupbox
  成組框?？梢詳[放多個(gè)元素。它會(huì)顯示一個(gè)框，還可以有標(biāo)題。
• radiogroup
  與groupbox類(lèi)似。只不過(guò)，里面所有的radio按鈕都編成一個(gè)組，只能有一個(gè)被選中。

那么一個(gè)box布局的元素只能有一種擺放方向。但box中還可以嵌套box。這樣，box+spacer+元素使用flex屬性就可以很好的安排元 素在一個(gè)窗體中的布局了。完善我們的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中的子元素如果設(shè)置為可變，那么當(dāng)box發(fā)生變化時(shí)，子元素也會(huì)發(fā)生變化。當(dāng)子元素未設(shè)置flex時(shí)，這個(gè)子元素在水平方面不會(huì)發(fā)生變化，但 在豎直方面可能會(huì)發(fā)生變化。這是由于box有一個(gè)align的屬性缺省為stretch，它表示其中的子元素會(huì)發(fā)生縱向擴(kuò)展。那么align有以下幾個(gè) 值：

• start
  如果是水平的box，它就是頂端對(duì)齊。如果是豎直的box，它就是左對(duì)齊。
• center
  居中
• end
  如果是水平的box，它就是底端對(duì)齊。如果是豎直的box，它就是右對(duì)齊。
• baseline
  文本線對(duì)齊，只可以用在水平box上。
• stretch
  自動(dòng)擴(kuò)展

可以看出align與box本身的方向相反。那么box還有一個(gè)同方向的屬性設(shè)置是pack，它有以下幾個(gè)值：

• start
  對(duì)于水平的box，它就是左對(duì)齊。對(duì)于豎直的box，它就是頂端地齊。
• center
  居中
• end
  對(duì)于水平的box，它就是右對(duì)齊。對(duì)于豎直的box，它就是底端對(duì)齊。

因此pack和align是用來(lái)控制不同的方向。因此可以組合出9種不同的位置。