duilib List控件,横向滚动时列表项不移动或者移动错位的bug的修复

简介: 转载请说明出处,谢谢~~       这篇博客已经作废,只是留作记录,新的bug修复博客地址:http://blog.csdn.net/zhuhongshu/article/details/42264673       之前就在群里挺群友朋友说道,使用List控件,里面加入ListContainElementUI元素,当List出现横向滚动条时,滚动条滑动后元素不跟着滑动或者滑动后位置不正确。

转载请说明出处,谢谢~~

      这篇博客已经作废,只是留作记录,新的bug修复博客地址:http://blog.csdn.net/zhuhongshu/article/details/42264673


      之前就在群里挺群友朋友说道,使用List控件,里面加入ListContainElementUI元素,当List出现横向滚动条时,滚动条滑动后元素不跟着滑动或者滑动后位置不正确。

      关于List控件的扩展,很早就有人做过了:

http://blog.csdn.net/xdrt81y/article/details/17790203

http://blog.csdn.net/tragicguy/article/details/21893065


       里面提到了,改造List的Header为容器的方法,和让ListContainElementUI控件内部的子控件跟随Header自动调节位置的方法。不过实际测试后会发现还是有问题的。我先把问题描述一下:

      1.当List出现滚动条后,拖动滚动条,这时ListContainElementUI控件内部的子控件跟随Header自动调节位置会有差错,明显看到偏移不正确

     2.当List出现滚动条后,拖动滚动条到任意位置让ListContainElementUI控件内部的子控件位移,然后最小化窗体再恢复。发现本应该发生偏移的子控件这时却跑到了原位。

     这篇文章里我会把这些问题都分析一下原因,并且给出解决方法。


分析过程:

     ListContainElementUI控件无疑是List元素中使用最多的,因为他本身就是个容器,可以存放任意元素,拥有极大的灵活性。如果要让他内部的子控件跟随Header自动调整位置,那么我们应该重写他的SetPos函数来控制子控件。这里引入我前面例举的第二篇博文的代码:

	void CListContainerElementUI::SetPos(RECT rc)
	{
		CContainerUI::SetPos(rc);
		if( m_pOwner == NULL ) return;		

		if (m_pHeader == NULL)
		{
			return;
		}
		TListInfoUI* pInfo = m_pOwner->GetListInfo();
		int nCount = m_items.GetSize();
		for (int i = 0; i < nCount; i++)
		{
			CControlUI *pHorizontalLayout = static_cast<CControlUI*>(m_items[i]);

			CListHeaderItemUI *pHeaderItem = static_cast<CListHeaderItemUI*>(m_pHeader->GetItemAt(i));
			if (pHorizontalLayout != NULL && pHeaderItem != NULL)
			{
				RECT rtHeader = pHeaderItem->GetPos();
				RECT rt = pHorizontalLayout->GetPos();
				rt.left = rtHeader.left;
				rt.right = rtHeader.right;
				pHorizontalLayout->SetPos(rt);
			}
		}
	}

       在SetPos函数里,动态获取Header,然后根据Header的位置再去调整子控件的位置。这段代码在不出现横向滚动条的时候是正常使用了,但是出现横向滚动条后滚动的效果就会出现偏差。

       导致这个问题的原因是,List控件的会先调用各个元素的SetPos函数,然后重新计算Header的位置,这时ListContainElementUI的SetPos里得到的Header的位置还是久位置,所以导致了最后显示的位置错乱。这里的解决方法就是自己去计算新的偏移差。新的代码如下:

void CListContainerElementUI::SetPos(RECT rc)
{	
	CContainedUI::SetPos(rc);
	if( m_pOwner == NULL ) return;		

	CListUI* pList = static_cast<CListUI*>(m_pOwner);
	if (pList == NULL) return;

	TListInfoUI* pInfo = pList->GetListInfo();	
	CListHeaderUI* pHeader = pList->GetHeader();
	int nNewCxPos = pList->GetScrollPos().cx;

	int nOffset = nNewCxPos - m_nOldCxPos;

	int nCount = m_items.GetSize();
	for (int i = 0; i < nCount; i++)
	{
		CControlUI *pListItem = static_cast<CControlUI*>(m_items[i]);

		CListHeaderItemUI *pHeaderItem = static_cast<CListHeaderItemUI*>(pHeader->GetItemAt(i));
		if (pListItem != NULL && pHeaderItem != NULL)
		{
			RECT rtHeader = pHeaderItem->GetPos();
			RECT rt = pListItem->GetPos();
			rt.left = rtHeader.left - nOffset;
			rt.right = rtHeader.right - nOffset;
			pListItem->SetPos(rt);
		}

	}

	m_nOldCxPos = nNewCxPos;
}

      这里获取了List的横向滚动条的滚动值,然后计算出偏移,为此我们需要为ListContainElementUI增加一个int 型的m_nOldCxPos变量来记录偏移值。这时就解决了第一个问题,子控件的位置可以随Header精确移动。


      但是,却会出现第二个问题,窗体最小化然后恢复后原本应该位移的子控件却恢复到初始位置。我调试后发现是Header的位置计算出现了问题,所以导致了这个问题。仔细看了List自带的各个成员变量,后来发现通过List的GetListInfo函数获取的TListInfoUI结构里面的RECT数组rcColumn可以获取到Header正确的数值,因为我们调用ListContainElementUI的SetPos时List还没有将错误的Header数值保存到rcColumn里面,所以修改SetPos代码如下:

void CListContainerElementUI::SetPos(RECT rc)
{	
	CContainerUI::SetPos(rc);
	if( m_pOwner == NULL ) return;		

	CListUI* pList = static_cast<CListUI*>(m_pOwner);
	if (pList == NULL) return;

	TListInfoUI* pInfo = pList->GetListInfo();	
	int nNewCxPos = pList->GetScrollPos().cx;

	int nExcursion = nNewCxPos - m_nOldCxPos;

	int nCount = m_items.GetSize();
	for (int i = 0; i < nCount; i++)
	{
		CControlUI *pListItem = static_cast<CControlUI*>(m_items[i]);

		if (pListItem != NULL )
		{
			RECT rt = pListItem->GetPos();
			rt.left = pInfo->rcColumn[i].left - nExcursion;
			rt.right = pInfo->rcColumn[i].right - nExcursion;
			pListItem->SetPos(rt);
		}
	}

	m_nOldCxPos = nNewCxPos;
}

        这时两个问题都解决了,但是同时导致了新的问题:当程序初始化后第一次显示界面,ListContainElementUI的子控件全部都是隐藏的。原因是我们这里使用了rcColumn来计算子控件的位置,而程序初始化时rcColumn里面的值都是0,所以导致了错误计算。所以需要加上判断,如果rcColumn里面的值为0则不计算位置,这样就好了。但是还有问题:初始化后ListContainElementUI的控件虽然都显示了,但是都重叠到一起了。导致这个问题的原因是ListContainElementUI虽然是容器,但是他继承的是CContainerUI容器,他没有自动排列子控件的功能。所以我这里让ListContainElementUI继承CHorizontalLayoutUI容器。这样还能方便我们以后编写对应的xml代码。

       给出最终的修改代码:

void CListContainerElementUI::SetPos(RECT rc)
{	
	CHorizontalLayoutUI::SetPos(rc);
	if( m_pOwner == NULL ) return;		

	CListUI* pList = static_cast<CListUI*>(m_pOwner);
	if (pList == NULL) return;

	TListInfoUI* pInfo = pList->GetListInfo();	
	int nNewCxPos = pList->GetScrollPos().cx;

	int nExcursion = nNewCxPos - m_nOldCxPos;

	int nCount = m_items.GetSize();
	for (int i = 0; i < nCount; i++)
	{
		CControlUI *pListItem = static_cast<CControlUI*>(m_items[i]);

		if (pListItem != NULL && pInfo->rcColumn[i].left != 0 && pInfo->rcColumn[i].right != 0)
		{
			RECT rt = pListItem->GetPos();
			rt.left = pInfo->rcColumn[i].left - nExcursion;
			rt.right = pInfo->rcColumn[i].right - nExcursion;
			pListItem->SetPos(rt);
		}
	}

	m_nOldCxPos = nNewCxPos;
}


    

总结:

      如果要修改ListContainElementUI的朋友可以根据我上面给出的代码修改,也可以直接下载我自己的Duilib库。

      我把我自己使用的Duilib和Uilib库都上传到了GitHub,完整的Duilib库代码下载地址:点击打开链接

      这是我自己使用的Duilib和Uilib库,修复了我在博客中说明的所有bug以及很多还没有去说明的bug,同样也包含别人修复过的bug。库里面包含我扩展过的部分控件。以及添加了Duilib扩展群群主heat的透明异形窗体功能的支持。
     这个库是我用vs2010修改的。如果你无法正常打开我的库或者编译有问题,那么建议把你需要的.h或者.cpp文件替换你自己的duilib库对应的文件。
     我修改过的代码,一般可以通过搜索“redrain”找到对应的位置和修改时间
     此库是我个人使用,由于我水平所限,所以不保证我修改的代码的质量。请你看过代码后再决定是否使用。使用这个库出现问题,不承担任何责任。


  Redrain  2014.10.30

目录
相关文章
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
11天前
|
索引 Python
List(列表)
List(列表)。
20 4
|
1月前
|
测试技术 开发者 Python
在 Python 中创建列表时,应该写 `[]` 还是 `list()`?
在 Python 中,创建列表有两种方法:使用方括号 `[]` 和调用 `list()` 函数。虽然两者都能创建空列表,但 `[]` 更简洁、高效。性能测试显示,`[]` 的创建速度比 `list()` 快约一倍。此外,`list()` 可以接受一个可迭代对象作为参数并将其转换为列表,而 `[]` 则需要逐一列举元素。综上,`[]` 适合创建空列表,`list()` 适合转换可迭代对象。
在 Python 中创建列表时,应该写 `[]` 还是 `list()`?
|
24天前
|
JavaScript 数据管理 虚拟化
ArkTS List组件基础:掌握列表渲染与动态数据管理
在HarmonyOS应用开发中,ArkTS的List组件是构建动态列表视图的核心。本文深入探讨了List组件的基础,包括数据展示、性能优化和用户交互,以及如何在实际开发中应用这些知识,提升开发效率和应用性能。通过定义数据源、渲染列表项和动态数据管理,结合虚拟化列表和条件渲染等技术,帮助开发者构建高效、响应式的用户界面。
160 2
|
1月前
|
NoSQL 关系型数据库 MySQL
Redis 列表(List)
10月更文挑战第16天
20 2
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
2月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
34 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)