当前位置: 首页 > 工具软件 > FTK > 使用案例 >

FTK的list控件使用

姜杜吟
2023-12-01

1、list控件本身是支持滑动的,详情可以看ftk_list.c里的ftk_list_on_event()函数,list控件的大致使用方法是,需要两个xul,一个xul里定义list控件本身,设置属性,并且定义一个scroll_bar,这时候list是空的。再需要另外一个list_item.xul,里面就定义list_item控件,可以自定义item里面包含什么,以及item的位置。比如:
第一个xul里:

<dialog x="0" y="0" w="$ww" h="$wh">
	<image x="0" y="0" w="$ww" h="$wh" value="stair/common/bg.png" attr="$FTK_BG_FOUR_CORNER"/>
	<!--不知道list滑动的时候怎么绘制的,这里加个透明的image,滑动list的时候,这个图片会逐渐加深-->
	<list id="30" x="5" y="80" w="390" h="440"
						move_support="1"	//定义list支持滑动
						bg_image[normal]="common/bg1.png"
						item_height="80" />		//list里的item高度
	
	<scroll_bar id="100" x="$pw-8" y="50" w="8" h="$ph" bitmap="common/scroll_bar.png" attr="$FTK_ATTR_BG_FOUR_CORNER"/>
</dialog>

第二个xul里:

<list_item x="0" y="0" w="600" h="80" visible="0"
			bg_image[normal]="stair/list/list_normal.png" 
			bg_selected="stair/list/list_pressed.png" >
			
	<label x="5" y_attr="Y_CENTER_IN_PARENT" w="150" h="40" font="size:28" fg[disable]="ff333333" al="$FTK_ALIGN_CENTER"/>
		  
	<image x="300" y_attr="Y_CENTER_IN_PARENT" w="80" h="50" value="stair/list/btn_radio_off.png" attr="$FTK_ATTR_BG_CENTER" />
			
	<image x_attr="X_LEFT_IN_PARENT" y_attr="Y_BOTTOM_IN_PARENT" w="$pw" h="2" value="stair/list/list_line.png" attr="$FTK_ATTR_BG_FOUR_CORNER"/>
	   
</list_item>

2、函数里实现初始化,首先需要定义一个FtkListCallBacks类型的变量,因为ftk_list_init()需要这个参数,作用就是在加载list_item的时候回调你定义的函数,手动再去设置list_item空间里的label和image、button等等,实现自定义。

_dialog_sel_priv.list = ftk_widget_lookup(win, IDC_STAIR_LIST);
		FtkListCallBacks callbacks = {
			.get_item = _dialog_select_list_get,	//获取你自定义的list_item
			.get_item_ctx = NULL,	//调用_dialog_select_list_get函数时回传给你的参数信息

			.validate_item = _dialog_select_list_validate,	//加载你的list_item时,调用这个函数,你可以在里面设置文字显示、图片显示等等
			.validate_item_ctx = &dialog_info,	//调用_dialog_select_list_validate函数回传给你的参数信息
		};
		
		ftk_list_add_scroll_bar(_dialog_sel_priv.list, ftk_widget_lookup(win, IDC_STAIR_SCROLL_BAR));
		ftk_list_init(_dialog_sel_priv.list, item_num, &callbacks);
		ftk_list_set_clicked_listener(_dialog_sel_priv.list, _dialog_item_clicked, win);

		ftk_list_set_total(_dialog_sel_priv.list, item_num);
		ftk_list_refresh(_dialog_sel_priv.list);

static FtkWidget* _dialog_select_list_get(FtkWidget* list, int index, void* ctx)
{
	return ui_load_xul("stair/list/set_standby_mode.xul");
}

static Ret _dialog_select_list_validate(FtkWidget* thiz, int position, int col, FtkWidget* cell, int visible, void* ctx)
{
	FtkWidget* list = thiz;
	DIALOG_INFO* item = (DIALOG_INFO *)ctx;
	
	if(item->item_num <= position)
		return RET_OK;

	switch(col)
	{
		case 0:
		{
			ftk_widget_set_text(cell, item->info[position].text);
			break;
		}
		case 1:
		{
			if(item->info[position].right_icon != NULL)
				ftk_image_set_image(cell,item->info[position].right_icon);
			else if(item->info[position].left_icon != NULL)
				ftk_image_set_image(cell,item->info[position].left_icon);
		}
		default:break;
	}

	return RET_OK;
}

3、以上基本就完成了list列表的初始化,支持滑动,但是滑动的时候不知道是怎么绘制的,加了那个image之后,滑动会使list周围的区域变黑,像是叠加上去的,因为那个image是透明的,叠加上去就会慢慢变黑,也不知道在哪里去改这个机制,以后找到了再来贴。

 类似资料: