Flex ViewStack高度異常問題

更新時間：2009年07月13日 00:27:55 作者：

我跟WonJia打算寫一個類似于《Flex編程注意之XX》的系列文章，此系列文章主要就是介紹一些我們在實際的項目中發(fā)現(xiàn)的一些Flex的問題，而這些問題可能已經(jīng)被人發(fā)現(xiàn)了，也可能沒被人發(fā)現(xiàn)，所以在此記錄一下。

其實很簡單的一個注意地方，當(dāng)使用了ViewStack并且將其height設(shè)定為100%，同時在其中添加了多個child container（A 和 B）。那么ViewStack的高度將會怎樣呢？這個例子可以應(yīng)用與：多個組件而不同的狀態(tài)，例如：在某些情況我需要顯示A的UI，另外在某些地方我需要顯示B的UI，然而它們的高度與寬度都是不一樣的，那么假設(shè)A的高度要大于B的高度，那么當(dāng)我想要顯示B的時候，就會發(fā)生如下的問題，雖然我將其Application的高度設(shè)定的與B一致，按照通常的做法，由于ViewStack的height為100%，那么則認(rèn)為它與Application的高度是一致的那么那個空白的邊是如何出現(xiàn)的呢？其實這個地方在使用ViewStack的時候，有一個注意點，那就是：當(dāng)ViewStack的height設(shè)定為100%時，ViewStack的高度不會與Application的高度一直，而它的高度會根據(jù)其中的最高的那個child一致。其實這個特性在簡單的例子中是非常容易被發(fā)現(xiàn)的，但是假設(shè)在做項目的時候，很多的height都設(shè)定為100%同時又包含了多個container，那么這個時候是非常難發(fā)現(xiàn)的，跟大家在說一個技巧：如果遇到這樣的情況，那么將這些多個container用不同的背景色加以區(qū)分，最后就可以看到是哪個container出現(xiàn)問題了！還是那句話，可能這個特性已經(jīng)很多人知道了，但是我還是要在這里指出，做一個備份和讓不知道的朋友也了解一下，免得多走彎路：）具體請看如下的代碼：（代碼是在componentexplorer的基礎(chǔ)上修改的。）

復(fù)制代碼代碼如下:

<?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> 