RAD Studio中File>New>Other界面区域B的组件及实现方法咨询

核心组件：自绘模式的TListView #

RAD Studio IDE的这个列表区域并非使用ScrollBox嵌套Panel/Frame的方案，官方是基于TListView的自绘（OwnerDraw）模式做的定制扩展——这种方式在性能和内存占用上远优于容器嵌套方案，尤其适合大量列表项的场景。

具体实现步骤（VCL环境） #

1. 基础属性配置

   • 将ViewStyle设为vsReport，清空Columns并设置ShowHeaders=False隐藏表头
   • 开启OwnerDraw=True和RowSelect=True，可选开启DoubleBuffered=True减少绘制闪烁

2. 自定义列表项数据结构
   每个列表项需要存储图标、标题、描述三个元素，通过ListItem的Data字段附加自定义数据：

   type
     TListItemData = record
       Icon: TIcon;
       Title: string;
       Description: string;
     end;
   
   // 添加示例项的代码
   var
     ListItem: TListItem;
     ItemData: ^TListItemData;
   begin
     ListItem := ListView1.Items.Add;
     New(ItemData);
     ItemData^.Icon := LoadIconFromResourceOrFile; // 替换为实际图标加载逻辑
     ItemData^.Title := 'VCL Forms Application';
     ItemData^.Description := 'Creates a new VCL application with a main form.';
     ListItem.Data := ItemData;
   end;
   

3. 处理自绘事件
   通过两个事件控制行高和内容绘制：

   • OnMeasureItem：设置行高以容纳图标和多行文本

     procedure TForm1.ListView1MeasureItem(Sender: TCustomListView; Item: TListItem;
       var Width, Height: Integer);
     begin
       Height := 60; // 根据实际内容调整高度
     end;
     

   • OnDrawItem：手动绘制图标、标题和描述，区分选中/普通状态

     procedure TForm1.ListView1DrawItem(Sender: TCustomListView; Item: TListItem;
       Rect: TRect; State: TOwnerDrawState);
     var
       ItemData: ^TListItemData;
       IconRect, TitleRect, DescRect: TRect;
     begin
       ItemData := Item.Data;
       if not Assigned(ItemData) then Exit;
     
       // 绘制背景
       if odSelected in State then
       begin
         Sender.Canvas.Brush.Color := clHighlight;
         Sender.Canvas.Font.Color := clHighlightText;
       end
       else
       begin
         Sender.Canvas.Brush.Color := clWindow;
         Sender.Canvas.Font.Color := clWindowText;
       end;
       Sender.Canvas.FillRect(Rect);
     
       // 绘制图标（垂直居中）
       IconRect := Rect;
       IconRect.Right := IconRect.Left + 48;
       IconRect.Top := IconRect.Top + (Rect.Bottom - Rect.Top - 48) div 2;
       IconRect.Bottom := IconRect.Top + 48;
       if Assigned(ItemData^.Icon) then
         Sender.Canvas.Draw(IconRect.Left, IconRect.Top, ItemData^.Icon);
     
       // 绘制标题（加粗）
       TitleRect := Rect;
       TitleRect.Left := IconRect.Right + 8;
       TitleRect.Bottom := TitleRect.Top + 20;
       Sender.Canvas.Font.Style := [fsBold];
       DrawText(Sender.Canvas.Handle, PChar(ItemData^.Title), -1, TitleRect, DT_LEFT or DT_VCENTER or DT_SINGLELINE);
     
       // 绘制描述（灰色普通字体）
       DescRect := Rect;
       DescRect.Left := IconRect.Right + 8;
       DescRect.Top := TitleRect.Bottom + 2;
       Sender.Canvas.Font.Style := [];
       Sender.Canvas.Font.Color := clGrayText;
       DrawText(Sender.Canvas.Handle, PChar(ItemData^.Description), -1, DescRect, DT_LEFT or DT_TOP or DT_WORDBREAK);
     end;
     

4. 资源清理
   在列表项删除时释放自定义数据和图标：

   procedure TForm1.ListView1Deletion(Sender: TObject; Item: TListItem);
   var
     ItemData: ^TListItemData;
   begin
     ItemData := Item.Data;
     if Assigned(ItemData) then
     begin
       ItemData^.Icon.Free;
       Dispose(ItemData);
     end;
   end;
   

FireMonkey环境替代方案：TCollectionView #

如果使用FireMonkey框架，官方推荐用TCollectionView——它原生支持自定义模板，无需手动自绘：

1. 拖放TCollectionView到窗体
2. 进入「Edit Custom Template」模式，添加TImage（图标）、两个TLabel（标题/描述）
3. 绑定数据源，将对应字段映射到模板控件的属性
4. 调整ItemSize控制列表项尺寸，完成布局

内容的提问来源于stack exchange，提问作者Yako