aardio - 【库】plusList2——二次封装plus自绘组件库

库文件下载：光庆·程序·在线 → aardio资源下载
光庆·程序·在线

 

请同时下载以下文件：

1、库文件：plusList2.rar（或复制本文库代码，保存到 /lib/godking/plusList2.aardio）

2、依赖最新版：paint.rar 和 customPlus.rar

解压缩后，都放到 lib/godking/ 目录下

先看效果

简介

1、本库是利用customPlus（plus组件自绘库），进行二次封装，成为特定类型的列表组件库。

2、本库的目的，是为了抛砖引玉，让更多爱好者作为参考，利用customPlus二次封装，做出更加强大漂亮的自绘组件库。

库代码示例（最新版本源代码请以下载文件为准）

//plusList2 漂亮的列表框2
//光庆
//抛砖引玉之作，希望广大爱好者参考做出更漂亮的plus自绘组件

namespace godking
	
class plusList2{
	ctor(plusCtrl,config){
		import fonts.fontAwesome;
		itemModel = {
				{	// 项目背景
					name = "item",
					type="rect",
					rectf={x=0;y=0;width=0;height=0},
					fillcolor=0xFF303030,
					itemhoverfillcolor=0xFF3e3e3e;
					itemselectedfillcolor=0xFFc0c6c9;
					click = true;
					},
 				{	// 橙色椭圆背景
					type="rect",
					rectf={x=10;y=10;width=-10;height=-10},
					round=30,
					fillcolor=0xFF444444,
					itemselectedfillcolor=0xFFeb6101,
					},
				{	// logo背景
					type="rect",
					rectf={x=15;y=15;width=50;height=50},
					round=-1,
					fillcolor=0xFFFFFFFF,
					},
				{	// logo图标文字
					name="logo",
					type="text",
					rectf={x=16;y=25;width=50;height=50},
					smooth=true,
					font={name="FontAwesome",point=22,color=0xFF4CAF50},
					itemselectedfont={name="FontAwesome",point=22,color=0xFFeb6101},
					align=1;
					},
 		
				{	// 列表标题文字
					name="title",
					type="text",
					smooth=true,
					rectf={x=75;y=19;width=-10;height=40},
					font={name="黑体",point=15,color=0xFFFFFFFF},
					itemselectedfont={name="黑体",point=15,color=0xFFFFFFFF},
					align=0
					},
				{	// 列表副标题文字
					name="subtitle",
					type="text",
					smooth=false,
					rectf={x=77;y=47;width=-10;height=40},
					font={name="宋体",point=10,color=0xFF888888},
					itemselectedfont={name="宋体",point=10,color=0xFF333333},
					align=0
					},
			}
		import godking.customPlus
		var p = godking.customPlus(plusCtrl,{
				itemWidth=300,	/*项目宽度*/
				itemHeight=80,	/*项目高度*/
				autoSizeRow=false,	/*自动根据项目行数及plus高度调整项目高度*/
				autoSizeCol=true,	/*自动根据项目列数及plus宽度调整项目宽度*/
				colnum=1, 	/*项目列数，为0则根据项目宽度和plus宽度自动计算*/
				rownum=0, 	/*项目行数，为0则根据项目高度和plus高度自动计算*/
				padLeft=0,	/*plus左边空白距离*/
				padTop=0,	/*plus顶边空白距离*/
				padRight=0,	/*plus右边空白距离*/
				padBottom=0,	/*plus底边空白距离*/
			});
		p.init(itemModel)
		var itemList ={{}};
		p.setItemList(itemList);
		..table.remove(itemList,1)
		p.onClick = function(itemIndex/*项目索引*/,elemIndex/*元素索引*/,elemID/*元素id*/,elemName/*元素name*/,plusIndex/*在当前显示列表中的序号*/){
			if this.onClick this.onClick (itemIndex);
		}	
	};

	addItem = function(Tlogo,Ttitle,Tsubtitle){
		..table.push(itemList,{logo=Tlogo,title=Ttitle,subtitle=Tsubtitle});	
	}

	delItem = function(index,count){
		for(i=1;count;1){
			if #itemList>=index ..table.remove(itemList,index);
		}
	}

	clear = function(){
		..table.clear(itemList);
	}
	
	getItem = function(){
		return itemList; 
	}
	
	// 以下基本为模板内容，如无特殊要求，不必更改
	init = p.init;
	toNextRow = p.toNextRow;
	toNextPage = p.toNextPage;
	toPrevRow = p.toPrevRow;
	toPrevPage = p.toPrevPage;
	toItem = p.toItem;
	toRow = p.toRow;
	toPage = p.toPage;
	update = p.update;
	isChecked = p.isChecked;
	itemIndexToPageItemIndex = p.itemIndexToPageItemIndex;
	pageItemIndexToItemIndex = p.pageItemIndexToItemIndex;

	@..util.metaProperty(
		pageCount = {
			_get = function(){ 
				return p.pageCount; 
			}
		};
		selectedIndex = {
			_get = function(){ 
				return p.selectedIndex;
			}		
			_set = function(v){ 
				p.selectedIndex=v;
			}		
		}
		firstIndex = {
			_get = function(){ 
				return p.firstIndex;
			}		
			_set = function(v){ 
				p.firstIndex=v;
			}		
		}		
	)
}

/**intellisense()
godking.plusList2 = plusList自绘列表框（光庆封装）
godking.plusList2() = !GKplusList2.
godking.plusList2(__/*plus*/) = @godking.plusList(winform.plus);
end intellisense**/

/**intellisense(!GKplusList2.)
addItem(__,,) = 添加项目。参数：1、logo图标文本 2、title标题文本 3、subtitle副标题文本
delItem(__,1) = 删除项目。参数：1、项目索引 2、删除数量
clear() = 清空项目。
getItem() = 获取项目列表。
onClick = @.onClick = function(index/*项目索引*/){
	__
}
end intellisense**/	

// 以下基本为模板内容，如无特殊要求，不必更改
/**intellisense(!GKplusList2.)	
init() = 初始化plus布局。\n可在plus尺寸改变事件中调用。
toNextRow() = 跳转到下一行，plus显示内容将从当前开始行的下一行开始。
toNextPage() = 跳转到下一页，plus显示内容为当前页的下一页。
toPrevRow() = 跳转到上一行，plus显示内容将从当前开始行的上一行开始。
toPrevPage() = 跳转到上一页，plus显示内容为当前页的上一页。
toItem(__) = 跳转到指定项目，plus显示内容从指定项目开始。
toRow(__) = 跳转到指定行，plus显示内容从指定行开始。
toPage(__) = 跳转到指定页，plus显示内容为指定页内容。
update() = 刷新当前页全部内容。
update(__,false) = 刷新指定项目内容。可用于编辑某项内容后及时刷新。\n参数：1、项目索引 2、是否为当前页项目索引（默认为false:全部项目索引）。
pageCount = 页面总数。
selectedIndex = 当前选中的项目索引。
firstIndex = 当前页显示的第一个项目索引。
itemIndexToPageItemIndex(__) = 项目索引转当前页项目索引。参数：项目索引。\n取项目列表中的项目在当前页中的索引。未包含在当前页中则返回空。
pageItemIndexToItemIndex(__) = 当前页项目索引转项目索引。参数：当前页项目索引。\n取当前页显示项目在所有项目列表中的索引。未找到则返回空。
end intellisense**/

调用示例：

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=469)
winform.add(
plus={cls="plus";left=37;top=15;right=297;bottom=449;notify=1;z=1}
)
/*}}*/

winform.show();
import godking.plusList2
var p=godking.plusList2(winform.plus);
for(i=1;5;1){
p.addItem(eval("'\uF15"++i++"'"),"菜单项目标题"++i,"菜单项目副标题"++i)	
}
p.update()
p.onClick = function(index/*项目索引*/){
	..win.msgbox("您点击了："++index);
}
win.loopMessage();