在1.70以前的版本中，如果要实现下拉刷新面板，

需要拖一个PullLoadPanel在窗体上，

然后把它设置给ListBox.VertScrollBar.Prop.MinPullLoadPanel,

再在PullLoadPanel的OnExecuteLoad事件中写下拉刷新事件，

给用户造成很大的不便，

因此在1.70版本中，

加入了自动下拉刷新和上拉加载更多的功能，

原理还是使用PullLoadPanel,只不过放在控件中自动创建而已，

 

ListBox.Properties添加了如下属性:

EnableAutoPullDownRefreshPanel:表示启用自动下拉刷新面板的功能，

EnableAutoPullUpLoadMorePanel:表示启用自动上拉加载更多面板的功能，

PullDownRefreshPanel:自定义的下拉刷新的面板

PullUpLoadMorePanel:自定义的上拉加载更多的面板

 

ListBox.SelfOwnMaterial添加了如下属性:

PullDownRefreshPanelMaterial:自动下拉刷新面板的素材

PullUpLoadMorePanelMaterial:自动上拉加载更多面板的素材

 

ListBox添加了两个事件:

OnPullDownRefresh是下拉刷新事件，

OnPullUpLoadMore是上拉加载更多事件，

 

ListBox.Properties添加了如下方法:

StartPullDownRefresh:开始下拉刷新

StartPullUpLoadMore:开始上拉加载更多

StopPullDownRefresh:结束下拉刷新

StopPullUpLoadMore:结束上拉加载更多

 

 

接下来举例说明，

先准备如下ListBox,

选中该ListBox,然后在设计期用鼠标滚轮滚动，列表项会下移，

这是用来模拟在运行时手势下拉刷新的方法，

但此时并不会出现下拉刷新面板，

我们把EnableAutoPullDownRefreshPanel打上勾，

表示启用自动下拉刷新面板的功能，

如下图所示:

再选中该ListBox,然后在设计期用鼠标滚轮滚动，就会出现下拉刷新面板，

如下图所示:

在设计时下拉刷新面板会出现三秒，然后自动消失，

这个下拉刷新面板是根据ListBox.SelfOwnMaterial.PullDownRefreshPanelMaterial素材而自动创建的PullLoadPanel控件，

在PullDownRefreshPanelMaterial素材中:

LoadingCaption为下拉面板正在刷新时的标题，默认为”正在刷新”

DecidedLoadCapton为下拉面板拉到可以刷新时的标题，默认为”松开刷新”

UnDecideLoadCaption为下拉面板拉到还不可以刷新时的标题，默认为”下拉刷新”

DrawLoadingCaptionParam为绘制下拉面板标题的字体绘制参数，

LoadingPicture为滚动图片，

当指定一张图片时，会自动旋转这张图片来表示正在加载

当指定SkinImageList时，会循环播放ImageList中的所有图片来表示正在刷新，

IndicatorColor为自动创建的滚动图片的颜色，默认为黑色，

当LoadingPicture为空时，会使用IndicatorColor来创建十二张滚动图片

然后这十二张滚动图片组成一个SkinImageList赋给下拉面板上的Image,

在下拉刷新时循环播放这十二张图片表示正在刷新

 

目前我们只需要把所有属性保持默认即可，

然后运行看一下效果:

下拉一小段距离

下拉一大段距离

松开手指

接下来还需要在下拉刷新时从网络获取数据，

在OnPullDownRefresh事件中启动线程，

在线程中执行从网络获取数据，

在线程结束后把从网络获取到的数据加载到ListBox中，

 

 

先放一个线程任务事件组件TTimerTaskEvent,

在它的OnExecute中编写从网络获取数据,

代码如下:

procedure TFrameListBox_AutoPullDownRefresh.TimerTaskEvent1Execute(

Sender: TObject);

begin

//模拟从网络获取数据

Sleep(3000);

end;

注意:OnExecute事件在线程中运行，

因此不能在此事件中访问UI组件或设置UI组件。

如果取数据不放在线程中执行，会造成界面无响应

 

 

再在它的OnExecuteEnd中编写把从网络获取到的数据加载到ListBox中，

代码如下:

procedure TFrameListBox_AutoPullDownRefresh.TimerTaskEvent1ExecuteEnd(

Sender: TObject);

var

APicServerUrl:String;

AListBoxItem:TSkinListBoxItem;

begin

//把从网络获取到的数据加载到ListBox中

//加载

Self.lbMultiPic.Prop.Items.BeginUpdate;

try

//清空列表项

Self.lbMultiPic.Prop.Items.Clear(True);

 

//图片服务器链接地址

APicServerUrl:=’http://www.orangeui.cn/download/’

+’testdownloadpicturemanager/mobileposthumbpic/’;

 

 

//添加列表项

AListBoxItem:=Self.lbMultiPic.Prop.Items.Add;

AListBoxItem.Caption:=’阿尔代雪赤霞珠银标’;

AListBoxItem.Icon.Url:=APicServerUrl+’阿尔代雪赤霞珠银标.jpg’;

 

AListBoxItem:=Self.lbMultiPic.Prop.Items.Add;

AListBoxItem.Caption:=’阿尔岱雪丹娜斯’;

AListBoxItem.Icon.Url:=APicServerUrl+’阿尔岱雪丹娜斯.jpg’;

 

AListBoxItem:=Self.lbMultiPic.Prop.Items.Add;

AListBoxItem.Caption:=’安溪铁观音’;

AListBoxItem.Icon.Url:=APicServerUrl+’安溪铁观音.jpg’;

 

AListBoxItem:=Self.lbMultiPic.Prop.Items.Add;

AListBoxItem.Caption:=’娃哈哈茶咖’;

AListBoxItem.Icon.Url:=APicServerUrl+’娃哈哈茶咖.jpg’;

 

AListBoxItem:=Self.lbMultiPic.Prop.Items.Add;

AListBoxItem.Caption:=’娃哈哈猫缘咖啡’;

AListBoxItem.Icon.Url:=APicServerUrl+’娃哈哈猫缘咖啡.jpg’;

 

AListBoxItem:=Self.lbMultiPic.Prop.Items.Add;

AListBoxItem.Caption:=’人鱼恋带鱼系列’;

AListBoxItem.Icon.Url:=APicServerUrl+’人鱼恋带鱼系列.jpg’;

 

AListBoxItem:=Self.lbMultiPic.Prop.Items.Add;

AListBoxItem.Caption:=’食品套餐128元’;

AListBoxItem.Icon.Url:=APicServerUrl+’食品套餐128元.jpg’;

 

finally

Self.lbMultiPic.Prop.Items.EndUpdate();

//结束下拉刷新

Self.lbMultiPic.Prop.StopPullDownRefresh();

end;

end;

 

注意:在加载数据结束之后，需要调用StopPullDownRefresh方法结束下拉刷新，

StopPullDownRefresh方法有两个参数，

ALoadingStopCaption，表示此次下拉刷新是成功还是失败，默认值是”刷新成功!”,

AWaitHintTime，表示下拉刷新结束时提示”刷新成功!”结果多少时间，默认值是600毫秒，

以上参数保持默认即可。

 

再在ListBox.OnPullDownRefresh事件中，启动线程，

代码如下:

procedure TFrameListBox_AutoPullDownRefresh.lbMultiPicPullDownRefresh(

Sender: TTimerTask);

begin

//执行

TimerTaskEvent1.Run;

end;

 

 

我们运行看一下效果:

下拉一大段距离后松开

三秒之后，数据获取结束，加载到ListBox上，并结束刷新，