MXML：组合框宽度大于父宽度

Question

我有一个宽度设置为 100% 的组合框。但是，当其中一个元素变大时，组合框也会变大，在我的应用程序中创建滚动条和其他丑陋！ 如何保持组合框包含在其父级中？
请注意，只要关闭的组合框保持较小，下拉列表就可以较大。

示例：

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
<!-- I'm using a Canvas instead of a VBox because the VBox spaces the elements too far appart -->
    <mx:HBox id="tagsHBox" width="{formsHBox.width - 16}" x="8" y="8">
        <!-- This label should align with the labels in the left form -->
        <mx:Label text="Tags" id="tabLabel" width="{titleTxt.x + 4}" textAlign="right" />
        <!-- This textbox should spread accross both forms, that's why it's in a seperate HBox -->
        <mx:TextInput height="20" width="100%" />
    </mx:HBox>

    <mx:HBox id="formsHBox" x="8" y="{8 + tagsHBox.height}" width="{this.width-16}">

        <mx:Form id="leftForm" width="50%">
            <!-- Personal details -->
            <mx:FormHeading label="Personal Details" width="100%" />
            <mx:FormItem label="First name" width="100%">
                <mx:TextInput text="{person.firstName}" width="100%"/>
            </mx:FormItem>
            <mx:FormItem label="Last name" width="100%">
                <mx:TextInput text="{person.lastName}" width="100%"/>
            </mx:FormItem>
            <!-- And 15 more formItems :) -->
        </mx:Form>

        <mx:Form id="rightForm" width="50%">
            <!-- Address -->
            <mx:FormHeading label="Address" width="100%" />
            <mx:FormItem label="Street" width="100%">
                <mx:TextInput text="{person.address.street}" width="100%"/>
            </mx:FormItem>
            <mx:FormItem label="City" width="100%">
                <mx:TextInput text="{person.address.city}" width="100%"/>
            </mx:FormItem>

            <mx:FormItem label="Country" width="100%">

                <!-- This combobox right here is the troublemaker. There's a
                     country named 'South Georgia and the South Sandwich
                     Islands' consising of a few small islands in the southern
                     pacific and a name which is too long for my innocent
                     unsuspecting combobox --> 
                <form:ComboBox id="countryCombo" height="20" width="100%"  
                        dataProvider="{model.systemDataModel.countries}" />
            </mx:FormItem>
            <!-- And 15 more formItems :) -->
        </mx:Form>
    </mx:HBox>
</mx:Canvas>

Answer 1

您也许可以改用 minWidth。将其设置为零或其他一些低值。我知道它可以与 HBox 和 VBox 等容器一起使用，以使它们不再比其父容器大，因此它也可以与 ComboBox 一起使用。基本上，发生的情况是 minWidth="0" 覆盖了测量的MinWidth，这是父容器通常尊重的最小可能大小的值，它可能大于容器自己的边界。

Answer 2

我有同样的问题，我很容易解决。我有一个国家组合框和一个州组合框组件，并动态填充国家名称，另一个与州相关......我在 HBox 中有两个表单来显示“两列”表单，在右侧表单中有一个 formItem在 formItem 内部是组合框。问题是当我给组合框它的 dataProvider 时，滚动条出现了，这很恶心......

解决方案：我向您展示了正确的表单，因为它是问题所在（Form 中的 autoLayout="false" 和 ComboBox 定义中的 minWidth="0"）

<mx:Form autoLayout="false" verticalGap="12">
    <mx:FormItem label="Country" required="false" width="100%" direction="vertical">
        <mx:ComboBox id="countryComboBox" minWidth="0" width="100%" labelField="@name"/>
    </mx:FormItem>
    <mx:FormItem label="State" required="false" width="100%" direction="vertical">
        <mx:ComboBox id="stateComboBox" minWidth="0" width="100%" labelField="@name"/>
</mx:FormItem>
</mx:Form>

Answer 3

您可以使用具有绝对大小（以像素为单位）的 maxWidth 属性，但是组合框项目的一部分（比组合框大）将被裁剪。

来自 adobe： 组合框默认大小： 宽度足以容纳主控件显示区域下拉列表中最长的条目，加上下拉按钮。当下拉列表不可见时，默认高度基于标签文本大小。