Flex4 画面常见问题备忘

1：Flex SDK4 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>

 写下如上代码，我们会认为：

 

Panel容器会显示滚动条，以便正好能“装下”这三个button组件。
如果以上代码在halo组件中或者Flex SDK 3里面，这是理所当然的事情。

但是在Flex SDK 4(Gumbo)里面，却没有这样实现。而是VGroup的边界超出了Panel的边界。

 

查看了一下原因，很可惜，Gumbo明显是把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>

 2：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，那么这个时候是非常难发现的。