0

我正在尝试通过动态地将它们添加到 Flash 应用程序来处理从 facebook 检索到的用户提要,并且我需要将提要显示在一个带有其发布者名称和图片旁边的框中(正常)..

问题是如果我不知道它们的高度,我怎么能显示它们相互对齐?有没有办法在不指定高度的情况下将它们相互添加?就像在 html 中相互添加 div 一样?

和其他问题如果内容超出 Flash 窗口,如何添加滚动条?

我是 as3 和 flash 的新手,所以任何建议都会有所帮助.. 谢谢..

我的代码:

        protected function getFeedsHandler(result:Object,fail:Object):void
        {
            if(result)
            {
                var i:Number;

                for(i=0;i<10;i++)
                    if(result[i])
                    {
                        var fdLbl= new Label();
                        addElementAt(fdLbl,1);

                        fdLbl.text=result[i].message;
                        fdLbl.x=20;
                        fdLbl.y=(i+2)*100;
                        fdLbl.width=400;

                        var fdImg= new Image();
                        addElementAt(fdImg,1);

                        fdImg.source=FacebookDesktop.getImageUrl(result[i].from.id,"small");
                        fdImg.x=20;
                        fdImg.y=(i+2)*80;
                        fdImg.width=400;

                        var nameLbl= new Label();
                        addElementAt(nameLbl,1);

                        nameLbl.text=result[i].from.name;
                        nameLbl.x=20;
                        nameLbl.y=(i+2)*90;


                    }
            }

界面:

<s:Button id="loginoutBtn" right="10" top="10" label="Log out"
          click.loggedin="logout(event)"
          label.loggedout="Log in" click.loggedout="login(event)"/>
<s:Form includeIn="loggedin" left="70" top="10">
    <s:FormItem label="User">
        <s:Label id="nameLbl" text=""/>
    </s:FormItem>
    <s:FormItem label="birthday">
        <s:Label id="brthday"/>
    </s:FormItem>
    <s:FormItem label="feeds">
        <s:Image id="feedImg"/>
        <s:Label id="feedLbl" x="0"/>
        <s:Label id="statusLbl" width="405"/>
    </s:FormItem>
</s:Form>
<s:Image id="userImg" includeIn="loggedin" left="10" top="10" width="50"/>
4

1 回答 1

0

所以看起来您正在使用 Flex,特别是您正在使用 spark 组件。在使用 Spark 时,有几种方法可以实现这一点,一种选择是将上面制作的组件放入 VGroup 中。VGroup 垂直堆叠视觉组件,它有一个称为 gap 的属性,您可以设置以添加或删除组件之间的间距(嵌套到 VGroup 中的每个对象之间的像素数)。添加包装 VGroup 的 as:Scroller 组件将为您提供滚动条,本质上它的工作方式是将 s:Scroller 上的大小设置为您想要可见的大小(可以是 100% 宽度/高度等百分比视图/容器的),然后您没有在 VGroup 上设置显式大小,VGroup 将扩展为具有等于嵌套在其中的所有组件的高度加上任何填充加上间隙空间的高度,滚动条将负责确定滚动选项卡按钮的大小并调整 VGroup 上的 scrollRect对你来说,基本上它会像魔术一样工作:)。这将类似于以下内容:

<s:Scroller width="100%" height="100%">
    <s:VGroup id="loadedContentVGroup">
        <yourpackage:YourCustomComponent/>
    </s:VGroup>
</s:Scroller>

如果您不限制滚动条的高度和宽度,它将无法工作,因为它没有定义的区域可供绘制,并且只会变得与其子项(嵌套组件)一样大。您很可能会在 AS3 中向 VGroup 添加元素,因此您可能希望给它一个 ID。

您的另一个选择是使用火花列表,然后将您的视觉组件设置为 itemRenderer。对于列表的数据提供程序中的每个数据元素(某种集合类、ArrayCollection、XMLCollection 等),它会将数组的元素设置为可视组件上的“数据”属性。然后,您将使用绑定到可视组件中的 data 属性来确保渲染器是否被重新使用/回收,其中的元素会自动更新。这是一个例子:

    <s:List dataProvider="{new ArrayCollection([{name:'Shaun', birthday:'04-28-1983', imageSource:'someImage.png'}])}"
            itemRenderer="views.YourCustomComponent"
            width="100%"/>

在您的情况下,可以在上面的结果处理程序代码中分配列表的 dataProvider,结果似乎是一个数组,因此您可以将其包装在 ArrayCollection 中,例如 myList.dataProvider = new ArrayCollection(result);

这是列表中单个条目的潜在视图定义(上面使用的 itemRenderer 类)

[views.YourCustomComponent]

<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark"
          implements="mx.core.IDataRenderer">
    <fx:Script>
        <![CDATA[
            private var _data:Object;

            [Bindable(eventName="dataChanged")]
            public function get data():Object
            {
                return _data;   
            }
            public function set data(value:Object):void
            {
                if(_data == value)
                    return;
                _data = value;
                dispatchEvent(new Event("dataChanged"));
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Label text="{data.name}"/>
    <s:Label text="{data.birthday}"/>
    <s:Image source="{data.imageSource}"/>
</s:VGroup>

这些答案肯定有警告和替代方案,但这有望使您朝着正确的方向前进,如果您这样做是为了移动开发,请务必查看有关为移动设备创建渲染器的建议,这里的想法是尽可能减少在移动设备上创建和重用渲染器所需的处理,以减轻 CPU 和内存的负载。

需要注意的另一件事是,您在 AS3 和 MXML 中定义视图的混合出现,虽然这在技术上是可以的,但我觉得我自己有点困惑。我通常会在 MXML 中定义整个布局,或者如果需要完全在 AS3 中。如果在 MXML 中定义并且需要通过代码有条件地隐藏组件,我只需切换可见/includeInLayout 属性。我想这只是一种偏好,但是当您必须在两者之间进行查看以将其拼凑在一起时,确定导致特定布局发生的原因似乎会变得很棘手。

对所用类的 AS3 参考的引用:http: //help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/spark/components/VGroup.html

http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/spark/components/Scroller.html

http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/spark/components/List.html

有关自定义项目渲染器的详细信息http://help.adobe.com/en_US/flex/using/WS03d33b8076db57b9-23c04461124bbeca597-8000.html <-- 引用 Jeffry Houser 是 SO 上的常客,名称为 www.flextras.com

于 2012-05-21T02:44:54.180 回答