OrangeUI

 
在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上，并结束刷新，