duilib 中list控件的扩展

深碍√TFBOYSˉ_ 2022-12-23 13:28 304阅读 0赞

# 概述 #

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

# 扩展与原始list对比 #

**原始实现效果：**

![20201125115839832.png][]

**扩展list效果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyNjQyMjM5_size_16_color_FFFFFF_t_70][]

# 扩展list的实现 #

## 1.duilib源代码的修改 ##

**①**首先修改**CListHeaderItemUI**类，该类表示的是list的表头，如下图：（修改源码后记得重新编译）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyNjQyMjM5_size_16_color_FFFFFF_t_70 1][]

**CControlUI**类属于duilib基础控件类，**CContainerUI**是duilib的容器基类（**[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>
    	
    	<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());
    	}
    }

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

[20201125115839832.png]: /images/20221120/05c3253f6d7c41c7b2c245c160a9f476.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyNjQyMjM5_size_16_color_FFFFFF_t_70]: /images/20221120/4e01e58fa16645ae9a0342af3f0196f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyNjQyMjM5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201125140839982.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyNjQyMjM5,size_16,color_FFFFFF,t_70
[duilib]: https://study-life.blog.csdn.net/article/details/107786376