FLEX中用REPEATER组件载入XML文件并显示图片

最新推荐文章于 2025-10-21 10:46:17 发布

最新推荐文章于 2025-10-21 10:46:17 发布 · 143 阅读

文章标签：

#XML #Flex #Adobe

本文介绍了一个使用Flex实现的图片重复器示例，通过Repeater组件动态加载XML配置文件中的图片资源，并展示如何设置图片路径及显示效果。

前言：本例子的源代码来自于网上，我只是小小地测试了一下这个功能，另外再做点总结

运行结果预览：

案例解析：

1) 在PROJECT里创建image文件夹，存放显示的图片

（注：image文件夹直接建在根目录下就OK了）

2) 创建XML文件 images.xml (此文件要和FLEX运行主页面放在同一目录下)

<?xml version="1.0" encoding="utf-8"?>
<images>
<image src="image/001.jpg" alt="Button" />
<image src="image/002.jpg" alt="ButtonBar" />
<image src="image/003.jpg" alt="CheckBox" />
<image src="image/pizza1.jpg" alt="CheckBox" />
</images>

3）创建FlexRepeaterTest.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" color="#F6EFA3"
borderColor="#E2CCFB" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#D0C2F5, #C2F5DA]">

<mx:XML id="imagesXML" source="images.xml" />
<mx:Zoom id="zoom" />
<mx:HBox id="hBox" x="384" y="202">
<mx:Repeater id="rep"
dataProvider="{imagesXML.image}">
<mx:Image source="{rep.currentItem.@src}"
toolTip="{rep.currentIndex}:{rep.currentItem.@alt}"
completeEffect="{zoom}"/>
</mx:Repeater>
</mx:HBox>
</mx:Application>

4) 保存运行，就OK了。

总结：关键代码为<mx:Repeater> ...... </mx:Repeater>

dataProvider确定了xml文件中的根元素，image source确定了读取文件时的图片路径来源