组忽略底层组件的最大宽度

Question

在下面的代码中，您可以看到我有 2 个相同的边界容器（bordercontainer1 和 bordercontainer2），每个边界容器都有一个周围组（surroundinggroup1 和 surroundinggroup2）。

bordercontainer 的最大宽度为 250 像素，宽度为 100%。基本上，我希望它们最多占用 space 的 250 像素，但如果可用的 space 较少，请尽可能多地占用。

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:HGroup id="maingroup" width="100%">
        <s:Group id="surroundinggroup1">
            <s:BorderContainer id="bordercontainer1" height="50" maxWidth="250" width="100%">
                <s:Label text="test"/>
            </s:BorderContainer>        
        </s:Group>
        <s:Group id="surroundinggroup2">
            <s:BorderContainer id="bordercontainer2" height="50" maxWidth="250" width="100%">
                <s:Label text="test"/>
            </s:BorderContainer>        
        </s:Group>
    </s:HGroup>
</s:WindowedApplication>

问题是周围的组似乎忽略了最大宽度并使用绘制边框容器所需的最小宽度，以便包含 "test" 的标签适合：

我认为将周围组的宽度设置为 100% 可以解决问题，但这会导致周围组占用尽可能多的 space，从而导致 2 个边界容器之间出现间隙：

看来唯一的解决办法就是去掉周围的组，这样布局就如我所愿了：

这里的问题是，在实际应用中，这些周围的组包含一些其他的组件和逻辑。删除它们可能会导致其他一些变化。有没有办法在保持这些周围群体的同时达到预期的结果（图 3）？

Answer 1

这应该可以解决问题，出于某种原因，我认为您不想限制周围组的大小，但那只是我的想法。我将 maxWidth 和 100% 移动到 surroudinggroups，Bordercontainer width="100%" 对于您想要的内容也很重要。

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:HGroup id="maingroup" width="100%" >
        <s:Group id="surroundinggroup1" maxWidth="250" width="100%">
            <s:BorderContainer id="bordercontainer1" height="50" width="100%">
                <s:Label text="test"/>
            </s:BorderContainer>        
        </s:Group>
        <s:Group id="surroundinggroup2" maxWidth="250" width="100%">
            <s:BorderContainer id="bordercontainer2" height="50" width="100%">
                <s:Label text="test"/>
            </s:BorderContainer>        
        </s:Group>
    </s:HGroup>
</s:WindowedApplication>

组忽略底层组件的最大宽度

Groups ignore underlying component's maxwidth

apache-flex

layout

width