笔记六 ：EgretH5通用MVC框架的入门操作：ItemList滚动列表的使用,以及内部Item配置与监听的方法（UI部分）
这个教程详细介绍了如何在Egret框架中创建一个简单的列表界面，并将其与控制器和视图管理器集成。以下是每个步骤的简要总结：
创建项目结构：
- 创建基本的项目结构，包括资源文件夹、皮肤文件夹等。
编写ItemDemoController：
- 创建一个控制器类
ItemListDemoController，负责处理与列表界面相关的逻辑。 - 在
init()方法中注册视图管理器并加载资源。
- 创建一个控制器类
创建DemoView：
- 创建一个视图类
DemoView，继承自eui.Panel。 - 在
initUI()方法中初始化列表界面和按钮组件，并设置事件监听器。
- 创建一个视图类
编写ItemDemoSkin：
- 创建一个皮肤类
ItemDemoSkin，定义列表项的外观。 - 使用Egret的UI组件（如
eui.Image,eui.Label,eui.Button）来构建界面。
- 创建一个皮肤类
实现ItemDemoViewManager：
- 创建一个视图管理器类
ItemDemoViewManager，负责创建和显示列表界面。 - 在
playopen()方法中根据传入的参数决定显示哪个视图。
- 创建一个视图管理器类
注册控制器和视图管理器：
- 在
DemoTest.ts中注册ItemListDemoController并初始化所有模块。
- 在
运行测试：
- 确保所有资源加载完成，然后运行项目以测试列表界面的显示和交互功能。
以下是一些关键代码片段：
ItemDemoController
class ItemListDemoController extends BaseControler { public init(): void { super.init(); this.registerView(new DemoView()); } } DemoView
class DemoView extends eui.Panel { private button2: eui.ToggleButton; public constructor() { super(); this.skinName = "resource/skins/demo/DemoViewSkin.exml"; } protected createChildren(): void { super.createChildren(); this.button2.addEventListener(egret.TouchEvent.TOUCH_TAP, this.button2ClickHandler, this); } private button2ClickHandler(e: egret.TouchEvent): void { App.ViewManager.playopen(1, ViewConst.ItemListDemo); } } ItemDemoSkin
<?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> DemoTest
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); } private onResourceLoadProgress(itemsLoaded: number, itemsTotal: number): void { App.ControllerManager.applyFunc(ControllerConst.Loading, LoadingConst.SetProgress, itemsLoaded, itemsTotal); } private initModule(): void { App.ControllerManager.registerController(new ItemListDemoController()); // 注册其他控制器 } } 通过这些步骤和代码片段，你可以在Egret框架中创建一个简单的列表界面，并将其与控制器和视图管理器集成。
