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

我正在使用免费的FlexSDK和文本编辑器开发一个flash应用程序，并在命令行中编译。

我想在actionscript中使用VGroup或HGroup来管理DisplayObjects的位置。

我编写了以下代码：

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

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)
        }
    }
}

但将精灵添加到VGroup会导致运行时错误：

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

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

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

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

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。
我编写了以下代码：

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

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)
        }
    }
}

但是

导致以下错误

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

并且屏幕上不显示SpriteVisualElement。

---

我遗漏了什么吗？

您使用了正确的概念方法。但是，组（或VGroup或HGroup）中的元素必须实现，而这两个元素既不能实现也不能实现

您可以考虑以下几种选择：

用雪碧代替雪碧；或者使用文本字段而不是文本字段

将精灵或文本字段包装为UIComponent的子元素；然后将该UIComponent用作组中的元素

使用MX容器，如HBox或VBox

使用UIComponent而不是组。您必须在updateDisplayList（）中编写自己的布局代码，才能使其正常工作

---

我倾向于第一种方法，然后是第四种方法。方法2添加了大量额外的编码，而方法3由于依赖MX/Halo体系结构而不受欢迎。

感谢您的回答。我尝试使用SpriteVisualElement（第一种方法）。我创建了2个SpriteVisualElement，并在每个元素上绘制了drawRect。并将它们添加到VGroup。并将VGroup加入舞台。运行时和编译时的错误都消失了。但不幸的是，屏幕上什么也没有显示。我遗漏了什么吗？没有看到代码；很难说。我很确定SpriteVisualElement不会自行调整大小。您是否为实例指定了高度和宽度？有什么奇怪的事情发生了吗，比如矩形与背景颜色相同？谢谢你的回复。我添加了设置宽度和高度的代码，但仍然没有显示任何内容。我在问题中添加了一个新代码。你能检查一下代码吗？你使用的是什么版本的FlexSDK？直到Flex4.5才引入StyleableTextField。你有主应用程序文件吗？直接在舞台上添加任何内容对于Fle应用程序来说都是不寻常的。将项作为子项添加到其父容器中；永远不要直接上台。谢谢你的回复。我使用的是FlexSDK 4.5.1。我添加到问题中的代码是我用来编译的所有代码。我在一个名为

VGroupTest.as

的文件中编写了该代码。我用命令编译它，

mxmlc-debug=true-staticlinkruntimesharedlibraries=true VGroupTest.as

。命令创建了

VGroupTest.swf

从不直接进入stage

意味着我应该使用

this.addChild（）

（这是VGroupTest的实例）而不是

this.stage.addChild（）

？也许我应该放弃使用VGroup/HGroup，编写自己的VGroup/HGroup。