Flex MXML Layout Issue

Question

Итак, я хочу, чтобы ToggleSwitch слева и кнопка справа. Когда экран слишком мал, я хочу, чтобы кнопка уменьшилась и отобразилась какая-то «...». Так что я использовал:

<s:Group width="100%"> 
    <s:layout> 
     <s:HorizontalLayout verticalAlign="middle"/> 
    </s:layout> 
    <s:ToggleSwitch /> 
    <s:Spacer width="100%"/> 
    <s:Button label="TestTestTestTestTest"/> 
</s:Group> 

Это работает отлично, пока экран не настолько мал, что весь текст этикетки от кнопки doens't нужным. Затем оба компонента плавают влево и вправо вне экрана.

Так что я попытался его с помощью основной схемы:

<s:Group width="100%"> 
    <s:ToggleSwitch left="0" /> 
    <s:Button right="0" label="TestTestTestTestTest"/> 
</s:Group> 

doens't работу либо. Когда экран слишком мал, кнопка плавает над переключателем toggleswitch. Итак, как я могу заставить это работать?

Answer 1

Возможно, вы находитесь почти там, для одного, если вы хотите бок о бок, просто начните с HGroup и защитите от макета «нарушения границ» его родителя, включите свойство clipAndEnableScrolling.

<s:HGroup width="100%" clipAndEnableScrolling="true"> 
    <s:ToggleSwitch /> 
    <s:Rect width="100%" /> 
    <s:Button label="TestTestTestTestTest"/> 
</s:HGroup>