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

Question

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

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

<?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>

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

我认为将周围组的宽度设置为 100% 可以解决问题，但这会导致周围组占用尽可能多的空间，从而导致 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>