By Ne0 — Mar 6, 2024

笔记六：EgretH5通用MVC框架的入门操作：ItemList滚动列表的使用,以及内部Item配置与监听的方法（UI部分）

笔记六：EgretH5通用MVC框架的入门操作：ItemList滚动列表的使用,以及内部Item配置与监听的方法（UI部分）

前言：ItemList滚动列表是几乎所有界面UI包括网页，手机APP，游戏UI都常用到的一个组件，用于显示一些重复性的列表，比如淘宝的商品列表，微信的消息列表等等，这次笔记记录如何用Egret通用MVC框架组建ItemList滚动列表，基于笔记一中搭建的scene。

源代码：

演示效果如下：

1.创建\src\example\module\demo\list\ItemListDemoController.ts （ ItemList界面控制器）

/**
 * Created by egret on 15-1-7.
 */
class ItemListDemoController extends BaseController {
    private itemListDemoView:ItemListDemoView;

    public constructor() {
        super();

        this.itemListDemoView = new ItemListDemoView(this, LayerManager.UI_Popup);
        App.ViewManager.register(ViewConst.ItemListDemo, this.itemListDemoView);
    }
}

2.添加ViewConst：\src\example\consts\ViewConst.ts （用于ViewManager的管理）

添加上：ItemListDemo关键字

/**
 * Created by Administrator on 2014/11/23.
 */
enum ViewConst{
    Loading = 10000,
    Login,
    Home,
    Friend,
    Shop,
    Warehouse,
    Factory,
    Task,
    Daily,
    Mail,
    Demo,
    TarBarDemo,
    ItemListDemo,

    Game = 20000,
    GameUI,
    RpgGame,
}

3.创建\src\example\module\demo\list\ItemListDemoView.ts （ ItemList界面的View）

/**
 * Created by egret on 15-1-7.
 */
class ItemListDemoView extends BaseEuiView {
    public constructor($controller: BaseController, $parent: eui.Group) {
        super($controller, $parent);
        this.once(egret.Event.REMOVED_FROM_STAGE,this.dispose,this);
        this.skinName = "resource/skins/demo/ItemListDemoSkin.exml";
    }

    closeBtn: eui.Button;
    arrCollection: eui.ArrayCollection;
    list:eui.List;
    
    public initUI(): void {
        //this.removeEventListener(eui.UIEvent.COMPLETE, this.initUI, this)
        this.closeBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onCloseBtn, this);
        this.initItemList();
    }

    /**初始化itemList组件 */
    private initItemList():void{
        let self = this;
        /*
        let data = {
			[0]:{
				name:"角色",
				flag:false,
                info:0
			},		
			[1]:{
				name:"合击",
				flag:false,
                info:1
			},			
			[2]:{
				name:"转生",
				flag:false,
                info:2
			},			
			[3]:{
				name:"羽翼",
				flag:false,
                info:3
			},
		}
        self.arrCollection = new eui.ArrayCollection();       
        self.arrCollection.addItem(data[0])
		self.arrCollection.addItem(data[1])
		self.arrCollection.addItem(data[2])
		self.arrCollection.addItem(data[3])
        */
         let data = [{
				name:"角色",
				flag:false,
                info:0
			},{
				name:"合击",
				flag:false,
                info:1
			},{
				name:"转生",
				flag:false,
                info:2
			},{
				name:"转生",
				flag:false,
                info:3
			},{
				name:"转生",
				flag:false,
                info:4
			},{
				name:"羽翼",
				flag:false,
                info:5
         }]
        self.arrCollection = new eui.ArrayCollection(data);                
        self.list.itemRenderer = ItemDemoItemView;
        self.list.dataProvider = self.arrCollection;
    }

    private onCloseBtn(): void {
        App.ViewManager.playcloseView(1,this);
    }

    public dispose():void{
        this.closeBtn.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.onCloseBtn, this);
    }
}

4.创建\resource\skins\demo\ItemListDemoSkin.exml （ ItemList界面的View的skin文件）

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="ItemListDemoSkin" width="500" height="400" xmlns:e="http://ns.egret.com/eui"
        xmlns:w="http://ns.egret.com/wing">
	<e:Group width="400" height="300" anchorOffsetX="0" anchorOffsetY="0" horizontalCenter="0" verticalCenter="0">
		<e:Group width="400" height="300" verticalCenter="0" horizontalCenter="0">
			<e:Rect fillColor="0x097993" width="380" x="11" bottom="16" top="16" />
			<e:Image source="table_box_down" x="0" bottom="0" anchorOffsetX="0" width="398" />
			<e:Image source="table_box_up" x="0" top="0" anchorOffsetX="0" width="395" />
			<e:Image source="table_box_middle" x="0" top="46" bottom="93" anchorOffsetX="0" width="398" />
		</e:Group>
		<e:Rect width="398" height="300" x="2" y="0" anchorOffsetX="0" anchorOffsetY="0" fillColor="0xffffff" scaleX="1"
		        scaleY="1" visible="false" />
		<e:Scroller width="366" height="260" anchorOffsetX="0" anchorOffsetY="0" y="20" scaleX="1" scaleY="1"
		            horizontalCenter="0">
			<e:Group top="0" horizontalCenter="0">
				<e:List id="list" y="6" itemRendererSkinName="ItemDemoItemView" x="20" horizontalCenter="0" anchorOffsetX="0" width="315">
					<!--<e:ArrayCollection>
						<e:Array>
							<e:Object/>
							<e:Object/>
							<e:Object/>
							<e:Object/>
							<e:Object/>
							<e:Object/>
						</e:Array>
					</e:ArrayCollection>-->
					<e:layout>
						<e:TileLayout id="giftOpenShowListLayout" horizontalAlign="left" requestedColumnCount="1" columnWidth="100"
						               rowHeight="96" paddingTop="30"/>
					</e:layout>
				</e:List>
			</e:Group>
		</e:Scroller>
		<e:Button id="closeBtn" label="" x="328" y="1" anchorOffsetX="0" width="72" scaleX="1" scaleY="1">
			<e:skinName>
				<e:Skin states="up,down,disabled">
					<e:Image width="100%" height="100%" source="btn_wrong" source.down="btn_wrong" source.disabled="btn_wrong" />
					<e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0" />
				</e:Skin>
			</e:skinName>
		</e:Button>
	</e:Group>
</e:Skin>

5.创建文件：\src\example\module\demo\list\ItemDemoItemView.ts （ ItemList界面中的Item的View文件）

class ItemDemoItemView extends eui.ItemRenderer {
    constructor() {
        super();
        this.addEventListener(eui.UIEvent.COMPLETE, this.uiCompHandler, this);
        this.once(egret.Event.REMOVED_FROM_STAGE, this.dispose, this);
        this.skinName = "resource/skins/demo/ItemDemoSkin.exml";
    }

    private titleDisplay: eui.Label;
    private itembutton: eui.Button;

    private uiCompHandler(): void {
        this.removeEventListener(eui.UIEvent.COMPLETE, this.uiCompHandler, this);
        this.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onButtonHandler, this);
        this.initData();
    }

    private onButtonHandler(e: egret.TouchEvent): void {
        if (this.data.info != null) {  //注意0是false
            console.log("点击了这个按钮", this.data.info);
        }
    }

    public initData() {
        this.titleDisplay.text = "初始化";
    }

    public dataChanged(): void {
        this.titleDisplay.text = this.data.name;
    }

    public dispose(): void {
        this.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.onButtonHandler, this);
    }
}

6.创建\resource\skins\demo\ItemDemoSkin.exml (item的皮肤文件)

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="ItemDemoSkin" width="325" height="96" xmlns:e="http://ns.egret.com/eui">
	<e:Image source="card_bg" anchorOffsetY="0" height="93" anchorOffsetX="0" width="319" scale9Grid="30,30,100,100"/>
	<e:Group height="34" width="197.79" x="21.5" y="32.5" anchorOffsetX="0">
		<e:Label id="titleDisplay" text="普通化肥" textColor="16777215" size="21" bold="true" horizontalCenter="-20.5" verticalCenter="3.5"/>
		<e:Image source="icon_diamond" scaleX="0.5" scaleY="0.5" width="60" y="2" x="167.79"/>
		<e:Image source="icon_02" x="-3" y="-5.5"/>
	</e:Group>
	<e:Button id="itembutton" label="B" x="228.89" y="32.5" anchorOffsetX="0" width="60" anchorOffsetY="0" height="34"/>
</e:Skin>

7.打开\src\example\module\demo\DemoView.ts （为itemlist绑定好触发打开的按钮事件）

添加上按钮组件：

 button2: eui.ToggleButton;

initUI():void 中添加上按钮的监听：

this.button2.addEventListener(egret.TouchEvent.TOUCH_TAP, this.button2ClickHandler, this);

监听的事件函数：

    private button2ClickHandler(e: egret.TouchEvent): void {
        App.ViewManager.playopen(1, ViewConst.ItemListDemo);
    }

8.打开\src\example\test\DemoTest.ts （在demoTest中注册ItemListDemoController）

在 private initModule():void函数中加入：

 App.ControllerManager.register(ControllerConst.ItemListDemo, new ItemListDemoController());

DemoTest.ts 参考代码：

/**
 * Created by yangsong on 15-3-27.
 * GUI测试
 */
class DemoTest{
    public constructor(){
        var groupName:string = "preload_DemoTest";
        var subGroups:Array<string> = ["preload_core", "preload_ui"];
        App.ResourceUtils.loadGroups(groupName, subGroups, this.onResourceLoadComplete, this.onResourceLoadProgress, this);
    }

    /**
     * 资源组加载完成
     */
    private onResourceLoadComplete():void {
        this.initModule();
        App.Init();

        //音乐音效处理
        App.SoundManager.setBgOn(true);
        App.SoundManager.setEffectOn(!App.DeviceUtils.IsHtml5 || !App.DeviceUtils.IsMobile);

        //App.SceneManager.runScene(SceneConsts.UI);
        App.SceneManager.runScene(SceneConsts.Demo);
    }

    /**
     * 资源组加载进度
     */
    private onResourceLoadProgress(itemsLoaded:number, itemsTotal:number):void {
        App.ControllerManager.applyFunc(ControllerConst.Loading, LoadingConst.SetProgress, itemsLoaded, itemsTotal);
    }

    /**
     * 初始化所有模块
     */
    private initModule():void{
        App.ControllerManager.register(ControllerConst.Friend, new FriendController());
        App.ControllerManager.register(ControllerConst.Demo, new DemoController());
        App.ControllerManager.register(ControllerConst.TarbarDemo, new TarBarDemoController());      
         App.ControllerManager.register(ControllerConst.ItemListDemo, new ItemListDemoController());    
    }
}

9.运行测试（源代码接下来几个笔记后会贴出来供参考）

笔记六：EgretH5通用MVC框架的入门操作：ItemList滚动列表的使用,以及内部Item配置与监听的方法（UI部分）

笔记七：EgretH5通用MVC框架的入门操作：TabBar+ViewStack搭配使用,基于框架中的基本Panel（UI部分）

笔记五：EgretH5通用MVC框架的入门操作：人物角色的渐动血条（UI部分）

笔记七 ：EgretH5通用MVC框架的入门操作：TabBar+ViewStack搭配使用,基于框架中的基本Panel（UI部分）

笔记五 ：EgretH5通用MVC框架的入门操作：人物角色的渐动血条（UI部分）

You might also like...

笔记七：EgretH5通用MVC框架的入门操作：TabBar+ViewStack搭配使用,基于框架中的基本Panel（UI部分）

笔记五：EgretH5通用MVC框架的入门操作：人物角色的渐动血条（UI部分）