如何以图标模式在列表视图中显示图片？答案

【问题标题】：How to show pictures in listview in icons mode?如何以图标模式在列表视图中显示图片？
【发布时间】：2018-02-04 02:45:00
【问题描述】：

我使用 Delphi Tokyo 来创建 firemonkey 应用程序，我需要显示如下图所示的图片：

有没有办法编辑 TListView 使其看起来像这样？

【问题讨论】：

你看过东京附带的演示吗（在 C:\Users\Public\Documents\Embarcadero\Studio\19.0\Samples\Object Pascal\Multi-Device Samples\User Interface\ListView） ?
@KenWhite 我现在做了，但没有找到我需要的东西。我还尝试阅读有关 ListView 的所有文档，但也没有找到我需要的。
奇怪。我看到其中至少有两个，虽然他们不直接执行您的要求，但向您展示了如何自定义列表视图的外观以适应您的需求。例如，请参阅 ListViewCustomBottomDetail 或 ListViewAddThumbAndCaption。
对于图片中的内容，创建一个包含图像、文本等实例的控件或框架。在滚动框内使用 TFlowLayout，创建复合控件的实例并将它们添加到 TFlowLayout

标签： delphi firemonkey

【解决方案1】：

我通过在 VertScrollBox 组件中使用 TGridLayout 做了一个类似的项目...

步骤...

在表单中放置一个 VertScollBox
放置一个 GridLayout（在垂直滚动内） * 有时是滚动框不想因为宽度（或高度）而表现得正确网格...我通常会通过程序进行调整。
添加一个按钮（vertScroll 之外的任何位置）

添加项目的过程...

var
  pnl : TPanel;
begin
  pnl := TPanel.Create(self);
  pnl.text := 'hi there!';
  // here you should create and add images to panel. make sure the parent of each object is the pnl object.
  pnl.parent := GridLayout1;
end;

在调整大小、添加和删除项目时调用以下代码。

procedure TfrmMain.adjustViews;
var
  itemsPerRows: double;
  rows: double;
begin
  // for grid on vertical scroll  
  if GridLayout1.ControlsCount > 0 then begin
    itemsPerRows :=  trunc(GridLayout1.Width / GridLayout1.ItemHeight);
    rows   := GridLayout1.ControlsCount / itemsPerRows;
    GridLayout1.height := rows * GridLayout1.ItemWidth;
  end;


  // for grid on horizontal scroll
  if GridLayout2.ControlsCount > 0 then
    GridLayout2.Width := GridLayout2.ControlsCount * GridLayout2.ItemWidth;
end;

注释：

这篇文章是直接输入的，所以你有一个想法，但不是来自我的代码本身！

希望对你有帮助！

【讨论】：