表单样式布局 - 没有 s:Form答案

【问题标题】：Form style layout - without s:Form表单样式布局 - 没有 s:Form
【发布时间】：2013-05-23 15:59:00
【问题描述】：

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

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

我不想使用FormLayout，因为在不为Form 创建新皮肤的情况下很难设置标签样式。再说了，反正也不是为了表格。

【问题讨论】：

您可以使用ConstraintLayout。它是FormLayout 的基类，可以满足您的需求，但使用起来也相当复杂。除此之外，您可以编写自定义布局。我曾经写过——没有太多努力——一个 TileLayout 的变体，它可以有可变的列宽或可变的行高来处理这个问题。

标签： actionscript-3 apache-flex mxml

【解决方案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>

【讨论】：

【解决方案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

【讨论】：

如果你输入相同的标签和项目名称，布局会和我的例子一样吗？看起来这不起作用，对齐将关闭。这也是 flex 3 代码，flex 4 使用 s:VGroup 而不是 mx:VBox。