Question

我有一个数据网格，其中包含一个位置和活动列表Birdwatching，Boating，Camping。如果在该位置提供活动，则基于简单的是或否填充数据网格。我想用每个活动的单独图像替换是/否。我创建了一个图像渲染器，我能够将图像改变，但仅限于观鸟图像。我的问题是，如何让它循环遍历数据网格并根据值显示图像？

感谢。

package widgets.Samples.CononGeocoder2
{
    import mx.containers.HBox;
    import mx.controls.Image;
    import mx.controls.Label;
    import mx.controls.dataGridClasses.*;

    public class ImageRenderer extends HBox
    {
        private var imageReference:Image = null;
        private var imageReference2:Image = null;
        private var imageReference3:Image = null;
        private var lbl:Label = new Label();
        private var img:Image = new Image();
        private var img2:Image = new Image();
        private var img3:Image = new Image();

        override public function set data(value:Object):void
        {
            //if(value != null && imageReference == null)
            {

                for each(data in value)
                {

                if(value.Birdwatching == "yes") {
                    img.source = "assets/images/Birdwatching.png";
                    addChild(img)
                    lbl.text = "(" + value.Birdwatching + ")";
                    img.toolTip = "Birdwatching";
                    imageReference = img;
                    setStyle("verticalAlign", "middle");
                    setStyle("paddingLeft","5");
                }
                if(value.Boating == "yes"){
                    img2.source = "assets/images/Boating.png";
                    addChild(img2)
                    lbl.text = "(" + value.Boating + ")";
                    img2.toolTip = "Boating";
                    imageReference2 = img2;
                    setStyle("verticalAlign", "middle");
                    setStyle("paddingLeft","5");
                }
                if(value.Camping == "yes"){
                    img3.source = "assets/images/Camping.png";
                    addChild(img3)
                    lbl.text = "(" + value.Camping + ")";
                    img3.toolTip = "Camping";
                    imageReference3 = img3;
                    setStyle("verticalAlign", "middle");
                    setStyle("paddingLeft","5");
                }
                //Place

                }
            }


        }

    }
}

Answer 1

最简单的方法是在MXML中执行此操作。像这样：

<mx:HBox>
    <mx:Image source="assets/images/Birdwatching.png" visible="{data. Birdwatching == 'yes'}" includeInLayout="{data.Birdwatching == 'yes'}" toolTip="Birdwatching" />
    <mx:Image source="assets/images/Boating.png" visible="{data. Boating == 'yes'}" includeInLayout="{data.Boating == 'yes'}" toolTip="Boating" />
    <mx:Image source="assets/images/Camping.png" visible="{data. Camping == 'yes'}" includeInLayout="{data.Camping == 'yes'}" toolTip="Camping" />
    <mx:Label text="{'(' + (data.Birdwatching == 'yes') ? 'Birdwatching' : '' + (data.Boating == 'yes') ? 'Boating' : '' + (data. Camping == 'yes') ? 'Camping' : '' +  ')'}" />
</mx:HBox>

请注意，它只是草稿，因此您需要自行调整。

如果您更喜欢使用ActionScript，则应学习Flex components lifecycle并覆盖updateDisplayList()方法以显示和定位子组件。

Answer 2

在回答你的问题之前，我想指出一些问题。物品渲染器有可能被使用一吨，所以你需要确保它们尽可能精益。例如，您每次都要创建3个图像组件实例。如果您需要更多，可以根据需要创建它们。此外，如果您打算重复使用它，可能需要使用Canvas或UIComponent作为超类进行调查。

接下来，不需要'for'循环。您没有循环遍历值对象。您只需检查属性是否设置为正确的值。除此之外，您的示例应该正常工作（尽管优化将是一个单独的讨论。如果由于某种原因它仍然不起作用，请使用调试器来查看该给定项的值。

Flex imagerender基于datagrid值

2 个答案: