Ⓔeui.List 用法 & eui.ListBase

請參考：eui.ItemTapEvent 用法

請參考：eui.DataGroup 用法

下拉式選單範例

建立 SelectList 組件（SelectListSkin.exml, SelectList.ts, default.thm.json 建立關聯）

SelectListSkin.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="edwin.SelectListSkin" xmlns:e="http://ns.egret.com/eui">
    <e:Group>
        <!-- 按鈕區 -->
        <e:Group id="gp_title_area">
            <e:Rect fillColor="0x222222" minWidth="300" minHeight="50" />
            <e:Group width="100%" height="100%">
                <e:Label text="{titleLabel}" left="5" verticalCenter="0" />
                <e:Group right="5" verticalCenter="0">
                    <e:Label text="▲" textColor="0xFFFFFF" scaleY="0.5" />
                    <e:Label text="▼" textColor="0xFFFFFF" scaleY="0.5" />
                    <e:layout>
                        <e:VerticalLayout gap="0" />
                    </e:layout>
                </e:Group>
            </e:Group>
        </e:Group>
        <!-- 選單區 -->
        <e:List id="ls_menu" minWidth="300" visible="false">
            <e:itemRendererSkinName>
                <e:Skin>
                    <e:Rect fillColor="0x333333" minWidth="300" minHeight="50" />
                    <e:Group width="100%" height="100%">
                        <e:Label text="{data.label}" left="5" verticalCenter="0" />
                        <e:Label text="✓" right="15" verticalCenter="0" visible="{selected}" />
                    </e:Group>
                    <e:Rect fillColor="0x666666" width="100%" height="1" bottom="0" />
                </e:Skin>
            </e:itemRendererSkinName>
            <e:ArrayCollection></e:ArrayCollection>
            <e:layout>
                <e:VerticalLayout gap="0" />
            </e:layout>
        </e:List>
        <e:layout>
            <e:VerticalLayout gap="0" />
        </e:layout>
    </e:Group>
</e:Skin>

SelectList.ts

namespace edwin {

    export class SelectListEvent {
        public static ITEM_SELECT: string = 'item_select';
    }

    export class SelectList extends eui.Component {

        private titleLabel: string;
        private gp_title_area: eui.Group;
        private ls_menu: eui.List;

        protected createChildren(): void {
            super.createChildren();
            this.titleLabel = "--select--";
            this.gp_title_area.addEventListener(egret.TouchEvent.TOUCH_TAP, () => this.ls_menu.visible = true, this);
            this.ls_menu.addEventListener(eui.ItemTapEvent.ITEM_TAP, (e: eui.ItemTapEvent) => {
                let item = this.ls_menu.dataProvider.getItemAt(e.itemIndex);
                this.titleLabel = item.label;
                this.ls_menu.visible = false;
                this.dispatchEventWith(edwin.SelectListEvent.ITEM_SELECT, false, item.label);
            }, this);
            this.stage.addEventListener(egret.TouchEvent.TOUCH_TAP, () => this.ls_menu.visible = false, this, true);
        }

        public addItem(item: string): void {
            (<eui.ArrayCollection>this.ls_menu.dataProvider).addItem({ label: item });
        }

    }

}

建立關聯

"edwin.SelectList": "resource/game_skins/SelectListSkin.exml"

MainUISkin.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="edwin.MainUISkin" xmlns:e="http://ns.egret.com/eui" xmlns:edwin="edwin.*">
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
    <e:Group horizontalCenter="0" verticalCenter="0">
        <!-- 加上 SelectList -->
        <edwin:SelectList id="selectList" />
    </e:Group>
</e:Skin>

MainUI.ts

namespace edwin {

    export class MainUI extends eui.Component {

        private selectList: edwin.SelectList;

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

            // 直接添加下拉選單列表
            this.selectList.addItem('台北');
            this.selectList.addItem('台中');
            this.selectList.addItem('高雄');
            this.selectList.addEventListener(edwin.SelectListEvent.ITEM_SELECT, (e) => console.log(e.data), this);
        }

    }

}