Flex TileList 起始偏移和点击处理程序

Question

我有一些图像想在 Flex 的 TileList 中显示。我的 TileList 尺寸为 2 列 x n 行。我想要做的是将第一个项目（第 1 行、第 1 列）显示为空且不可单击，并从第 1 行、第 2 列开始显示我的项目。这可能吗？

我还想知道当我为同一个 TileList 创建单击事件时，有没有办法获取单击元素的索引？

非常感谢！
米。

Answer 1

好问题。我确信有人会提供一个更优雅的解决方案，但一个简单的方法可能只是在位置 0 处向 dataProvider 添加 null，并让 itemRenderer 通过显示某种替代内容来处理 null，或者在全部。

要提取单击元素的索引，您可以使用 ListEvent 对象上的多个属性 - event.currentTarget.selectedIndex（或 event.currentTarget.selectedIndices，如果您使用多重选择）、event.columnIndex 和 。 rowIndex 或 event.itemRenderer，您可以将其与 TileList 的 itemRendererToIndex 属性等结合使用。

这是一个快速而肮脏的应用程序代码，演示了这两种方法：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">

    <mx:Script>
        <![CDATA[

            import mx.controls.Alert;
            import mx.events.ListEvent;
            import mx.collections.ArrayCollection;

            private var dpSource:Array = [
                null, 
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"}, 
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"}
            ];      

            [Bindable]
            private var dp:ArrayCollection = new ArrayCollection(dpSource);

            private function myList_itemClick(event:ListEvent):void
            {
                Alert.show("You clicked the item at position (" + event.columnIndex + ", " + event.rowIndex + "), which is item " + myList.itemRendererToIndex(event.itemRenderer).toString() + " in the list.");
            } 

        ]]>
    </mx:Script>

    <mx:TileList id="myList" dataProvider="{dp}" itemClick="myList_itemClick(event)">
        <mx:itemRenderer>
            <mx:Component>
                <mx:Canvas>

                    <mx:Script>
                        <![CDATA[

                            override public function set data(value:Object):void
                            {
                                super.data = value;
                            }

                        ]]>
                    </mx:Script>

                    <mx:Image source="{data.src}" width="100" height="60" visible="{data != null}" />
                    <mx:Label text="No item!" visible="{data == null}" />

                </mx:Canvas>
            </mx:Component>
        </mx:itemRenderer>
    </mx:TileList>

</mx:Application>

希望它有帮助！如果您有问题，请回复。