自动调整布局以适应不同的浏览器 window 尺寸

Question

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

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

例如，下面是一个起点：

<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将所有的Labels和Buttons水平并排放置，如果屏幕尺寸太小，最右边的项目会超出屏幕右边框，但我希望它们在一秒钟内出现在左侧下方行。

此外，但不太重要的是，如果屏幕尺寸过大，我希望标签和按钮居中。这就是 horizontalAlign="center" 和 textAlign="center" 的意思。

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>

自动调整布局以适应不同的浏览器 window 尺寸

automatic layout adjustment to varying browser window size

apache-flex

layout

rows

mxml

screen-resolution