Flex ViewStack高度异常问题

其实很简单的一个注意地方，当使用了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> 

若文章对您有帮助，帮忙点个赞！

0赞

-3踩

发布时间 2009-07-13 02:00:49