Tamanho de Container com Base nos Filhos
Quando criamos um Container no Flex e não especificamos seu tamanho, o tamanho será calculado com base nos filhos que são adicionados ao Container. Porém, caso você especifique um tamanho para ele, o tamanho passa a ser o que você especificou e, caso ele seja menor do que o tamanho dos filhos, o componente exibirá uma ScrollBar.
Mas e se você quiser que ele volta a calcular o tamanho para você? Existem alguns casos em que precisamos que isso seja feito, porém não podemos atribuir "null" ou -1 como valor na propriedade para que o Container volte ao comportamento inicial.
Conversando com o Beck Novaes a muito tempo atrás, ele me apontou uma solução para isso. Se vocês olharem no código de alguns componentes do Flex (como o Container ou o UIComponent), vocês encontrarão várias referências para a função isNaN() e, como muitos de vocês devem saber, NaN é o valor atribuído a variáveis numéricas quando não estão com algum valor numérico atribuído.
Portanto, para que o componente calcule o tamanho para você, faça o seguinte:
-
myContainer.height = NaN;
Um exemplo completo:
-
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="100%" width="100%">
-
-
<mx:Script>
-
<![CDATA[
-
private function sizeChanged():void
-
{
-
if (group.selection == rbFixed)
-
{
-
myVBox.height = 100;
-
}
-
else
-
{
-
myVBox.height = NaN;
-
}
-
}
-
]]>
-
</mx:Script>
-
-
<mx:HBox>
-
<mx:RadioButtonGroup id="group"
-
change="sizeChanged()"/>
-
<mx:RadioButton id="rbFixed" label="Fixed Size" selected="true"
-
group="{group}"/>
-
<mx:RadioButton id="rbAuto" label="Auto Size"
-
group="{group}"/>
-
</mx:HBox>
-
-
<mx:VBox id="myVBox" height="100" width="150" backgroundColor="#FFFFFF" horizontalAlign="center">
-
<mx:Button label="Botão 1"/>
-
<mx:Button label="Botão 2"/>
-
<mx:Button label="Botão 3"/>
-
<mx:Button label="Botão 4"/>
-
<mx:Button label="Botão 5"/>
-
</mx:VBox>
-
-
</mx:Application>
Estranho, não? Seria esse mais um pattern do FreaktionScript?
