介绍 (Introduction)

如果您像我发现没有TListview时那样对FireMonkey感到沮丧，请举手。 我在几乎所有已编写的应用程序中都使用了TListView，并且我not going to compromise by resorting to TStringGrid.

By the 4th update to Delphi XE2 and FireMonkey, I was ready to give up but then I stumbled on a video created by Marco Cantù which introduced me a bit more to FireMonkey and the fact that all visual objects are derived from TLayout - and more importantly - are Styleable.  He showed how one can change the style of any object to make changes to the base object to make it appear different - like adding a picture to a TListBoxItem.

在Delphi XE2和FireMonkey的第4次更新中，我准备放弃了，但是后来我偶然发现了MarcoCantù创建的视频，它向我介绍了FireMonkey以及更多的视觉对象均来自TLayout的事实-更重要的是-很时尚。 他展示了如何更改任何对象的样式以对基础对象进行更改以使其看起来与众不同，例如将图片添加到TListBoxItem。

I am now going to impart some of this knowledge to you.

我现在要向您介绍一些此类知识。

TListView的替代 (TListView's replacement)

正如我已经提到的，TListView在FireMonkey中不作为可视组件存在-我们现在有了TListBox。 如果我们继续创建新的FireMonkey HD应用程序，则在窗体上添加一个TListBox，然后双击它，我们将打开Items Designer。 现在我们可以添加项目，您将看到Items属性是TListBoxItem的集合

Essentially, what we are going to do is change the Style of the ListBoxItem so that it includes a lot more than just one text field, and then when we add items to the listbox at run time, we're going to tell it to use our new style.

本质上，我们要做的是更改ListBoxItem的样式，以便它不仅包含一个文本字段，而且还包含许多其他内容，然后在运行时将项目添加到列表框中时，我们将告诉它使用我们的新风格。

样式样式 (Styling the Style)

在表单上使用可怕的模板时，右键单击放置的ListBoxItem，然后选择“编辑自定义样式...”

Automatically, a new TStyleBook object named StyleBook1 will be added to your project, and you will be taken to the Style Layout screen as shown below.

自动将一个名为StyleBook1的新TStyleBook对象添加到您的项目中，然后将您转到“样式布局”屏幕，如下所示。

You will notice that it has added two styles for you.  CheckBoxStyle and ListBoxItemstyle.  The reason you have two (even though you only selected one) is because CheckBoxStyle is a style used by ListBoxItem's check, so it related styles to your stylebook.  We're going to ignore the CheckBoxStyle for now (it won't ever get used), and concentrate on the ListBoxItemStyle.

您会注意到它为您添加了两种样式。 CheckBoxStyle和ListBoxItemstyle。 之所以拥有两个（即使您只选择了一个），是因为CheckBoxStyle是ListBoxItem的检查使用的样式，因此它将样式与样式簿相关联。 现在，我们将忽略CheckBoxStyle（将永远不会使用它），而将重点放在ListBoxItemStyle上。

If you expand ListBoxItemstyle, it will select it and show it you on screen, as well as show you the two children text: TText and check: TCheckBox.

如果展开ListBoxItemstyle，它将选择它并将其显示在屏幕上，并向您显示两个子文本：TText，并选中：TCheckBox。

Make the boundary of the ListBoxItemstyle a bit wider without changing the height.  You can do this easily by editing the Width property of the ListBoxItemstyle and making it say 300.  You now have a lot more space to work with.

在不更改高度的情况下，使ListBoxItemstyle的边界稍微宽一些。 您可以通过编辑ListBoxItemstyle的Width属性并将其设置为300来轻松地做到这一点。现在您有更多的空间可以使用。

I would leave the checkbox there (it's always useful to have).  By default, checkboxes are not disaplayed and you can turn them on by toggling a boolean property.  The first thing you want to do is to change the Alignment of the TText property so that it is alLeft.  You can now change the Width of it to be whatever size you want it to end up being.  For example, if I want what would have been the caption of the listitem to have a width of 100, I would set the width of the text: TText to be 100.

我将把复选框保留在那里（总是很有用）。 默认情况下，不会取消选中复选框，您可以通过切换布尔属性来打开它们。 您要做的第一件事是更改TText属性的Alignment，使其为alLeft。 现在，您可以将其宽度更改为最终希望的尺寸。 例如，如果我希望列表项的标题的宽度为100，则可以将文本的宽度：TText设置为100。

Now, what we do is we add more objects to the ListBoxitem.  Using the Tool Palette, drag and drop a new TText object onto ListBoxItemstyle, so that it becomes a child of this object.  The default height and width of a text box is 50 - and the default Alignment is alNone, so go ahead and just change the alignment to be alLeft.  Voilà!  it's now the same height as the bounding object, and has repositioned itself accordingly.

现在，我们要做的是将更多对象添加到ListBoxitem。 使用工具面板，将新的TText对象拖放到ListBoxItemstyle上，以使其成为该对象的子级。 文本框的默认高度和宽度为50-默认对齐方式为alNone，因此继续将对齐方式更改为alLeft。 瞧！ 现在它与边界对象的高度相同，并且已相应地重新定位了自身。

You'll notice that this text box seems to be a bit different than the original one.  Unfortunately, we can't copy and paste inside the style designer, so what we have to do is make this new TText have the same properties as the original TText.  We have to Uncheck "HitText", change HorzTextAlign to be taLeading and then change the Padding as follows - Bottom 1 - Left 3 - Right 3 - Top 1.  You'll probably want to experiment a bit with the Left and Right padding, to make it look better.  In the next screenshot I've used a right padding of 0, otherwise the gap between the original TText and the new one would be too great.

您会注意到，此文本框似乎与原始文本框有所不同。 不幸的是，我们不能在样式设计器中复制和粘贴，因此我们要做的就是使这个新的TText具有与原始TText相同的属性。 我们必须取消选中“ HitText”，将HorzTextAlign更改为taLeading，然后如下更改Padding-底部1-左侧3-右侧3-顶部1。您可能需要对左右填充进行一些实验，以使它看起来更好。 在下一个屏幕截图中，我使用了右填充0，否则原始TText与新TText之间的差距将太大。

Let's add one more TText with a width of 50, and then also add a TImage and TProgressBar for fun.  Remember, to add additional components, drag and drop them from your Tool Palette onto the ListBoxItemStyle: TLayout.  Each object I add I'm going to set the alignment to alLeft, with the exception of the progress bar - that I am going to make alClient.  I'm also goign to re-order it so that the original text is the left most of the 3 text items, the image is going to be even more left (this will become my Image), and the Progress Bar is going to be the right automatically because of it's alignment.  The image is going to have a width of 24 pixels (which is also the same as the height).  I am also going to increase the width of the component to 500 pixels.  This is the end result.

让我们再添加一个宽度为50的TText，然后再添加一个TImage和TProgressBar以获得乐趣。 记住，要添加其他组件，请将其从“工具面板”拖放到ListBoxItemStyle：TLayout上。 我添加的每个对象都将将对齐方式设置为alLeft，但进度条除外-我将创建alClient。 我也很想对它重新排序，以使原始文本在3个文本项的最左侧，图像将更左（这将成为我的图像），并且进度栏将是正确，因为它是对齐的。 图片的宽度将为24个像素（也与高度相同）。 我还将组件的宽度增加到500像素。 这是最终结果。

You can only change the position of the object you have selected. To select an object, click on the tree view on the right.

您只能更改所选对象的位置。 要选择一个对象，请单击右侧的树形视图。

As you can see, it's starting to look really good.  What's great about this is that you can add virtually any object to your TLayout.  You're also not limited to keep the height at 24 (default) - you can increase this to whatever you like!

如您所见，它开始看起来非常不错。 这样做的好处是，您几乎可以将任何对象添加到TLayout中。 您也不受限制将高度保持为24（默认值）-您可以将其增加到您喜欢的任何高度！

At this point, I'm satisfied that this style will satisfy name ListItem needs.  So, let's move on to the next part.

至此，我很满意此样式将满足名称ListItem的需求。 因此，让我们继续下一部分。

命名名称 (Naming the Names)

样式由样式名称引用。 这包括父样式（当前命名为ListBoxItemstyle）和所有子样式。 现在要做的就是选择父样式，并为其指定唯一的样式名称。 您可以通过编辑StyleName属性来实现。 我将呼叫我的LestersStyle。

Moving onto the children objects now - I'm going to call the "main" text style "Caption", and remove the "Text" from the Text property.   I'm going to name the other two text styles "SubItem1" and "SubItem2", the image style named "Icon" and finally, the ProgressBar to be "Progress".  I'm going to change the default check style to be "Check" for aethstetic reasons.  Having a StyleName for each object is important!  It is not necessary to change the Name property of any of these objects.  If you do decide to name them, remember to use names that will be unique.  This is what it looks like now in the Style Explorer.

现在移动到子对象上-我将把“主”文本样式称为“标题”，并从“文本”属性中删除“文本”。 我将命名其他两种文本样式“ SubItem1”和“ SubItem2”，将图像样式命名为“ Icon”，最后将ProgressBar命名为“ Progress”。 出于审美原因，我将默认检查样式更改为“检查”。 每个对象都有一个StyleName很重要！ 不必更改任何这些对象的Name属性。 如果确实要命名它们，请记住使用唯一的名称。 这就是现在在样式资源管理器中的外观。

Save this style by clicking "Apply and Close".

单击“应用并关闭”以保存此样式 。

We're done!  Now it's time to show you how to use this.

大功告成！ 现在是时候向您展示如何使用它。

编码 (Coding)

我将删除使用项设计器添加的ListBoxItem1，因为在应用程序运行时它应该为空白。 我还要将ListBox1的对齐方式更改为AlClient，以使其填满我的整个表单，最后，我要添加两个按钮-button1和button2。

Button 1 is going to be used to add a new "ListItem", and Button 2 is going to be used to Randomize the contents of all the "ListItems".  I'm doing Button 2 so that you know how to reference items which already exist.  Go ahead and double-click Button1 now so that you can code what it does on Click.  Further explanations are in the code for your reference.

按钮1将用于添加新的“ ListItem”，按钮2将用于随机化所有“ ListItems”的内容。 我正在执行Button 2，以便您知道如何引用已经存在的项目。 继续并立即双击Button1，以便您可以对Click上的功能进行编码。 进一步的解释在代码中供您参考。

NOTE: Some of you highly skilled programmers will notice that I can save a LOT of space and code in the following block, but I've deliberately done it like this so that people with lesser understanding can follow it easier.  Naturally, use whatever better methods of code you are familiar with.

注意：某些熟练的程序员会注意到，我可以在下面的块中节省很多空间和代码，但是我故意这样做，以使了解较少的人可以更轻松地进行操作。 自然地，使用您熟悉的任何更好的代码方法。

procedure TForm1.Button1Click(Sender: TObject);
Const{$IFDEF MSWINDOWS}BitmapFile : String = 'C:\Windows\Web\Wallpaper\Windows\img0.jpg';{$ELSE}BitmapFile : String = '/Applications/Safari.app/Contents/Resources/SnapshotPlaceholderCompass.png';{$ENDIF}
VarListBoxItem : TListBoxItem;ItemText    : TText;           // if you get an error here, ensure that FMX.Objects is included in your uses above.ItemImage   : TImage;ItemProgress: TProgressBar;
begin// First, we create an empty ListBoxItem with no parentListBoxItem := TListBoxItem.Create(nil);// now, we set a parent for this itemListBoxItem.Parent := ListBox1;// Associate the Style you created with the ListBoxItem - not the ListBox itself.ListBoxItem.StyleLookup := 'LestersStyle';// Next up, we're going to populate ItemText with the Caption of the Style using a style name lookup.ItemText := ListBoxItem.FindStyleResource('Caption') as TText;// We're going to set the text of the object to be whatever the caption should be.if Assigned(ItemText) then ItemText.Text := 'Hello World!';// Populating the two SubItemsItemText := ListBoxItem.FindStyleResource('SubItem1') as TText;if Assigned(ItemText) then ItemText.Text := 'SubItem1';ItemText := ListBoxItem.FindStyleResource('SubItem2') as TText;if Assigned(ItemText) then ItemText.Text := 'SubItem2';// Loading up the imageItemImage := ListBoxItem.FindStyleResource('Icon') as TImage;if Assigned(ItemImage) then If FileExists(BitmapFile) Then ItemImage.Bitmap.LoadFromFile(BitmapFile);// Populating the Progress BarItemProgress := ListBoxItem.FindStyleResource('Progress') as TProgressBar;if Assigned(ItemProgress) then ItemProgress.Value := Random(100);
end;

And this is what it looks like on Mac when we click Button 1.

这就是在Mac上单击“按钮1”时的样子。

Now, on to Button 2.

现在，转到按钮2。

procedure TForm1.Button2Click(Sender: TObject);
VarListBoxItem : TListBoxItem;ItemText    : TText;           // if you get an error here, ensure that FMX.Objects is included in your uses above.ItemProgress: TProgressBar;i : Integer;
beginif ListBox1.Items.Count > 0 then for i := 0 to Pred(ListBox1.Items.Count) dobeginListBoxItem := ListBox1.ItemByIndex(i);// Get and change the captionItemText := ListBoxItem.FindStyleResource('Caption') as TText;if Assigned(ItemText) then ItemText.Text := 'Hello World! '+ IntToStr(i);// Get and change the two SubitemsItemText := ListBoxItem.FindStyleResource('SubItem1') as TText;if Assigned(ItemText) then ItemText.Text := 'SubItem1 '+ IntToStr(i);ItemText := ListBoxItem.FindStyleResource('SubItem2') as TText;if Assigned(ItemText) then ItemText.Text := 'SubItem2 '+ IntToStr(i);// Get and change the Progress Bar.ItemProgress := ListBoxItem.FindStyleResource('Progress') as TProgressBar;if Assigned(ItemProgress) then ItemProgress.Value := Random(100);end;end;

And this is what it looks like on PC when we click "Button2".

这就是当我们单击“ Button2”时在PC上的样子。

标头在哪里？ (Where's the header?)

不幸的是，由于这不是真正的TListView-它不包含标题控件，但是幸运的是，我们可以添加其中一个！ 只需将THeader添加到您的主窗体中，添加一些Header，然后相应地调整大小即可。 为了使事情变得更加令人兴奋，我将把ListBox1的属性“ ShopwCheckBoxes”设置为“ True”。

Here is what the final product looks like - on both Windows and Mac.

这是最终产品的外观-在Windows和Mac上均如此。

观察结果 (Observations)

我在这里所做的所有事情都有“固定的列大小”-但这并不一定要保持这种状态。 可以在运行时动态创建样式，因此您不受最终拥有的列数的限制。 您还可以对列标题使用OnResize事件，以动态查找和调整样式中的列。 但是，“动态样式”不在本文的讨论范围之内，但是我可能最终会写一篇新文章来对此进行介绍。

进一步阅读 (Further Reading)

如果您有兴趣使用Delphi FireMonkey开发跨平台应用程序，我强烈建议您阅读MarcoCantù在FireMonkey上撰写的书。 目前正在撰写，很可能会在他的web site网站上刊登广告

I would also like to take this opportunity to thank Marco Cantù for being such a great help to the Borland/Inprise/Embarcadero chain of products with his vast knowledge.

我也想借此机会感谢MarcoCantù对Borland / Inprise / Embarcader的大力帮助 o具有丰富知识的产品链。

翻译自: https://www.experts-exchange.com/articles/10054/Implementing-a-ListView-in-Firemonkey.html