如何在纯actionscript3中使用VGroup或HGroup？

Question

我正在使用免费的 Flex SDK 和文本编辑器并在命令行中进行编译来开发 Flash 应用程序。

我想在我的动作脚本中使用 VGroup 或 HGroup 来管理 DisplayObject 的位置。

我写了以下代码：

import spark.components.*
import flash.text.*


var group:VGroup = new VGroup;

var text:TextField = new TextField
text.text = 'abc';

var sprite = new Sprite;
sprite.graphics.lineStyle(2, 0x000000);
sprite.graphics.drawRect(0, 0, 100, 100);

stage.addChild(group);
group.addElement(sprite); // runtime error
group.addElement(text); // compile error

但是将 Sprite 添加到 VGroup 会导致运行时错误：

TypeError: Error #1034: Type Coercion failed:
cannot convert flash.display::Sprite to mx.core.IVisualElement.

并且将 TextField 添加到 VGroup 会导致编译错误：

Error: Implicit coercion of a value of type flash.text:
TextField to an unrelated type mx.core:IVisualElement.

如何在纯AS3中使用VGroup或HGroup？
DisplayObject 和 IVisualElement 有什么区别？

更新：

我尝试了 www.Flextras.com 的答案的第一种方法，SpriteVisualElement 和 StyleableTextField。
我写了以下代码：

package {
    import flash.display.*
    import spark.core.SpriteVisualElement
    //import spark.components.supportClasses.StyleableTextField // compile error
    import spark.components.VGroup
    import flash.text.*

    [SWF(backgroundColor=0xffffff, width=500, height=500, frameRate=12)]

    public class VGroupTest extends Sprite {
        function VGroupTest() {
            //var text:StyleableTextField = new StyleableTextField
            //text.text = 'abc';

            var sprite1:SpriteVisualElement = new SpriteVisualElement;
            sprite1.graphics.lineStyle(2, 0x000000);
            sprite1.graphics.drawRect(0, 0, 100, 100);
            sprite1.width = 200
            sprite1.height = 200

            var sprite2:SpriteVisualElement = new SpriteVisualElement;
            sprite2.graphics.lineStyle(2, 0xff0000);
            sprite2.graphics.drawRect(0, 0, 200, 200);
            sprite2.width = 300
            sprite2.height = 300

            var group:VGroup = new VGroup;
            group.gap = 10
            group.width = 400
            group.height = 400
            this.stage.addChild(group);

            // the following codes show nothing
            //group.addElement(text);
            group.addElement(sprite1);
            group.addElement(sprite2);

            // the following codes show 2 rectangles
            //this.stage.addChild(sprite1)
            //this.stage.addChild(sprite2)
        }
    }
}

但是

import spark.components.supportClasses.StyleableTextField

导致了以下错误

40 Error: Definition spark.components.supportClasses:StyleableTextField could not be found

并且屏幕上没有显示 SpriteVisualElement。
我错过了什么吗？

Answer 1

您正在使用正确的概念方法。但是，组（或 VGroup 或 HGroup）中的元素必须实现 IVisualElement，其中 Sprite 或 TextField 实现。

您可以考虑以下几个选项：

1. 使用 SpriteVisualElement 而不是精灵；或使用 StyleableTextField 代替一个文本字段。
2. 将 Sprite 或 TextField 包装为 UIComponent 的子级；然后使用该 UIComponent 作为组中的元素。
3. 使用 MX 容器，例如 HBox 或 VBox。
4. 使用 UIComponent 而不是 Group。您必须在 updateDisplayList() 中编写自己的布局代码才能使其工作。

我更喜欢第一种方法，其次是第四种方法。方法 2 增加了很多额外的编码，而方法 3 由于依赖 MX/Halo 架构而不受欢迎。