Question

在Flex4 / mxml中，我有很多元素，如TextFields，Buttons或其他任何东西。我想把它们水平放置在一起。但是对于浏览器窗口或屏幕分辨率太小以至于并非所有这些都水平放置的情况，我想要一个布局，自动将多余的元素移动到下面的行。

换句话说，我需要一个包含水平和垂直布局的布局，而水平布局优先于垂直布局。所以实际上是一个非常简单的布局，但我无法找到解决方案。我怎样才能做到这一点？

例如，以下是一个起点：

<mx:HBox horizontalGap="0" width="{width-30}" horizontalAlign="center" textAlign="center">
    <mx:Label paddingLeft="10" text="anytext1" />                
    <mx:Label id="warn12" text="anytext2" />
    <mx:Button label="Do Something1" click="{cf.doSomething(1)}"/>
    <mx:Label paddingLeft="0" text="anytext3" />
    <mx:Button label="Do Something2" click="{cf.doSomething(2)}"/>
</mx:HBox>

HBox将所有标签和按钮水平放置在一起，如果屏幕尺寸太小，最右边的项目会超出右边的屏幕边框，但我希望它们显示在第二行的左下方。

此外，但不太重要，如果屏幕尺寸大于必要值，我希望标签和按钮居中。这就是horizontalAlign =＆＃34; center＆＃34;和textAlign =＆＃34; center＆＃34;是为了。

Answer 1

您应该能够使用Tile元素。如果屏幕宽度不足以容纳所有内容，它会自动将元素包装到新行：

<mx:Tile id="myFlow" 
        direction="horizontal" width="{width-30}"
        paddingTop="0" paddingBottom="0" 
        paddingRight="0" paddingLeft="0" 
        verticalGap="0" horizontalGap="0">
    <mx:Label paddingLeft="10" text="anytext1" />                
    <mx:Label id="warn12" text="anytext2" />
    <mx:Button label="Do Something1" click="{cf.doSomething(1)}"/>
    <mx:Label paddingLeft="0" text="anytext3" />
    <mx:Button label="Do Something2" click="{cf.doSomething(2)}"/>
</mx:Tile>

自动布局调整到不同的浏览器窗口大小

1 个答案: