Marine's Blog

Egret List+ItemRenderer使用

技术 Egret
2018/05/20

扫描二维码分享

×

码云：https://gitee.com/zhangtao3/egret_list_demo.git
GitHub:https://github.com/564239493/egret_list_demo.git

准备

ListPanelSkin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="ListPanelSkin" width="640" height="1136" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing">
	<e:Rect width="100%" height="100%" x="0" y="0" fillColor="0xeeeeee"/>
	<e:Label id="txtTitle" text="List列表" y="50" textColor="0x000000" fontFamily="SimHei" left="20"/>
	<e:Label id="btnGet" text="[获取选择]" y="50" fontFamily="SimHei" right="20" textColor="0x00cc00"/>
	<e:Label id="btnAdd" text="[添加]" y="111" fontFamily="SimHei" textColor="0x00CC00" x="20"/>
	<e:Scroller width="620" height="976" y="158" horizontalCenter="0">
		<e:List id="dataList">
			<e:layout>
				<e:VerticalLayout gap="15"/>
			</e:layout>
		</e:List>
	</e:Scroller>
</e:Skin>

ListItemSkin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="ListItemSkin" width="620" height="70" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing">
	<e:Rect width="100%" height="100%" x="0" y="0" fillColor="0xffffff" ellipseWidth="20"/>
	<e:Label text="{data.index}" textColor="0x000000" fontFamily="SimHei" size="25" verticalCenter="0" x="5"/>
	<e:Label id="txtMsg" text="{data.msg}" textColor="0x000000" fontFamily="SimHei" verticalCenter="0" x="153"/>
	<e:Group right="0" verticalCenter="0">
		<e:Label id="btnAdd" text="[增]" fontFamily="SimHei" textColor="0x00cc00" size="32" x="0" y="0"/>
		<e:Label id="btnUpdate" text="[改]" fontFamily="SimHei" textColor="0x00CC00" size="32" x="10" y="10"/>
		<e:Label id="btnDelete" text="[删]" fontFamily="SimHei" textColor="0x00CC00" size="32" x="20" y="20"/>
		<e:Label id="btnChoose" text="[选]" fontFamily="SimHei" textColor="0x00CC00" size="32" x="30" y="30"/>
		<e:layout>
			<e:HorizontalLayout gap="10"/>
		</e:layout>
	</e:Group>
</e:Skin>

ListPanel

初始化数据源

1
private dataArray: eui.ArrayCollection = new eui.ArrayCollection();

初始化List

1
2
this.dataList.dataProvider = this.dataArray;
this.dataList.itemRenderer = ListItem;

初始化数据

1
2
3
4
5
6
7
private initData(): any {
      var tempArray = [];
      for (var i = 0; i < 40; i++) {
          tempArray.push({ index: i, msg: i + "文本内容", status: 0 });
      }
      return tempArray;
  }

渲染List

1
2
3
var data = this.initData();
// 渲染List
this.dataArray.replaceAll(data);
1
2
3
4
5
6
// 在list末尾添加
   public addItem(): void {
       var index = this.dataArray.length;
       var data = { index: index, msg: index + "文本内容", status: 0 };
       this.dataArray.addItem(data);
   }
1
2
3
4
// 在item当前位置添加
  public addItem2(data, index): void {
      this.dataArray.addItemAt(data, index);
  }
1
2
3
4
5
6
7
public deleteItem(index): void {
       // var location = this.dataArray.getItemIndex(item);
       // if (location != -1) {
       //     this.dataArray.removeItemAt(location);
       // }
       this.dataArray.removeItemAt(index);
   }

ListItem

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
protected dataChanged(): void {
       // 渲染UI,{data.msg}相当于this.txtMsg.text = this.data.msg
       if (this.data.status == 1) {
           this.txtMsg.text = this.data.msg + ",已选择";
       } else {
           this.txtMsg.text = this.data.msg;
       }
   }
   private addItem(): void {
       ListPanel.instance.addItem2({ index: this.data.index + "-1", msg: "新增加", status: 0 },this.itemIndex);
   }
   private updateItem(): void {
       this.data.msg = "已修改";
   }
   private deleteItem(): void {
       ListPanel.instance.deleteItem(this.itemIndex);
   }
   private chooseItem(): void {
       if (this.data.status == 0) {
           this.data.status = 1;
       } else {
           this.data.status = 0;
       }
       this.dataChanged();
   }

比较简单的增删改查操作，主要是项目中有些复杂的增删改功能呢，本来想在此demo练习实现，实际比较复杂，没有成功，仅保留基本操作。

Archive Tag
Total : 17
2018
2017
日记 技术 Git hexo js koa Egret 个人 电影集 微信 电视剧集