duilib 中list控件的扩展

概述

duilib中list控件默认情况样式比较简单,无法适应众多需求场景

扩展与原始list对比

原始实现效果:

扩展list效果:

 

扩展list的实现

1.duilib源代码的修改

 首先修改CListHeaderItemUI类,该类表示的是list的表头,如下图:(修改源码后记得重新编译)

CControlUI类属于duilib基础控件类,CContainerUI是duilib的容器基类(duilib基础框架参考),容器,其实就是可以在里面添加,嵌套其他控件的东西,修改继承类,使其具有容纳其它控件的功能。

2.xml文件配置

list控件及表头配置

UpdateEepromReadPassword.xml

<?xml version="1.0"?>
<Window size="1280,760" caption="0,0,0,36" roundcorner="0,0">
	<Include source="lang.xml" />
	<Include source="font.xml" />
	<Include source="default.xml" />
	<VerticalLayout>
		<TabLayout name="updateeepromtab">
			
			<VerticalLayout inset="30,30,30,30" bkcolor="#FFFFFFFF">
				<HorizontalLayout bkimage="list_bg.png" inset="0,0,0,0">
					<List name="listexeeprom" width="1213" bkcolor="#FFFFFFFF" inset="0,0,0,0" itemshowhtml="true" vscrollbar="true" hscrollbar="true" headerbkimage="file='list_header_bg.png'" itemalign="center" hscrollbar="false" menu="true">
						<ListHeader height="40" menu="true" scaleheader="true" bkcolor="#FFFFFFFF">
							<ListHeaderItem   font="3" scale="33" bodersize="1" bodercolor="#FFBDBDBD" textcolor="#FF151515" hotimage="file='list_header_hot.png'" pushedimage="file='list_header_pushed.png'" sepimage="file='list_header_sep.png'" sepwidth="1">
								<CheckBox name="select_eeprom_all" endellipsis="true" width="30" height="30"  selectedimage="file='Update\checkbox_p.png' dest='6,5,36,35'" normalimage="file='Update\checkbox_h.png' dest='6,5,36,35'"  />
								<Container  bkimage="file='Update\list_header_sep.png'" float="true" pos="40,0,41,40"/>
								<Text name="multyupdate_eeprom_text_softname" text="软件名称" font="3" scale="10" float="true" pos="150,5,350,35"/>
							</ListHeaderItem>
							<ListHeaderItem text="本地最新版本"   font="3" scale="10" textcolor="#FF151515" hotimage="file='list_header_hot.png'" pushedimage="file='list_header_pushed.png'" sepimage="file='list_header_sep.png'" sepwidth="1"/>
							<ListHeaderItem text="最新版本"   font="3" scale="15" textcolor="#FF151515" hotimage="file='list_header_hot.png'" pushedimage="file='list_header_pushed.png'" sepimage="file='list_header_sep.png'" sepwidth="1"/>
							<ListHeaderItem text="可下载版本"  font="3" scale="10" textcolor="#FF151515" hotimage="file='list_header_hot.png'" pushedimage="file='list_header_pushed.png'" sepimage="file='list_header_sep.png'" sepwidth="1"/>
							<ListHeaderItem text=""  font="3" endellipsis="true" scale="27" textcolor="#FF151515" bodersize="1" bodercolor="#FF151515" hotimage="file='list_header_hot.png'" pushedimage="file='list_header_pushed.png'" sepimage="file='list_header_sep.png'" sepwidth="1">
								<HorizontalLayout>
									<Text name="multyupdate_eeprom_text_process" padding="15,10,0,5" text="0/0" />
									<Container  bkimage="file='Update\list_header_sep.png'" width="1" height="40"/>
									<Button name="multyupdate_eeprom_btn" text="批量升级" padding="45,5,70,5" textcolor="#FFFFFFFF" font="3" align="center" valign="center" float="false" width="120" height="34" normalimage="file='Update\image_btn_oneclickupdate_nor.png'" hotimage="file='Update\image_btn_oneclickupdate_sel.png'" />
								</HorizontalLayout>
							</ListHeaderItem>
						</ListHeader>
					</List>		
				</HorizontalLayout>
			</VerticalLayout>
		</TabLayout>
	</VerticalLayout>
</Window>

 list扩展控件行列自定义配置

UpdateListItem.xml

<?xml version="1.0" encoding="UTF-8"?>
<Window>
	<!-- <Font shared="true" id="1" name="微软雅黑" size="12" default="true" /> -->
	<ListContainerElement>
		<HorizontalLayout height="40">
			<HorizontalLayout width="30" padding="5,5,5,5">
				<CheckBox name="select_single" endellipsis="true" width="30" height="30" align="center" selectedimage="file='Update\checkbox_p.png' dest='0,0,30,30'" normalimage="file='Update\checkbox_h.png' dest='0,0,30,30'"  />
			</HorizontalLayout>
			<HorizontalLayout width="350">
				<Label name="softname"  align="center" valign="center" textcolor="#FF727272" />
			</HorizontalLayout>
			<HorizontalLayout width="150">
				<Label name="locallastversion"  align="center" valign="center" textcolor="#FF727272"  />
			</HorizontalLayout>
			<HorizontalLayout width="150">
				<Label name="lastversion"  align="center" valign="center" textcolor="#FF727272" />
			</HorizontalLayout>
			<HorizontalLayout width="129">
				<Combo name="enablevercom" font="3" width="129" height="48" align="center" valign="center" normalimage="file='Update\img_insert_combox_nor.png'"/>
			</HorizontalLayout>
			<HorizontalLayout width="330">
				<Label name="extend"  align="center" valign="center" textcolor="#FF727272" />
			</HorizontalLayout>
		</HorizontalLayout>
   </ListContainerElement>
</Window>

3.代码使用

//设置XXX升级列表表格
void CUpdatePage::ShowUpdateTableEEPROM(std::string StrSoftName = "XXX升级列表", std::string StrLocalVersion = "10", std::string StrNewVersion = "12", std::string StrEnableDownLoad = "12", std::string StrDownLoadStatus = "等待更新")
{
	wstring wStrSoftName = CStringHelper::s2ws(StrSoftName);
	wstring wStrLocalVersion = CStringHelper::s2ws(StrLocalVersion);
	wstring wStrNewVersion = CStringHelper::s2ws(StrNewVersion);
	wstring wStrEnableDownLoad = CStringHelper::s2ws(StrEnableDownLoad);
	wstring wStrDownLoadStatus = CStringHelper::s2ws(StrDownLoadStatus);

	int index = 0;
	CListUI* pList = static_cast<CListUI*>(m_PaintManager.FindControl(_T("listexeeprom")));


	if (NULL == pList)
	{
		return;
	}

	CListContainerElementUI* pListElement = NULL;
	if (!m_dlgBuilder.GetMarkup()->IsValid())
	{
		pListElement = static_cast<CListContainerElementUI*>(m_dlgBuilder.Create(_T("UpdateListItem.xml"), (UINT)0, NULL, &m_PaintManager));
	}
	else
	{
		pListElement = static_cast<CListContainerElementUI*>(m_dlgBuilder.Create((UINT)0, &m_PaintManager));
	}



	//设置软件名称
	CLabelUI* pLab = static_cast<CLabelUI*>(m_PaintManager.FindSubControlByName(pListElement, _T("softname")));
	if (pLab != NULL)
	{

		//pLab->SetFixedWidth(350);
		pLab->SetText(wStrSoftName.c_str());
		pLab->SetFont(3);
		pLab->SetBorderSize(1);
		pLab->SetBorderColor(0xFFBDBDBD);
	}

	//设置本地最新版本
	pLab = NULL;
	pLab = static_cast<CLabelUI*>(m_PaintManager.FindSubControlByName(pListElement, _T("locallastversion")));
	if (pLab != NULL)
	{
		//pLab->SetFixedWidth(200);
		pLab->SetText(wStrLocalVersion.c_str());
		pLab->SetFont(3);
		pLab->SetBorderSize(1);
		pLab->SetBorderColor(0xFFBDBDBD);
	}

	//设置最新版本
	pLab = NULL;
	pLab = static_cast<CLabelUI*>(m_PaintManager.FindSubControlByName(pListElement, _T("lastversion")));
	if (pLab != NULL)
	{
		//pLab->SetFixedWidth(130);
		pLab->SetText(wStrNewVersion.c_str());
		pLab->SetFont(3);
		pLab->SetBorderSize(1);
		pLab->SetBorderColor(0xFFBDBDBD);
	}

	//设置可下载版本
	CComboUI *pCom = static_cast<CComboUI*>(m_PaintManager.FindSubControlByName(pListElement, _T("enablevercom")));
	if (pLab != NULL)
	{
		pCom->RemoveAll();

		CListLabelElementUI *pListElem1 = new CListLabelElementUI;
		pListElem1->SetText(wStrEnableDownLoad.c_str());
		pCom->Add(pListElem1);

		pListElem1 = new CListLabelElementUI;
		pListElem1->SetText(wStrEnableDownLoad.c_str());
		pCom->Add(pListElem1);

		pCom->SetBorderSize(1);
		pCom->SetBorderColor(0xFFBDBDBD);
		pCom->SelectItem(0);
	}

	//设置下载状态
	pLab = NULL;
	pLab = static_cast<CLabelUI*>(m_PaintManager.FindSubControlByName(pListElement, _T("extend")));
	if (pLab != NULL)
	{
		//pLab->SetFixedWidth(330);
		pLab->SetText(wStrDownLoadStatus.c_str());
		pLab->SetFont(3);
		pLab->SetBorderSize(1);
		pLab->SetBorderColor(0xFFBDBDBD);
	}


	pListElement->SetFixedHeight(40);
	//pListElement->SetFixedWidth(1200);  //固定高度
	pListElement->SetUserData(_T("UpdateEEPROM"));
	index = pList->GetCount();

	//记录list与pListElement对应关系
	m_CurrentListOrder[index+ ListEepromBase] = pListElement;

	if (!pList->AddAt(pListElement, index))
	{
		delete pListElement;
		return;
	}

}

4.列表的勾选与选中

单选一个,代码如下:

    int index = 0;
    CListUI* pListeeprom = static_cast<CListUI*>(m_PaintManager.FindControl(_T("listexeeprom")));

   if (pListeeprom)
		{
			index = pListeeprom->GetCurSel();//当前所选行
			CControlUI *pControl = pListeeprom->GetItemAt(index);
			CListContainerElementUI* pItem = static_cast<CListContainerElementUI*>(pControl);
			CCheckBoxUI* pCheck = static_cast<CCheckBoxUI*>(m_PaintManager.FindSubControlByName(pItem, _T("select_single")));

			if (pCheck)
			{
				if (pCheck->IsSelected())
				{
					pCheck->SetCheck(false);
				}
				else
				{
					pCheck->SetCheck(true);
				}
			}
			std::string str = CStringHelper::ws2s(pItem->GetUserData().GetData());
			//MessageboxDuilib::ShowMessageBox(NULL, str, "", 1);
		}

表头选中,全选与全不选,如下代码:

//升级界面列表全选
void CUpdatePage::UpdateEepromSelectAll()
{
	CCheckBoxUI *pCheckAll = static_cast<CCheckBoxUI*>(m_PaintManager.FindControl(_T("select_eeprom_all")));;
	if (pCheckAll)
	{
		if (pCheckAll->IsSelected())
		{
			CListUI* pListeeprom = static_cast<CListUI*>(m_PaintManager.FindControl(_T("listexeeprom")));
			if (NULL == pListeeprom)
			{
				return;
			}
			for (int i = 0; i < pListeeprom->GetCount(); i++)
			{
				CControlUI *pControl = pListeeprom->GetItemAt(i);
				CListContainerElementUI* pItem = static_cast<CListContainerElementUI*>(pControl);
				CCheckBoxUI* pCheck = static_cast<CCheckBoxUI*>(m_PaintManager.FindSubControlByName(pItem, _T("select_single")));
				if (pCheck)
				{
					pCheck->Selected(false);
					m_UpdateEepromSelect.clear();
				}
			}
		}
		else
		{
			CListUI* pListeeprom = static_cast<CListUI*>(m_PaintManager.FindControl(_T("listexeeprom")));
			if (NULL == pListeeprom)
			{
				return;
			}
			for (int i = 0; i < pListeeprom->GetCount(); i++)
			{
				CControlUI *pControl = pListeeprom->GetItemAt(i);
				CListContainerElementUI* pItem = static_cast<CListContainerElementUI*>(pControl);
				CCheckBoxUI* pCheck = static_cast<CCheckBoxUI*>(m_PaintManager.FindSubControlByName(pItem, _T("select_single")));
				if (pCheck)
				{
					pCheck->Selected(true);
					m_UpdateEepromSelect.push_back(i);    //记录所选ID
				}
			}
		}
	}
}

5.实时修改列表头的信息

//设置模块下载个数进度
void CUpdatePage::SetEepromUpdateNum(std::string Str)
{
	std::wstring wstr = CStringHelper::s2ws(Str);
	CTextUI *pText = static_cast<CTextUI*>(m_PaintManager.FindControl(_T("multyupdate_eeprom_text_process")));
	if (pText)
	{
		pText->SetText(wstr.c_str());
	}
}

外观效果如文章开头第二张图所示,还可以自行添加其它控件进行扩展,满足自己的需求。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页