嵌套组件中的 Flex FormItem 布局

Question

我有一个相当简单的 Flex 布局问题。

无论如何要让FormItem包含在嵌套容器中以遵循父表单容器中FormItem的alignment？

例如：

<mx:Form>

  <mx:FormItem label="This is a long label" id="formItem1">
   <mx:HBox>
     <mx:TextInput />
   </mx:HBox>
  </mx:FormItem>

  <s:BorderContainer>
    <mx:FormItem label="ShrtLbl" id="formItem2">
     <mx:HBox>
       <mx:TextInput />
     </mx:HBox>
    </mx:FormItem>  
  </s:BorderContainer>

</mx:Form>

在这种情况下，我希望 formItem1 和 formItem2 的 label 具有相同的宽度，如果定义如下：

<mx:Form>

  <mx:FormItem label="This is a long label" id="formItem1">
   <mx:HBox>
     <mx:TextInput />
   </mx:HBox>
  </mx:FormItem>

   <mx:FormItem label="ShrtLbl" id="formItem2">
     <mx:HBox>
       <mx:TextInput />
     </mx:HBox>
   </mx:FormItem>  

</mx:Form>

有什么想法吗？

Answer 1

Spark Form Skin 使用 spark.layouts.FormLayout 来控制其子项的布局。

从 FormLayout 源代码：

FormLayout class 定义了 Spark 表单外观的默认布局。 FormLayout 为 Form 中的子 FormItem 容器提供垂直布局。

如果任何子容器使用 FormItemLayout，FormLayout 将对齐每个子容器的 ConstraintColumns。

因此，布局不会查看表单的任何嵌套子级。

我建议您创建自己的自定义表单布局来处理您的案例。

糟糕，我看到您使用的是 mx:FormItem 而不是 s:FormItem。 我建议使用 spark 变体。

此外，不需要在 FormItem 中包含 mx:HBox（或 s:HGroup）。