Flex ViewStack高度異常問題

我跟WonJia打算寫一個類似於《Flex編程注意之XX》的系列文章,此係列文章主要就是介紹一些我們在實際的項目中發現的一些Flex的問題,而這些問題可能已經被人發現了,也可能沒被人發現,所以在此記錄一下。 其實很簡單的一個注意地方,當使用了ViewStack並且將其height設定爲100%,同時在其中添加了多個child container(A 和 B)。那麼ViewStack的高度將會怎樣呢?這個例子可以應用與:多個組件而不同的狀態,例如:在某些情況我需要顯示A的UI,另外在某些地方我需要顯示B的UI,然而它們的高度與寬度都是不一樣的,那麼假設A的高度要大於B的高度,那麼當我想要顯示B的時候,就會發生如下的問題,雖然我將其Application的高度設定的與B一致,按照通常的做法,由於ViewStack的height爲100%,那麼則認爲它與Application的高度是一致的那麼那個空白的邊是如何出現的呢?其實這個地方在使用ViewStack的時候,有一個注意點,那就是:當ViewStack的height設定爲100%時,ViewStack的高度不會與Application的高度一直,而它的高度會根據其中的最高的那個child一致。其實這個特性在簡單的例子中是非常容易被發現的,但是假設在做項目的時候,很多的height都設定爲100%同時又包含了多個container,那麼這個時候是非常難發現的,跟大家在說一個技巧:如果遇到這樣的情況,那麼將這些多個container用不同的背景色加以區分,最後就可以看到是哪個container出現問題了!還是那句話,可能這個特性已經很多人知道了,但是我還是要在這裏指出,做一個備份和讓不知道的朋友也瞭解一下,免得多走彎路:)具體請看如下的代碼:(代碼是在componentexplorer的基礎上修改的。)


<?xml version="1.0"?>
<!-- Simple example to demonstrate the ViewStack layout container. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="500" creationComplete="{ myViewStack.selectedIndex = 1 }">
<!-- Define the ViewStack and the three child containers and have it
resize up to the size of the container for the buttons. -->
<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="100%">
<mx:Canvas id="search" backgroundColor="#FFFFCC" label="Search" width="100%" height="100">
<mx:Label text="Search Screen" color="#000000" />
</mx:Canvas>
<mx:Canvas id="custInfo" backgroundColor="#CCFFFF" label="Customer Info" width="100%" height="200">
<mx:Label text="Customer Info" color="#000000" />
</mx:Canvas>
<mx:Canvas id="accountInfo" backgroundColor="#FFCCFF" label="Account Info" width="100%" height="300">
<mx:Label text="Account Info" color="#000000" />
</mx:Canvas>
</mx:ViewStack>
</mx:Application>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章