Flex SDK 4(Gumbo)改善的Layout和Scroller（二）

上一篇文章我們分析了Flex SDK 4(Gumbo)的佈局功能，本篇文章是幫助大家理解Flex SDK 4(Gumbo)另外一個特性：可視區域（Scroller）

可視區域（Scroller）或者又叫滾動顯示組件區域。
這是Flex SDK 4(Gumbo) spark新增的組件，就是用於當Scroller裏面的內容邊界超出Scroller後，以便顯示滾動條。

讓我們看一個片段代碼。
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/halo"
      width="100%" height="100%">
       ........................................................................................................
      <s:Panel width="400" height="100" title="Panle">
            <s:layout>
                  <s:VerticalLayout horizontalAlign="center" paddingTop="30"/>
            </s:layout>
            <s:VGroup width="100%" height="100%">
                  <s:Button width="200" label="tesing1" />
                  <s:Button width="200" label="tesing2" />
                  <s:Button width="200" label="tesing3" />
            </s:VGroup>
      </s:Panel>
</s:Application>

上面的內容，我大致翻譯一下：
1、s:Application的layout是s:VerticalLayout性質的。
2、其中包含了一個Panel容器。
3、在Panel容器中包含了一個VGroup容器。
4、在VGroup容器中包含了3個button組件。

請看實際運行圖：

 

根據上圖所示，我們發現button超出了Panel的邊界，這是很奇怪的現象。
如果以上代碼在halo組件中或者Flex SDK 3裏面，那麼Panel容器會顯示滾動條，以便正好能“裝下”這三個button組件。
但是在Flex SDK 4(Gumbo)裏面，卻沒有這樣實現。而是VGroup的邊界超出了Panel的邊界。（即上圖所示）

造成這樣情況的原因：
因爲Flex SDK 4(Gumbo)裏面把滾動條當作了一個獨立的容器來對待，即文中上面說的：Scroller。

Scroller的繼承關係：
Scroller → SkinnableComponent → UIComponent

通過上述的繼承關係可見：
Scroller是一個地地道道可視化組件，其地位與spark其他的組件（如Group、Button等是一樣的地位） ,這樣做的好處：
1、把負責滾動的屬性單獨封裝成一個單獨的容器。
2、這樣做可以使各種spark組件功能更加的單一化。
3、由於繼承了SkinnableComponent，我們可以很容器對其skin進行修改（即使用sparkSkin等方式）
4、可以對任意可視化組件的滾動條樣式實現自定義。

讓我們看一下加入Scroller後的片段代碼：

<s:Panel width="400" height="100" title="Panle">
     <s:layout>
          <s:VerticalLayout horizontalAlign="center" paddingTop="30"/>
     </s:layout>
     <s:Scroller width="100%" height="100%">
          <s:VGroup width="100%" height="100%">
               <s:Button width="200" label="tesing1" />
               <s:Button width="200" label="tesing2" />
               <s:Button width="200" label="tesing3" />
          </s:VGroup>
     </s:Scroller>
</s:Panel>

okay，讓我們看一下加入Scroller的效果

通過這樣的設定後，看起來的效果與Flex SDK 3一摸一樣了。
雖然看似增加了一些代碼量（需要加入<s:Scroller>的緣故）但是spark給我們帶來了更單一的組件功能封裝、更好的擴展性。：）