Actionscript 3 如何在flex应用程序中分解视图？

我编写了一个flex（移动）应用程序，结果比我预期的要大

我对我所有的课程和我所有的AS文件都很满意。然而，当我使用MXML来布局我的应用程序时，视图变得非常大

我在考虑创建外部组件，我可以调用我的视图使其更具可读性，但不确定什么是最好的方法，或者这样做是否是最好的方法

例如，我认为v:组具有以下内容：

<s:VGroup width="100%" height="80%" includeIn="normal" horizontalAlign="center" top="70" id="imageGroup">
    <s:Label id="lblFile" visible="false" width="98%" textAlign="center" includeInLayout="true" color="0xFFFFFF"/>
    <s:BorderContainer id="framingBorder" borderColor="0xFFFFFF" borderWeight="15" cornerRadius="7">
        <s:Image id="image" source="{IMAGE_SAMPLE}" horizontalCenter="0"/>

    </s:BorderContainer>    
    <s:BorderContainer id="shareBorder" borderColor="0xFFFFFF" borderWeight="5" height="30" cornerRadius="7" width="{framingBorder.width}" visible="false" buttonMode="true" click="copyToClipboard(lblURL.text)">
        <s:layout>
            <s:HorizontalLayout verticalAlign="middle" horizontalAlign="left" gap="3"/>
        </s:layout>
        <s:Label text="url:" styleName="copyURL" />
        <s:BorderContainer borderColor="0xCDCDCD" borderWeight="1" width="{lblURL.width + 5}" height="{lblURL.height + 5}">
            <s:layout>
                <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center"/>
            </s:layout>
            <s:Label id="lblURL" text="" styleName="copyURL" />
        </s:BorderContainer>
        <s:Spacer width="100%" />
        <s:HGroup>
            <s:Label color="0xFF0000" text="copy" styleName="copyURL" />
            <s:Image source="/assets/icons/page_copy_small.png" horizontalCenter="0" horizontalAlign="right"/>
        </s:HGroup>
    </s:BorderContainer>    
</s:VGroup>

有没有人能给我指出正确的方向，告诉我如何从视图中将其移出以使其更干净，以及如何仍然能够访问此代码块中的项目（即，我仍然希望能够从我的视图中修改lblURL，因为这是一个动态值）

---

提前感谢，

你走对了方向，艾米发布的链接介绍了如何布局。您可能还对以下内容感兴趣：哪些是用于更完整解决方案的框架/工具

但就目前而言，我认为将视图的一部分分离为组件是一个良好的开端

您仍然可以在主应用程序中修改标签（例如）：

myBox.mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
    <s:Label id="myLabel" text="this is my label" />
</s:BorderContainer>

您的项目中是否有其他地方看起来像一个或多个片段，或者组件中是否有重复？就是这样。对于像这样的事情，没有。这就是为什么我不确定是否要将它们转换为组件，因为它们只会被使用一次。你没有说这里是否有任何逻辑来编辑模型。有一件事对您总是有好处的，那就是使用表示模型（）将逻辑部分分开。这样，如果您需要更改视图的外观或在不同外观的视图中（例如，在不同的设备上）执行相同的操作，则不必复制逻辑。如果你喜欢TDD，它也很容易测试。马上！这就是我想要完成的。谢谢

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
    <s:Label id="myLabel" text="this is my label" />
</s:BorderContainer>