eui-eui.ItemRenderer

以下是想呈現的效果

eui.ItemRenderer 使用範例, 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:Scroller width="100%" height="100%">
        <e:DataGroup itemRenderer="MyRenderer" useVirtualLayout="true">
            <!-- 定義 itemRenderer 外觀 -->
            <e:itemRendererSkinName>
                <e:Skin>
                    <!-- 背景設定 id 程式控制顏色 -->
                    <e:Rect id="bg" fillColor="0x333333" width="640" height="100%" />
                    <e:Group width="100%" height="100%">
                        <e:Group width="100%" height="100%">
                            <!-- 頭貼 -->
                            <e:Image source="{data.icon}" width="20" height="20" />
                            <!-- 名字 -->
                            <e:Label text="{data.name}" />
                            <!-- 發布時間 -->
                            <e:Label text="{data.time}" />
                            <e:layout>
                                <e:HorizontalLayout gap="10" />
                            </e:layout>
                        </e:Group>
                        <!-- 發布訊息 -->
                        <e:Label text="{data.message}" width="600" />
                        <e:layout>
                            <e:VerticalLayout gap="10" paddingBottom="20" paddingLeft="20" paddingRight="20"
                                              paddingTop="20" />
                        </e:layout>
                    </e:Group>
                </e:Skin>
            </e:itemRendererSkinName>
            <!-- 資料集 -->
            <e:dataProvider>
                <e:ArrayCollection>
                    <e:Object name="Edwin" icon="egret_icon_png" time="2020-10-10" message="這真是一個好天氣" />
                    <e:Object name="San" icon="egret_icon_png" time="2020-10-11" message="銷售世界上第一號的產品——不是汽車，而是自己。 在你成功地把自己推銷給別人之前，你必須百分之百的把自己推銷給自己。" />
                    <e:Object name="Egret" icon="egret_icon_png" time="2020-10-12" message="egret 是一個不錯的遊戲引擎是吧" />
                    <e:Object name="Candy" icon="egret_icon_png" time="2020-10-13" message="人生有一半掌握在上帝那裡，另一半攥在自己的手中。人的一輩子唯一做的就是，不斷地用你手中的這一半更多地贏取上帝掌握的那一半。人生沒有彩排，只有現場直播，所以每一件事都要努力做得最好!" />
                    <e:Object name="Edwin" icon="egret_icon_png" time="2020-10-10" message="這真是一個好天氣" />
                    <e:Object name="San" icon="egret_icon_png" time="2020-10-11" message="銷售世界上第一號的產品——不是汽車，而是自己。 在你成功地把自己推銷給別人之前，你必須百分之百的把自己推銷給自己。" />
                    <e:Object name="Egret" icon="egret_icon_png" time="2020-10-12" message="egret 是一個不錯的遊戲引擎是吧" />
                    <e:Object name="Candy" icon="egret_icon_png" time="2020-10-13" message="人生有一半掌握在上帝那裡，另一半攥在自己的手中。人的一輩子唯一做的就是，不斷地用你手中的這一半更多地贏取上帝掌握的那一半。人生沒有彩排，只有現場直播，所以每一件事都要努力做得最好!" />
                    <e:Object name="Edwin" icon="egret_icon_png" time="2020-10-10" message="這真是一個好天氣" />
                    <e:Object name="San" icon="egret_icon_png" time="2020-10-11" message="銷售世界上第一號的產品——不是汽車，而是自己。 在你成功地把自己推銷給別人之前，你必須百分之百的把自己推銷給自己。" />
                    <e:Object name="Egret" icon="egret_icon_png" time="2020-10-12" message="egret 是一個不錯的遊戲引擎是吧" />
                    <e:Object name="Candy" icon="egret_icon_png" time="2020-10-13" message="人生有一半掌握在上帝那裡，另一半攥在自己的手中。人的一輩子唯一做的就是，不斷地用你手中的這一半更多地贏取上帝掌握的那一半。人生沒有彩排，只有現場直播，所以每一件事都要努力做得最好!" />
                </e:ArrayCollection>
            </e:dataProvider>
            <e:layout>
                <e:VerticalLayout gap="10" />
            </e:layout>
        </e:DataGroup>
    </e:Scroller>
</e:Skin>

typescript 部分

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

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

    }

}

/** 自訂義項目渲染器 */
class MyRenderer extends eui.ItemRenderer {

    /** 背景 */
    private bg: eui.Rect;

    /** 當數據改變時更新視圖 */
    protected dataChanged(): void {
        // 讓背景跟據不同索引變化, 奇數淺灰, 偶數深灰
        this.bg.fillColor = this.itemIndex % 2 ? 0x333333 : 0x666666;
    }

}