Ⓔeui.ItemTapEvent 用法

List 自訂義皮膚與製作雙欄列表顯示, 與 ItemTapEvent 應用

MainUISkin.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="edwin.MainUISkin" 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>

MainUI.ts

namespace edwin {

    export class MainUI extends eui.Component {

        private myList: eui.List;

        protected createChildren(): void {
            super.createChildren();
            this.percentWidth = this.percentHeight = 100;

            this.myList.addEventListener(eui.ItemTapEvent.ITEM_TAP, (e: eui.ItemTapEvent) => {
                let index = e.itemIndex;
                let item = this.myList.dataProvider.getItemAt(index);
                console.log(item.label);
            }, this);

        }

    }

}

請參考：eui.DataGroup 用法, 比較差異