DataGroup 自訂義皮膚與製作列表顯示（ListView）效果
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">
<!-- itemRenderer 為每個 item 的實例類別, useVirtualLayout 可以提昇滑動性能 -->
<e:DataGroup itemRenderer="edwin.DGItemRender" useVirtualLayout="true">
<!-- 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>
新增 DGItemRender.ts 於 src 資料夾, DGItemRender 必需繼承 eui.ItemRenderer, DGItemRender.ts 代碼如下：
namespace edwin {
export class DGItemRender extends eui.ItemRenderer {
private btn: eui.Button;
protected createChildren(): void {
super.createChildren();
this.btn.addEventListener(egret.TouchEvent.TOUCH_TAP, () => console.log(this.data.url), this);
}
}
}
但是希望內容是動態生成的可以這樣修改程式
清空 ArrayCollection 與 設置 DataGroup id
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">
<!-- itemRenderer 為每個 item 的實例類別, useVirtualLayout 可以提昇滑動性能 -->
<!-- 設置 DataGroup id ！！！！！！ -->
<e:DataGroup id="myDataGroup" itemRenderer="edwin.DGItemRender" useVirtualLayout="true">
<!-- 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 -->
<!-- 清空 ArrayCollection 資料 ！！！！！！ -->
<e:ArrayCollection></e:ArrayCollection>
<e:layout>
<e:VerticalLayout />
</e:layout>
</e:DataGroup>
</e:Scroller>
</e:Group>
</e:Skin>
MainUI.ts
namespace edwin {
export class MainUI extends eui.Component {
private myDataGroup: eui.DataGroup;
protected createChildren(): void {
super.createChildren();
this.percentWidth = this.percentHeight = 100;
let ac = this.myDataGroup.dataProvider as eui.ArrayCollection;
// 動態新增 item
ac.addItem({ label: "奇摩新聞 A", url: "https://www.google.com/search?q=yahoo" });
ac.addItem({ label: "奇摩新聞 B", url: "https://www.google.com/search?q=yahoo" });
ac.addItem({ label: "奇摩新聞 C", url: "https://www.google.com/search?q=yahoo" });
ac.addItem({ label: "奇摩新聞 D", url: "https://www.google.com/search?q=yahoo" });
ac.addItem({ label: "奇摩新聞 E", url: "https://www.google.com/search?q=yahoo" });
ac.addItem({ label: "奇摩新聞 F", url: "https://www.google.com/search?q=yahoo" });
ac.addItem({ label: "奇摩新聞 G", url: "https://www.google.com/search?q=yahoo" });
ac.addItem({ label: "奇摩新聞 H", url: "https://www.google.com/search?q=yahoo" });
ac.addItem({ label: "奇摩新聞 I", url: "https://www.google.com/search?q=yahoo" });
ac.addItem({ label: "奇摩新聞 J", url: "https://www.google.com/search?q=yahoo" });
ac.addItem({ label: "奇摩新聞 K", url: "https://www.google.com/search?q=yahoo" });
ac.addItem({ label: "奇摩新聞 L", url: "https://www.google.com/search?q=yahoo" });
ac.addItem({ label: "奇摩新聞 M", url: "https://www.google.com/search?q=yahoo" });
}
}
}
沒有留言:
張貼留言