首页 » 开源 » Duilib » 正文

Duilib使用虚表(VirtualList)机制加载海量数据

编辑:qdtroy 2021年2月25日 0评论 881浏览

Duilib使用虚表(VirtualList)机制加载海量数据

Duilib中的数据加载展示

Duilib库提供了多种适合数据展示的容器控件,如VerticalLayout、HorizontalLayout、TileLayout和List等等。在开发中,我们一般使用List来加载数据列表,List列表有以下几个优点:列表项创建灵活,支持列头展示,样式配置方便。有优点,对应着也有些确定,当加载数据过多时,List列表的滑动绘制效率非常低,甚至难以忍受。为了解决上面问题,所以很多人在项目中引入了虚表机制,用来加载显示海量数据。

虚表VirtualList的工作原理

列表在有限的可视区域内,我们只创建必要的ListElement控件,列表的滑动区域则是根据列表项数量和高度提前计算出来,这样我们在列表滑动过程中,只需要更新我们创建的必要控件的数据内容即可。本来有10W数据,可视区域只能展示100条数据,我们只需要创建100个列表项,这样在List的绘制和布局时节省了大量的时间,提高列表的绘制与布局速度。

虚表VirtualList的部分核心代码

//虚拟列表数据源接口class IVListDataSource{public:
	virtual int GetItemCount() = 0;
	virtual void SelectItem(CStdPtrArray& arraySelectIndexList) = 0;
	virtual void UnselectItem(CStdPtrArray& arraySelectIndexList) = 0;
	virtual void ExclusiveSelectItem(CStdPtrArray& arraySelectIndexList) = 0;
	virtual void SelectAllItems() = 0;
	virtual void UnselectAllItems() = 0;
	virtual bool IsItemSelect(int nIdex) = 0;
	virtual LPVOID GetItemDataByIndex(int nIndex) = 0;
	virtual CStdPtrArray& GetSelectIndexList() = 0;
	virtual void AddData(LPVOID lpData) = 0;
	virtual void RemoveDataAt(int nIndex) = 0;
	virtual void RemoveAllData() = 0;
	virtual bool SortItems(int(__cdecl *_PtFuncCompare)(void*, const void*, const void*), void* pArgs) = 0;};//虚拟列表变换器接口class IVListDataConverter{public:
	virtual void GetItemSize(int nIndex,LPSIZE lpSize) = 0;
	virtual CControlUI* CreateUIFromData(int nIndex,LPVOID lpData) = 0;
	virtual void UpdateUIFromData(int nIndex, LPVOID lpData, CControlUI* pControl) = 0;};

VirtualList列表需要实现如下接口:

	void SetDataSource(IVListDataSource* pDataSource);
	void SetDataConverter(IVListDataConverter* pDataConverter);
	void ReloadData();
	bool GetVisibleItemRange(int& nFirstIndex, int& nLastIndex, int& nFirtPos);
	void RefreshViewByVScroll();
	int  CalculateItemTopPos(int nFirstIndex, int nFirstPos, int nItemIndex);
	CControlUI* CreateNewItem(int nItemIndex,LPVOID lpData);

虚表VirtualList的最终效果展示

Duilib虚表例子
系列教程中学习用到的duilib版本均为Duilib_Ultimate
源码地址为:
1、https://github.com/qdtroy/DuiLib_Ultimate
2、https://gitee.com/qdtroy/Duilib_Ultimate

完整代码请联系Troy(QQ:656067418)
duilib开源项目交流圈(QQ群:261851826、261675375)

发表评论