表单样式布局 - 没有s：表单

Question

我想要一个类似于示例图像的布局，但我不想使用Spark Form。实现这一目标的最佳方法是什么？

• 每个标签右对齐
• 每个项目左对齐
• 标签和项目水平居中。
• 项目可以是任何项目，而不仅仅是文本。

我不想使用FormLayout，因为在不为Form创建新外观的情况下难以设置标签样式。此外，它实际上并不适用于表格。

Answer 1

如果您对表单布局的唯一顾虑是为表单设置外观，请注意您可以完全使用样式属性来实现所需的结果：

  

指定fx:Style的示例表单：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";

        s|FormItem s|Label#labelDisplay {
            textAlign: right;
            fontSize: 24px;
        }
        s|Label {
            fontSize: 24px;
        }
    </fx:Style>

    <s:Form>
        <s:layout>
            <s:FormLayout gap="-12" />
        </s:layout>

        <s:FormItem label="Label">
            <s:Label text="Item 1" />
        </s:FormItem>

        <s:FormItem label="Another Label">
            <s:Label text="Item 2" />
        </s:FormItem>

        <s:FormItem label="Even Longer Label">
            <s:Label text="Another Item" />
        </s:FormItem>
    </s:Form>

</s:Application>

Answer 2

您可以使用 VBox 组件轻松实现此布局：

<mx:VBox>
    <mx:Canvas>
        <mx:Label text="Label:Item 1"/>
    </mx:Canvas>    
    <mx:Canvas>
        <mx:Label text="Label:Item 2"/>
    </mx:Canvas>           
</mx:VBox>

API参考的链接：http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/containers/VBox.html