瀑布流视图适用于每个列表项高度不同,却又要紧凑排列在一起的情况,

如淘宝、花瓣,如下图所示:

 

 

 

ListView.Properties.ViewType除了lvtIcon图标视图,lvtList列表视图,

还有lvtWaterfall瀑布流视图,

 

ListViewlvtIcon图标视图下,每个Item都是一个个水平排列的,

如果排列列表项时遇到宽度放不下了,那就会换一行,

并且换行时,Top取的是上一行最高的那个列表项的Bottom,

如下图所示:

 

 

ListViewlvtList列表模式下,ListView就是一个ListBox,

一行一个每个列表项,如下图所示:

 

ListViewlvtWaterfall瀑布流模式下,

每个列表项排列的时候,都需要判断上方是否有空的地方可以插入,

如下图所示:

 

因此,只需要将ListView.Properties.ViewType设置为lvtWaterfall,

就可以实现瀑布流效果。

 

下面以朋友圈的瀑布流为示例,

先放一个ListView,

设置ListView.Properties.ViewTypevtWaterfall

ListView.Properties.ItemHeight设置为200,

ListView.Properties.ItemWidth设置为140,

ListView.Properties.ItemSpace设置为10,

ListView.Properties.ColCount设置为2,表示每行显示2个列表项,

双击ListView,添加好三个Item,

需要的数据如下图所示:

把大图放在Item.Icon,

头像放在Item.Pic,

标题(如大家辛苦了)放在Item.Caption,

用户名(DelphiTeacher)放在Item.Detail,

图片分类(如郊游.风景)放在Item.Detail1

每个列表项的高度需要设置成不一样,

比如第一个列表项的高度为200,

第二个列表项的高度为150,

第三个列表项的高度为180,

如下图所示:

 

 

 

再在上面放一个ItemDesignerPanel,

设置给ListView.Properties.ItemDesignerPanel,

ItemDesignerPanel上放好Image,PanelLabel,

并做好绑定,如下图所示:

 

最后,效果如下图所示: