默认ListBoxItem只包含一个图片，也就是它的Icon属性，

列表项设计面板ItemDesignerPanel上也只有一个ItemIconBindingControl来绑定Image,

如果遇到一个列表项上需要显示多个图片，

就需要用到ListBox的动态绑定功能了,

先讲解一下ListBox和ItemDesignerPanel之前的联系，

OrangeUI中的ListBox是利用ItemDesignerPanel上面的所有控件来绘制的，

虽然在ListBox中可以显示多个列表项，

但是每个列表项是不会创建属于自己的ItemDesignerPanel的，

那样做不仅会消耗大量的内存，也会使程序卡成一逼。

因此ListBox使用公共的ItemDesignerPanel来绘制每个列表项。

 

再来讲解一下OnPrepareDrawItem这个事件，

在ListBox绘制一个列表项之前，先会调用OnPrepareDrawItem，

把这个列表项传给OnPrepareDrawItem事件，

用户可以在OnPrepareDrawItem事件中根据传入的列表项进行完全自定义的处理，

处理完之后，再使用ItemDesignerPanel来绘制这个列表项，

 

 

我先讲解一下常用的一种解决方式，

先创建一个窗体，上面个一个ListBox,

双击ListBox,预先创建好两个空白的列表项用于预览效果，

并且不需要给列表项设置任何属性，

ListBox的ItemHeight设置为100,

 

再在ListBox上放一个ItemDesignerPanel,

然后ItemDesignerPanel上放两个Image和两个Label,

Image命名为imgPic1和imgPic2，用于显示两张商品图片，

设置Image.SelfOwnMaterial.DrawPictureParam.IsAutoFit为True,

并且先给两个Image设置好图片便于预览效果，

 

Label命名为lblCaption1和lblCaption2,用于显示两个商品名称，

设置Label.SelfOwnMaterial.DrawCaptionParam.FontHorzAlign为Center,

再给两个Label设置好标题便于预览效果，

 

不需要给ItemDesignerPanel绑定任何控件，

效果如下:

 

定义一个商品对的类,类成员有两个商品名称，两张商品图片，代码如下:

type

//商品对

TGoodsPair=class(TObject)

public

//商品1名称

Caption1:String;

//商品2名称

Caption2:String;

//商品1图片

Pic1:TDrawPicture;

//商品2图片

Pic2:TDrawPicture;

public

constructor Create;

destructor Destroy;override;

end;

{ TGoodsPair }

 

constructor TGoodsPair.Create;

begin

Pic1:=TDrawPicture.Create;

Pic2:=TDrawPicture.Create;

end;

 

destructor TGoodsPair.Destroy;

begin

FreeAndNil(Pic1);

FreeAndNil(Pic2);

inherited;

end;

 

 

接下来，我们放个“点击加载”按钮，用于点击的时候加载列表项:

代码如下:

procedure TFrameListBox_BindingMultiPic.btnLoadClick(Sender: TObject);

var

I: Integer;

APicServerUrl:String;

AGoodsPair:TGoodsPair;

AListBoxItem:TSkinListBoxItem;

begin

//加载

Self.lbMultiPic.Prop.Items.BeginUpdate;

try

//释放之前的DataObject

for I := 0 to Self.lbMultiPic.Prop.Items.Count-1 do

begin

Self.lbMultiPic.Prop.Items[I].DataObject.Free;

end;

//清空列表项

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

 

//图片服务器链接地址

APicServerUrl:=’http://www.orangeui.cn/download/testdownloadpicturemanager/mobileposthumbpic/’;

 

 

//添加列表项

AGoodsPair:=TGoodsPair.Create;

AGoodsPair.Caption1:=’阿尔代雪赤霞珠银标’;

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

AGoodsPair.Caption2:=’阿尔岱雪丹娜斯’;

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

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

AListBoxItem.DataObject:=AGoodsPair;

 

 

//添加列表项

AGoodsPair:=TGoodsPair.Create;

AGoodsPair.Caption1:=’安溪铁观音’;

AGoodsPair.Pic1.Url:=APicServerUrl+’安溪铁观音.jpg’;

AGoodsPair.Caption2:=’西湖龙井’;

AGoodsPair.Pic2.Url:=APicServerUrl+’西湖龙井.jpg’;

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

AListBoxItem.DataObject:=AGoodsPair;

 

//添加列表项

AGoodsPair:=TGoodsPair.Create;

AGoodsPair.Caption1:=’安溪铁观音’;

AGoodsPair.Pic1.Url:=APicServerUrl+’安溪铁观音.jpg’;

AGoodsPair.Caption2:=’西湖龙井’;

AGoodsPair.Pic2.Url:=APicServerUrl+’西湖龙井.jpg’;

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

AListBoxItem.DataObject:=AGoodsPair;

 

//添加列表项

AGoodsPair:=TGoodsPair.Create;

AGoodsPair.Caption1:=’人鱼恋带鱼系列’;

AGoodsPair.Pic1.Url:=APicServerUrl+’人鱼恋带鱼系列.jpg’;

AGoodsPair.Caption2:=’食品套餐128元’;

AGoodsPair.Pic2.Url:=APicServerUrl+’食品套餐128元.jpg’;

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

AListBoxItem.DataObject:=AGoodsPair;

 

 

finally

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

end;

 

end;

 

 

上面代码的主要思路就是创建一个GoodsPair的对象，

给对象设置好商品名称和商品图片链接，

然后把对象放在列表项的DataObject中。

 

 

 

接下来我们运行看一下示例,点击加载按钮:

如上图所示，虽然列表项加载出来了，

但是列表项中的图片和标题没有显示对应的内容，

那是因为我们没有进行绑定，

所以ItemDesignerPanel上的Image和Label不知道显示什么内容，

动态绑定是在ListBox.OnPrepareDrawItem事件中处理，

 

重要的事件再声明一遍:

先讲解一下ListBox和ItemDesignerPanel之前的联系，

OrangeUI中的ListBox是利用ItemDesignerPanel上面的所有控件来绘制的，

虽然在ListBox中可以显示多个列表项，

但是每个列表项是不会创建属于自己的ItemDesignerPanel的，

那样做不仅会消耗大量的内存，也会使程序卡成一逼。

因此ListBox使用公共的ItemDesignerPanel来绘制每个列表项。

 

再来讲解一下OnPrepareDrawItem这个事件，

在ListBox绘制一个列表项之前，先会调用OnPrepareDrawItem，

把这个列表项传给OnPrepareDrawItem事件，

用户可以在OnPrepareDrawItem事件中根据传入的列表项进行完全自定义的处理，

处理完之后，再使用ItemDesignerPanel来绘制这个列表项，

 

好了，接下来我们完成动态绑定:

双击ListBox.OnPrepareDrawItem事件，

参数Item:TSkinItem就是绘时前所传入的列表项，

需要在单元中引用如下几个单元:

uDrawCanvas,

uSkinItems,

uDrawPicture,

uSkinListBoxType,

 

再写上如下代码:

procedure TFrameListBox_BindingMultiPic.lbMultiPicPrepareDrawItem(

Sender: TObject; Canvas: TDrawCanvas;

ItemDesignerPanel: TSkinFMXItemDesignerPanel; Item: TSkinItem;

ItemRect: TRect);

var

AGoodsPair:TGoodsPair;

begin

//取出设置在Item.DataObject中的GoodsPair对象

AGoodsPair:=TGoodsPair(Item.DataObject);

 

//把GoodsPair对象中的数据赋给ItemDesignerPanel上面的控件

Self.lblCaption1.Caption:=AGoodsPair.Caption1;

Self.imgPic1.Prop.Picture.RefDrawPicture:=AGoodsPair.Pic1;

Self.imgPic1.Prop.Picture.PictureDrawType:=TPictureDrawType.pdtRefDrawPicture;

 

Self.lblCaption2.Caption:=AGoodsPair.Caption2;

Self.imgPic2.Prop.Picture.RefDrawPicture:=AGoodsPair.Pic2;

Self.imgPic2.Prop.Picture.PictureDrawType:=TPictureDrawType.pdtRefDrawPicture;

 

end;

 

 

接下来再运行看一下示例:

看，每个列表项都显示对应的商品内容了