eui-eui.DataGroup

eui.DataGroup 使用範例

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">
            <!-- itemRenderer 為每個 item 的類別, 本範例自定義 DGItemRender, 也就是可以自訂 item 的外觀或行為 -->
            <!-- useVirtualLayout 可以提昇滑動性能, 也就是重複利用少數 item, 只更新少數 item 資料顯示 -->
            <!-- 重複利用簡單來說不會因為 1000 筆資料建造 1000 個 item 在容器內, 譬如我們只會在滑動區看到 10 筆資料 -->
            <!-- 滑動過程中我們最多建立 11 個 item, 只更新 item 的顯示資料 -->
            <e:DataGroup id="myDG" itemRenderer="DGItemRender" useVirtualLayout="true">
                <!-- DataGroup 的 itemRenderer 的 skin -->
                <e:itemRendererSkinName>
                    <e:Skin>
                        <e:Group width="500">
                            <e:Group verticalCenter="0">
                                <!-- DGItemRender 繼承 eui.ItemRenderer 的屬性 itemIndex. 補充:{}可以直接取用屬性跟加號運算 -->
                                <e:Label text="{itemIndex+1}" />
                                <!-- DGItemRender 繼承 eui.ItemRenderer 的屬性 data, data 是 Object, 資料來自 DataGroup 的 dataProvider -->
                                <e:Label text="{data.label}" />
                                <e:layout>
                                    <e:HorizontalLayout gap="10" verticalAlign="middle" />
                                </e:layout>
                            </e:Group>
                            <!-- 按鈕 id 為 btn, 給 edwin.DGItemRender 引用 -->
                            <e:Button id="btn" label="點擊查看" right="10" verticalCenter="0" />
                        </e:Group>
                    </e:Skin>
                </e:itemRendererSkinName>
                <!-- DataGroup 的 dataProvider -->
                <e:ArrayCollection>
                    <e:Object label="颱風新聞" url="https://www.google.com/search?q=typhoon" />
                    <e:Object label="美女新聞" url="https://www.google.com/search?q=beauty" />
                    <e:Object label="政治新聞" url="https://www.google.com/search?q=egret" />
                    <e:Object label="颱風新聞" url="https://www.google.com/search?q=typhoon" />
                    <e:Object label="美女新聞" url="https://www.google.com/search?q=beauty" />
                    <e:Object label="政治新聞" url="https://www.google.com/search?q=egret" />
                    <e:Object label="颱風新聞" url="https://www.google.com/search?q=typhoon" />
                    <e:Object label="美女新聞" url="https://www.google.com/search?q=beauty" />
                    <e:Object label="政治新聞" url="https://www.google.com/search?q=egret" />
                    <e:Object label="颱風新聞" url="https://www.google.com/search?q=typhoon" />
                    <e:Object label="美女新聞" url="https://www.google.com/search?q=beauty" />
                    <e:Object label="政治新聞" url="https://www.google.com/search?q=egret" />
                    <e:Object label="颱風新聞" url="https://www.google.com/search?q=typhoon" />
                    <e:Object label="美女新聞" url="https://www.google.com/search?q=beauty" />
                    <e:Object label="政治新聞" url="https://www.google.com/search?q=egret" />
                    <e:Object label="颱風新聞" url="https://www.google.com/search?q=typhoon" />
                    <e:Object label="美女新聞" url="https://www.google.com/search?q=beauty" />
                    <e:Object label="政治新聞" url="https://www.google.com/search?q=egret" />
                </e:ArrayCollection>
                <e:layout>
                    <e:VerticalLayout />
                </e:layout>
            </e:DataGroup>
        </e:Scroller>
    </e:Group>
</e:Skin>

ts 部分

class My extends eui.Component {

    /** 可直接取用 id 元件 */
    private readonly myDG: eui.DataGroup;

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

        // 動態新增資料
        const dp = this.myDG.dataProvider as eui.ArrayCollection;
        dp.addItem({ label: "奇摩新聞 X", url: "https://www.google.com/search?q=yahoo" });
    }

}

/** 自定義 ItemRenderer */
class DGItemRender extends eui.ItemRenderer {

    private readonly btn: eui.Button;

    protected createChildren(): void {
        super.createChildren();
        // 點擊 [點擊查看] 按鈕 log 網址
        this.btn.addEventListener(egret.TouchEvent.TOUCH_TAP, () => console.log(this.data.url), this);
    }

}