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

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

 

 

 

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

还有lvtWaterfall瀑布流视图,

 

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

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

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

如下图所示:

 

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

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

而ListView在lvtWaterfall瀑布流模式下,

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

如下图所示:

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

就可以实现瀑布流效果。

 

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

先放一个ListView,

设置ListView.Properties.ViewType为vtWaterfall

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,Panel和Label,

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

最后,效果如下图所示:

 

 

 

 

ListBoxListView,以及ScrollBox都继承自ScrollControl,

ScrollControl是滚动控件的基类,

它有两个属性可以设置水平滚动条和垂直滚动条,

HorzScrollBarShowType:水平滚动条的显示类型,

VertScrollBarShowType:垂直滚动条的显示类型,

有如下选项:

sbstNone:不使用滚动条,禁止滑动

sbstHide:使用滚动条,但不显示,可以滑动

sbstsbstAlwaysCoverShow:使用滚动条且显示,可以滑动

 

 

在窗体上放一个ScrollControl,默认的滚动条设置如下图所示:

当前HorzScrollBarShowTypesbstAlwaysCoverShow,表示水平滚动条显示,

当前VertScrollBarShowTypesbstAlwaysCoverShow,表示垂直滚动条显示,

如下图所示:

 

 

ListBoxListViewTreeView等默认都是垂直滚动的,

所以水平滚动条显示类型HorzScrollBarShowType默认为sbstNone,

表示禁止水平滑动,没有水平滑动的功能,

如下图所示:

ListBox的垂直滚动条默认是需要的,

如下图所示:

VertScrollBarShowTypesbstAlwaysCoverShow:

 

 

如果想要ListBox禁止垂直滑动,

VertScrollBarShowType设置为sbstNone即可,

 

如果想要给ListBox加上水平滚动条,

那就把HorzScrollBarShowType设置为sbstAlwaysCoverShow即可,

 

 

 

 

 

在窗体上放一个SkinImageList,取名为imglistFileExt,

表示用来存放表示文件类型的图标,

在窗体上双击ImageList,就会弹出图片列表编辑器,

点击添加,把图片添加到列表中去,

再在窗体上放一个Image,取名为imgFileExtByImageIndex

展开Image.Properties.Picture,

默认ImageIndex为-1,SkinImageList为空,

接下来我们设置SkinImageList为imglistFileExt,

设置ImageIndex为0,

表示显示imglistFileExt中的第1张图片

如下图所示:

效果如下图所示:

如果要显示ImageList中的第二张图片

只需要把ImageIndex设置为1即可:

效果如下图所示:

 

 

 

 

 

 

 

 

ListBox的主要事件就是列表项点击事件OnClickItem(AItem:TSkinItem),

这个事件的参数AItem就是所点击的列表项,

TSkinItem是TSkinListBoxItem、TSkinListViewItem、TskinTreeViewItem的基类,

需要引用uSkinItems单元,

如下图的ListBox,我点击其中的列表项,弹出对话框显示列表项的标题Item.Caption,

在属性查看器串切换到事件页,双击OnClickItem右边的空白,

代码如下:

需要引用uSkinItems单元,

procedure TFrameListBox_UseItemDesignerPanel.lbSimpleClickItem(

AItem: TSkinItem);

begin

ShowMessage(AItem.Caption);

end;

 

运行时点击列表项看一下效果,

如下图,我点击了Documents这个列表项弹出对话框提示Documents:

 

接下来讲解一下ListBox使用设计面板ItemDesignerPanel时点击列表项的事件机制,

设计面板ItemDesignerPanel上面可以放很多子控件,用于设计列表项的显示样式,

通常情况下子控件的HitTest属性需要设置为False,表示此子控件仅用于显示,

不需要触发鼠标点击事件OnClick,

某些情况下ItemDesignerPanel上面需要放一些按钮(或复选框CheckBox等),

用于实现与点击列表项不同的功能,

那就要把按钮的HitTest设置为True,表示点击此按钮时响应按钮的OnClick事件,

而不再响应ListBox.OnClickItem事件,

当点击在按钮之外的地方时,才响应ListBox.OnClickItem事件,

 

举例说明一下:

我们在ItemDesignerPanel上面放一个按钮btnShowDetail,

点击此按钮时弹出对话框显示列表项的Detail,

如下图所示:

把btnShowDetail的HitTest属性设置为True,

表示点击它时响应它的OnClick事件,

而其他的Image和Label控件的HitTest设置为False,

再写btnShowDetail的OnClick事件,代码如下:

procedure TFrameListBox_UseItemDesignerPanel.btnShowDetailClick(Sender: TObject);

begin

ShowMessage(Self.lbSimple.Prop.InteractiveItem.Detail);

end;

 

在里面调用了ListBox.Prop.InteractiveItem这个属性,

表示当前点击按钮所在的列表项,

注意:

InteractiveItem仅在点击子控件触发的OnClick事件中有效,

 

运行点击btnShowDetail看一下效果: