如何正确设计高 DPI 感知（4k 就绪）的 Delphi 应用程序 UI？答案

【问题标题】：How to correctly design a Delphi application UI that is High DPI aware (4k ready)?如何正确设计高 DPI 感知（4k 就绪）的 Delphi 应用程序 UI？
【发布时间】：2019-11-08 20:53:41
【问题描述】：

第一次，我在使用 delphi 创建“复杂”用户界面时遇到了一些问题。我使用 4K 显示器进行开发和测试，但存在一些缩放问题。

我的应用使用 2 列设计，想想源代码控制下的差异视图，其中您有一个左窗格和一个右窗格，它们以组件方式镜像自身，但这些组件的内容（文本）是不同的。

为了给你一个想法，我在表格调整大小上这样做：

edtFixExifLeftFile.Width := Floor((pnlFixExifTop.ClientWidth - (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;

这样两列都占用了 50% 的空间。这在高清环境（1080p）中使用时像素完美，但在 4K 环境中，缩放（我的TForm.Scaled = True）完全“吃掉”其中一个边距（我使用 8px 边距，缩放比预期多 9px）。这会使 4K 看起来不对（正确的 TEdit 会使 TForm 溢出一点）。

如何在高清和 4K 环境中创建像素完美的 UI？对我的组件调整大小进行编码的正确方法是什么？

我使用最新版本的 Delphi (10.3)，我不使用花哨的组件（仅“库存”VCL）。

【问题讨论】：

您必须考虑坐标中的 DPI 而您的代码不需要。
您可以使用 TGridPanel 将两列设置为 50% 宽度。
VCL 为 Dpi Changes 提供了两个事件 - OnBeforeMonitorDpiChanged，OnAfterMonitorDpiChanged。尽管 VCL 可以很好地扩展大多数东西，但我发现我通常需要在 OnAfterMonitorDpiChanged 事件中应用一些额外的东西。为了考虑 Dpi，我还使用 MulDiv 函数，例如 MuldDiv(5, Monitor.PixelsPerInch, 96) 而不是 5。了解这些函数。您还可以在 OnAfterMonitorDpiChange 中的 TButton 和 TEdit 之间同步高度。

标签： user-interface delphi highdpi

【解决方案1】：

在阅读了一篇好的tutorial by Žarko Gajić 之后，我结束了这样做：

Pad := MulDiv(8, Monitor.PixelsPerInch, 96);
grdpnlCover.Left := pnlCoverImage.Left + pnlCoverImage.Width + Pad;

其中 8 是未缩放的值，96 是表单设计时的 DPI。

【讨论】：