duilib list控件扩展

对于简单的list控件已经有前辈分析了自带demo的ListRes全过程，duilib DirectUI库里面的一个简单的例子ListDemo，

他分析了listdemo的来龙去脉，这里我只是将个人理解的list分析一下。

由于自带的listdemo不能满足要求，所以必须个人扩展list，通过尝试发现

1. 列表头禁止拖动情况

这种情况很简单，配置xml的时候将表头宽度和元素宽度设置相同就行了，listheader布局如下：

     <List name="domainlist" bkcolor="#FFFFFFFF" inset="0,0,0,0" itemshowhtml="true" vscrollbar="true" hscrollbar="true" headerbkimage="file='list_header_bg.png'" itemalign="center" itembkcolor="#FFE2DDDF" itemaltbk="true" hscrollbar="false" menu="true"><ListHeader height="24" menu="true"><ListHeaderItem text="No" font="1" width="130" hotimage="file='list_header_hot.png'" pushedimage="file='list_header_pushed.png'" sepimage="file='list_header_sep.png'" sepwidth="1"/><ListHeaderItem text="Domain" font="1" width="160" hotimage="file='list_header_hot.png'" pushedimage="file='list_header_pushed.png'" sepimage="file='list_header_sep.png'" sepwidth="1"/><ListHeaderItem text="Description" font="1" width="140" hotimage="file='list_header_hot.png'" pushedimage="file='list_header_pushed.png'" sepimage="file='list_header_sep.png'" sepwidth="1"/></ListHeader></List>

上面是listdemo自带的xml,只是将listheaderitem宽度修改了

下面是listelement布局：

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<Window><HorizontalLayout width="266" height="60" bkcolor="#FFD2D2D2" ><HorizontalLayout width="130" height="60" bordersize="1" bordercolor="#FF00FF00"><HorizontalLayout /><VerticalLayout width="32"><HorizontalLayout /><Label name="listmem1" text="111" align="center" float="false" bkcolor="#FFFFFFFF" pos="22,0,0,0" width="32" height="18" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" /><HorizontalLayout /></VerticalLayout> <HorizontalLayout /></HorizontalLayout><VerticalLayout width="160" height="60" bordersize="1" bordercolor="#FF00FF00"><Label name="listmem2" text="222" align="center" float="true" bkcolor="#FFFFFFFF" pos="17,7,0,0" width="51" height="15" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" /></VerticalLayout><VerticalLayout width="140" height="60" bordersize="1" bordercolor="#FF00FF00"><Edit name="listmem3" text="333" float="true" pos="10,7,0,0" width="61" height="15" bkcolor="#FFFFFFFF" textpadding="4,3,4,3" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" /><Button float="true" pos="18,29,0,0" width="72" height="24" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='offline_down.png' source='0,0,72,24'" hotimage="file='offline_down.png' source='0,24,72,48'" pushedimage="file='offline_down.png' source='0,48,76,72'" /></VerticalLayout></HorizontalLayout>
</Window>

使用的时候添加代码如下：

我是直接修改listdemo的，

屏蔽原有的OnSearch函数，添加下面代码即可：

     CDialogBuilder builder;CVerticalLayoutUI *plist_element = static_cast<CVerticalLayoutUI*>( builder.Create( _T("listmem1.xml") , 0 , NULL , &m_pm , NULL ) );CListUI *plist = static_cast< CListUI* >( m_pm.FindControl("domainlist") );if ( !plist ){return ;}plist->Add(plist_element);

最后启动程序，得到下面的界面

2.列表头可拖动情况

如果直接使用CListContainerElementUI就会出现下面排版了。

可以看到位置完全打乱了，通过源码可以查到位置布局使用的函数是

void SetPos(RECT rc);

CListContainerElementUI里面并没有这个函数，那就是调用了CContainerUI的SetPos函数

CContainerUI的SetPos函数

 void CContainerUI::SetPos(RECT rc){CControlUI::SetPos(rc);if( m_items.IsEmpty() ) return;rc.left += m_rcInset.left;rc.top += m_rcInset.top;rc.right -= m_rcInset.right;rc.bottom -= m_rcInset.bottom;for( int it = 0; it < m_items.GetSize(); it++ ) {CControlUI* pControl = static_cast<CControlUI*>(m_items[it]);if( !pControl->IsVisible() ) continue;if( pControl->IsFloat() ) {SetFloatPos(it);}else {pControl->SetPos(rc); // 所有非float子控件放大到整个客户区}}}

直接将得到的rc设置给子控件了，也就是说，ListContainerElement每一列的宽度都是一样的，第二列被第三列覆盖了，第一列一直居中。

这里说明一下，duilib 控件位置布局是由父控件设置的，父控件只管自己的子控件。如下图所示

Root只管理下一层的Root1和Root2，其余的和他不相干。

Root1管理Root3和Root4，Root2管理Root5和Root6.

这里的父节点都是IContainerUI控件或者继承于IContainerUI控件的类，叶子节点一般都是CControlUI类或者继承于CControlUI的类。

所以我们需要在ListContainerElement添加SetPos函数

void CListContainerElementUI::SetPos(RECT rc)
{CControlUI::SetPos(rc);rc = m_rcItem;// Adjust for insetrc.left += m_rcInset.left;rc.top += m_rcInset.top;rc.right -= m_rcInset.right;rc.bottom -= m_rcInset.bottom;TListInfoUI *plistinfo = GetOwner()->GetListInfo();// Determine the width of elements that are sizeableSIZE szAvailable = { rc.right - rc.left, rc.bottom - rc.top };for( int it2 = 0; it2 < m_items.GetSize(); it2++ ){CControlUI* pControl = static_cast<CControlUI*>(m_items[it2]);if( !pControl->IsVisible() ) continue;if( pControl->IsFloat() ) {SetFloatPos(it2);continue;}RECT rcPadding = pControl->GetPadding();SIZE sz = pControl->EstimateSize(szAvailable);if( sz.cx == 0 ) {if( sz.cx < pControl->GetMinWidth() ) sz.cx = pControl->GetMinWidth();if( sz.cx > pControl->GetMaxWidth() ) sz.cx = pControl->GetMaxWidth();}else {if( sz.cx < pControl->GetMinWidth() ) sz.cx = pControl->GetMinWidth();if( sz.cx > pControl->GetMaxWidth() )sz.cx = pControl->GetMaxWidth();}sz.cy = pControl->GetFixedHeight();if( sz.cy == 0 ) sz.cy = rc.bottom - rc.top - rcPadding.top - rcPadding.bottom;if( sz.cy < 0 ) sz.cy = 0;if( sz.cy < pControl->GetMinHeight() ) sz.cy = pControl->GetMinHeight();if( sz.cy > pControl->GetMaxHeight() ) sz.cy = pControl->GetMaxHeight();RECT rcCtrl = { plistinfo->rcColumn[it2].left + rcPadding.left,rc.top + rcPadding.top,plistinfo->rcColumn[it2].right + rcPadding.left, rc.top + sz.cy + rcPadding.top + rcPadding.bottom };pControl->SetPos(rcCtrl);}
}

这里面代码主要来自于CHorizontalLayoutUI，删除了个人认为不需要的代码，当然本人接触这东西才一个月，也有可能多删除了一些东西。

重新写OnSearch函数

     CDialogBuilder builder;CListContainerElementUI *plist_element = static_cast<CListContainerElementUI*>( builder.Create( _T("listmem.xml") , 0 , NULL , &m_pm , NULL ) );if ( !plist_element ){return ;}if ( !plist ){return ;}plist->Add(plist_element);

现在可以看到拖动效果了

直接上图吧，原始图

拖动图

duilib list控件扩展相关推荐

wpf listview 添加控件_WPF开源控件扩展库 MaterialDesignExtensions
WPF开源控件扩展库 - MaterialDesignExtensions MaterialDesignExtensions仓库截图 logo Material Design Extensions 在 ...
RxSwift UI控件扩展
RxSwift UI控件扩展最好的示例是参考RxCocoa查看类似的属性如何扩展Rx化的. 为了配合RxSwift的绑定关系,RxCocoa提供简单的基于Cocoa控件的扩展,但是很少,比如Labe ...
WPF开源控件扩展库 - MaterialDesignExtensions
WPF开源控件扩展库 - MaterialDesignExtensions MaterialDesignExtensions仓库截图 logo Material Design Extensions 在 ...
MVC html 控件扩展【转载】
项目中用到mvc2控件扩展,任务分给了我,开发完了,结果可能要用devexpress,费了不少功夫,网上查找资料,整理成符合项目的,自己留个备份吧,一起学习 DropDownTree 第一个控件是Dr ...
关于duilib CComboUI控件下拉框字体显示与xml 设置不相符的问题
duilib的下拉列表框的字体无法通过itemfont自定义关于duilib CComboUI控件下拉框字体显示与xml 设置不相符的问题解决办法: 添加链接描述在设置全局字体属性时,设置字 ...
云信DUILIB 常用控件小实例
云信duilib在原duilib基础上扩展而来,包含了常用的控件. 下面是自己学习过程中,经常用到的一些小知识点. 1 Label标签 1.1 一般用法 <Label name= "p ...
Silverlight实用窍门系列：59.多个中心点联动多线的可拖动控件扩展为拓扑图
在本系列的第17篇文章中"Silverlight实用窍门系列:17.中心点联动多线的可拖动控件(绘制工程图.拓扑图基础) ",制作了基本的中心联动图标.有园友对此图的扩展不是很清晰 ...
玩转控件:对Dev的GridControl控件扩展
缘由一切实现来源于需求,目的在于不盲目造轮子,有小伙伴儿在看了<玩转控件:对Dev中GridControl控件的封装和扩展>文章后,私信作者说,因公司业务逻辑比较复杂,展示字段比较多,尤 ...
ajax控件扩展,22.6 扩展控件
22.6 扩展控件 ASP.NET AJAX在扩展已有控件方面占有很大的优势,它为创建新的扩展控件提供了一个框架,目前没有扩展控件,但使用ASP.NET AJAX控件工具集可以得到许多扩展控件.本节 ...

duilib list控件扩展

duilib list控件扩展相关推荐

最新文章

热门文章