如何设计适配高DPI（4K）的Delphi VCL应用UI？解决缩放异常

我之前在做VCL复杂UI的时候也踩过这个高DPI缩放的坑，尤其是手动计算组件尺寸和位置时，很容易出现1080p正常、4K下布局崩掉的情况。你的问题核心是手动像素计算没有和VCL的高DPI缩放机制对齐，导致逻辑像素和物理像素混用，最终边距异常、组件溢出。

为什么会出现这个问题？ #

当你开启TForm.Scaled = True时，VCL会根据系统DPI缩放窗体和组件：

• 组件的Left/Top/Width/Height存储的是逻辑像素（基于96DPI的设计尺寸）
• 窗体/面板的ClientWidth/ClientHeight是物理像素（屏幕上实际显示的像素数）

你的代码直接用物理像素（pnlFixExifTop.ClientWidth）减去硬编码的逻辑像素值（比如42、5、16），在高DPI环境下（比如4K 150%缩放），物理像素是逻辑像素的1.5倍，计算出来的尺寸自然就会偏差，导致边距变宽、右侧组件超出窗体。

正确的解决方法 #

1. 优先使用VCL内置布局控件，避免手动计算

这是最省心的方案，VCL的布局控件会自动处理高DPI缩放：

• 用TGridPanel：把面板分成2列，设置列宽比例为1:1，然后把左右栏的组件分别放到两列中，resize时自动均分空间
• 用TPanel + TSplitter：左侧面板Align=alLeft，右侧面板Align=alClient，中间放TSplitter，用户还可以手动调整栏宽，高DPI下完全适配
• 用Anchor属性：给编辑框设置akLeft/akRight锚定，按钮锚定在编辑框右侧，这样resize时组件会自动调整位置和宽度

2. 必须手动计算时，统一使用逻辑像素

如果一定要保留手动计算的逻辑，要把所有数值统一到逻辑像素体系：

procedure TForm1.pnlFixExifTopResize(Sender: TObject);
var
  LogicalClientWidth: Integer;
begin
  // 把物理ClientWidth转换为逻辑像素（基于96DPI）
  LogicalClientWidth := MulDiv(pnlFixExifTop.ClientWidth, 96, Screen.PixelsPerInch);
  
  // 所有计算都基于逻辑像素
  edtFixExifLeftFile.Width := Floor((LogicalClientWidth - (bbpFixExifBrowseLeft.Width * 2 + 42)) / 2);
  bbpFixExifBrowseLeft.Left := edtFixExifLeftFile.Left + edtFixExifLeftFile.Width + 5;
  edtFixExifRightFile.Left := bbpFixExifBrowseLeft.Left + bbpFixExifBrowseLeft.Width + 16;
  edtFixExifRightFile.Width := edtFixExifLeftFile.Width;
  bbpFixExifBrowseRight.Left := edtFixExifRightFile.Left + edtFixExifRightFile.Width + 5;
end;

MulDiv是VCL提供的安全整数缩放函数，避免浮点运算误差。这样不管是1080p（96DPI）还是4K（144DPI/192DPI），计算出来的尺寸都是基于设计时的逻辑像素，VCL会自动帮你缩放到屏幕上的物理像素，实现像素级对齐。

3. 开启项目的高DPI支持

确保你的项目已经正确配置高DPI感知：

• 打开Project Options -> Application -> Manifest
• 勾选Enable high-DPI scaling
• 选择Per-monitor DPI aware（Delphi 10.3+支持，适配多显示器不同DPI的场景）

4. 用Padding/Margins替代硬编码间距

不要直接写+5、+16这种硬编码数值，改用组件的Padding或Margins属性：

• 给edtFixExifLeftFile设置Padding.Right := 5
• 给bbpFixExifBrowseLeft设置Margins.Left := 16
  这些属性会自动跟随VCL的缩放机制调整，不用手动乘以缩放因子。

按照以上方法，你的双栏布局就能在1080p和4K环境下都实现像素级完美的UI了。

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