eui-eui.ItemTapEvent

以下是想呈現的效果, 點選皮卡丘 L, log 皮卡丘 L. 注意：ItemTapEvent 只能用在 eui.List, eui.DataGroup 不行.

eui.ItemTapEvent 使用範例, exml 部分

<?xml version='1.0' encoding='utf-8'?>
<e:Skin class="skins.MySkin" width="640" height="1136" xmlns:e="http://ns.egret.com/eui">
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
    <e:Group>
        <!-- 500x500 灰底區塊 -->
        <e:Rect fillColor="0xCCCCCC" width="500" height="500" />
        <!-- 500x500 滑動區塊 -->
        <e:Scroller width="500" height="500">
            <!-- 設置 id = myList, useVirtualLayout 可以提昇滑動性能 -->
            <e:List id="myList" useVirtualLayout="true">
                <!-- itemRenderer 的 skin -->
                <e:itemRendererSkinName>
                    <e:Skin>
                        <e:Group width="240" height="100">
                            <e:Rect fillColor="0x000000" width="100%" height="100%" />
                            <e:Group verticalCenter="0">
                                <!-- eui.ItemRenderer 的屬性 itemIndex, {}可以直接取用屬性 -->
                                <e:Label text="{itemIndex+1}" />
                                <!-- eui.ItemRenderer 的屬性 data, data 是 Object, 資料來自 List 的 dataProvider -->
                                <e:Label text="{data.label}" />
                                <e:layout>
                                    <e:HorizontalLayout gap="10" verticalAlign="middle" paddingLeft="10" />
                                </e:layout>
                            </e:Group>
                        </e:Group>
                    </e:Skin>
                </e:itemRendererSkinName>
                <!-- List 的 dataProvider -->
                <e:ArrayCollection>
                    <e:Object label="皮卡丘 A" />
                    <e:Object label="皮卡丘 B" />
                    <e:Object label="皮卡丘 C" />
                    <e:Object label="皮卡丘 D" />
                    <e:Object label="皮卡丘 E" />
                    <e:Object label="皮卡丘 F" />
                    <e:Object label="皮卡丘 G" />
                    <e:Object label="皮卡丘 H" />
                    <e:Object label="皮卡丘 I" />
                    <e:Object label="皮卡丘 J" />
                    <e:Object label="皮卡丘 k" />
                    <e:Object label="皮卡丘 L" />
                    <e:Object label="皮卡丘 M" />
                    <e:Object label="皮卡丘 N" />
                    <e:Object label="皮卡丘 O" />
                    <e:Object label="皮卡丘 P" />
                    <e:Object label="皮卡丘 Q" />
                    <e:Object label="皮卡丘 R" />
                    <e:Object label="皮卡丘 S" />
                    <e:Object label="皮卡丘 T" />
                    <e:Object label="皮卡丘 U" />
                </e:ArrayCollection>
                <e:layout>
                    <e:TileLayout requestedColumnCount="2" horizontalGap="20" verticalGap="20" />
                </e:layout>
            </e:List>
        </e:Scroller>
    </e:Group>
</e:Skin>

typescript 部分

/** 自訂義 My 組建, 在主場景 this.addChild(new My) 即可 */
class My extends eui.Component {

    /** 宣告 id 之物件可以直接使用 */
    private myList: eui.List;

    protected createChildren() {
        super.createChildren();
        // 跟 MySkin 建立關聯
        this.skinName = skins.MySkin;

        // 為 list 註冊 ItemTapEvent.ITEM_TAP 事件
        this.myList.addEventListener(eui.ItemTapEvent.ITEM_TAP, (e: eui.ItemTapEvent) => {
            // 取得點擊索引
            const index = e.itemIndex;
            // 取得點擊物件
            const item = this.myList.dataProvider.getItemAt(index);
            // 顯示物件屬性
            console.log(item.label);
        }, this);
    }

}