关于Qt适配不同分辨率和缩放率时可能遇到的问题和解决方案-Toy模板网

这篇具有很好参考价值的文章主要介绍了关于Qt适配不同分辨率和缩放率时可能遇到的问题和解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

如果没有特殊的处理，Qt的UI窗口在不同的分辨率和缩放率下，其显示效果可能会出现问题，常见的有：

子控件堆叠，无法显示完整
窗口尺寸变大，超出屏幕的显示范围
控件变形，长宽比不合理
界面模糊
字体变大，控件尺寸却没有变化

有两种方式可以对UI界面进行良好的缩放：
Qt不做任何事情，由windows系统负责缩放
windows系统不做任何事情，由Qt负责进行缩放

1.解决方案：Windows适配

使用qt.conf，在资源qrc里添加，`:/qt/etc/qt.conf`, qt.conf文件内容为：

[Platforms][Platforms]
WindowsArguments = dpiawareness=0

这样的效果就是直接让windows来接管和控制缩放。它通过类似缩放图片这样的方式来实现界面缩放，好处是各种情况下界面都可以使用，而且子界面不至于变形，坏处是放大后界面会变得模糊。

2.解决方案：Qt适配（Qt5.6版本及以后）

如果只是想单纯地解决问题，而不想深入了解高DPI的相关原理，那么只需知道对应的操作即可。

想要Qt适配不同分辨率和缩放率，即可以在高DPI下正常显示，我们需要做如下的工作：

2.1 开启支持高DPI的属性

在Qt5.6以及后续的版本中，添加了对高DPI显示的支持，这个特性默认是关闭的，需要我们手动打开这个特性，注意以下代码必须在main函数中，实例化QApplication对象之前调用，否则是不会起效果的：

	QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling, true);
    QCoreApplication::setAttribute(Qt::AA_UseHighDpiPixmaps, true);
    QApplication::setHighDpiScaleFactorRoundingPolicy(
        Qt::HighDpiScaleFactorRoundingPolicy::PassThrough);

以上代码做了三件事情，分别是：

开启Qt对高DPI显示的支持
开启Qt对高分辨率版本pixmap（High resolution versions of pixmaps）的支持
设置对高DPI（也就是大于1的DPI值）值的四舍五入规则

第一个没什么好说的，打开这个开关，Qt才会启动对高DPI特性适配的功能

第二个在后续会解释相关概念和原理，本节会介绍如何使用这个特性。

第三个需要解释一下，当设置高DPI的时候，我们假设它的值为 originDPI，它是一个大于等于1的浮点数，常见取值有：1.0，1.25，1.5，1.75，2.0 等等，具体取决于操作系统中的设置。而Qt提供了一个机制，让我们决定是否采用这个原始值，也就是可以对原始值进行舍入的操作，实际使用的是舍入后的值，即实际应用的DPI值。

在网络上很多关于讲解Qt适配不同分辨率和缩放比的文章中，都会提到Qt仅支持整数倍的DPI值，这是错误的，因为它们没有修改对DPI的射入政策，使用的默认值为：Qt::HighDpiScaleFactorRoundingPolicy::Round，它会将小数点后大于等于 0.5 的部分取整，因此结果如下：

window下设置的缩放比	Qt实际应用的缩放比
100%	1x
125%	1x
150%	2x
175%	2x
200%	2x
225%	2x
250%	3x

而Qt::HighDpiScaleFactorRoundingPolicy::PassThrough这个策略，则不会对原始值做任何修改，他会直接使用，所以实际的缩放比和设置的缩放比是完全一样的。

2.2 图片对高DPI的支持

当UI被放大的时候，原本的图片会显得比较模糊，这是因为同一张的图片被显示到了更大的物理矩形框中导致的。

为了解决这个问题，我们需要开启Qt对高分辨率版本pixmap（High resolution versions of pixmaps）的支持，然后按照如下策略提供图片资源。

2.2.1 外部图片

QImageReader类负责读取图片资源，它提供了自动识别并读入高分辨率版本pixmap的功能。例如，我们在DPI为1.0时，需要一个20x20的图片，它的路径为 :/icons/basename.png 。当DPI为2时，这个图片实际显示的尺寸就会被拉伸为原来的两倍，显示就会变得模糊。为了解决这个问题，我们应该提供这个图片的高分辨率版本pixmap：

:/icons/basename.png
:/icons/basename@2x.png
:/icons/basename@3x.png
:/icons/basename@4x.png

其尺寸分别为：20x20,40x40,60x60,80x80。
QImageReader会根据当前的DPI设置，自动读取对应版本的pixmap，然后设置其devicePixelRatio属性为DPI值。例如，上面的代码，在DPI为1时，读取:/icons/basename.png图片，devicePixelRatio为1.0；当DPI为2时，读取:/icons/basename@2x.png，devicePixelRatio为2.0；依次类推。
这样，通过在不同DPI时应用不同的图片（事实上，在qt底层，会使用这些整数倍的图片进行缩放，获取当前dpi缩放率对应的高分辨率版本pixmap），就不会有图片模糊的情况发生。
qss中设置的图片支持这样的机制。

但要注意的是，如果使用的是QPixmap，则并非如此，它不会自动读取对应dpi的图片。
例如：

	QPixmap pix(":/icons/basename.png");

那么，在任何情况下，无论dpi的值是多少，它读取的都是:/icons/basename.png，而不是其他图片。
QIcon类型，查看文档，它是一个提供了可缩放图标的类型，也就是说QIcon没有size这个说法，要使用它时，先给定一个size将其转化为QPixmap，然后才能使用。
QIcon在构造时，会根据dpi自动读取对应的图片。假如我们提供了上面的四张图片，那么当dpi为1的时候，它仅读取1倍图；当dpi为1.25，1.5，1.75，2.0 时，它会读取1倍图，2倍图；当dpi大于2小于3时，会读取1倍图，2倍图，3倍图。也就是说，QIcon只读取它当前可能会用到的图，用不到的图不会读取。另外要注意：QIcon是根据图片名称来读取的，例如basename.png实际是3倍图，那么它仍然读取的是这个图。是根据名称而不是其他来读取图片的。
此时，可以使用 QIcon::availableSizes()来返回它读取的图片列表的尺寸，尺寸的顺序对应1倍图，2倍图，3倍图这样的顺序。
QIcon::pixmap() 函数，传入指定的size，返回一个pixmap。pixmap的尺寸和传入的size可能不同，可能相同。大概规则如下：

未开启Qt::AA_UseHighDpiPixmaps，当size小于QIcon::availableSizes()中的最大尺寸时，pixmap的大小为size；否则，pixmap的大小为QIcon::availableSizes()中的最大尺寸
开启了Qt::AA_UseHighDpiPixmaps,，此时这个函数会获取dpi的scale缩放系数，然后尝试获取 sizescale 尺寸的pixmap，是否允许的规则和上述类似，如果 sizescale 小于QIcon::availableSizes()中的最大尺寸时，pixmap的大小为 size*scale ，devicePixelRatio为scale；否则，pixmap的大小为QIcon::availableSizes()中的最大尺寸，devicePixelRatio则是一个未知的值。

所以，如果想要获取一个图片对应当前dpi的高分辨率版本pixmap，代码如下：


  	QCoreApplication::setAttribute(Qt::AA_UseHighDpiPixmaps, true); 

		const QString path = "C:\\Users\\mech-mind_xpp\\Desktop\\icon.png";
    QSize size(22, 22);
#if 1
    QIcon icon(path);  // 实际应存在1倍图，2倍图，3倍图
  	// size最好是一倍图的尺寸，或等比例缩小的尺寸，例如11x11；其他情况后果自负
    auto pxm = icon.pixmap(size); 
    ui->svg->setPixmap(pxm);
#else
    QPixmap pxm(path); //icon.png实际为三倍图或者其他N倍图
    qreal pixelRatio = qApp->devicePixelRatio();
    pxm = pxm.scaled(size * pixelRatio, Qt::IgnoreAspectRatio, Qt::SmoothTransformation);
    pxm.setDevicePixelRatio(pixelRatio);
    ui->svg->setPixmap(pxm);
#endif

2.2.2 自绘制图片

在UI中使用的图片，有些是自己通过代码绘制得来的，和从外部读取的图片一样，也会有模糊的问题。此时就必须通过一定的策略来让自己绘制的图片成为高分辨率版本pixmap。

其关键点如下：

图片的尺寸和DPI相关
QPixmap（或者其他图片类）设置 devicePixelRatio属性，值为DPI的值
由于图片的尺寸会随着DPI变化，因此实际绘制的细节中所使用的尺寸也都需要跟着DPI变化。由于DPI是一个浮点数，所以QPainter应该尽量使用那些参数为qreal的重载函数。

代码梗概如下：

QSize size（64，64）；
qreal dpi = window()->devicePixelRatioF();

QPixmap pix(size * dpi);
pix.setDevicePixelRatio(dpi);

QPainter painter(&pix);
... ...

事实上，自绘制的图片和从外部读取的图片，其要点是完全一样的。

2.2.3 另一种选择

以上是Qt提供的非常正规的办法，但缺点是每个图标都需要提供多张图片，会导致app的尺寸变得更大。一种比较偏门的办法是直接提供一张N倍图，例如3倍图或者4倍图。比如，当显示效果为20x20，那么我们可以提供一个尺寸为60x60的图片（3倍图），或者80x80的图片（4倍图）。这样，即使是在高DPI下，图片显示仍然是清晰的，这是因为将大尺寸的图片缩小后设置给了控件，因此避免了模糊的问题，同时资源文件的大小也不会变得太大，算是一种折中的办法。

接下来说明这种做法的具体操作细节：

2.2.3.1 qss使用border-image而不是image

假设现在有一个图标，我们的本意是想将它作为20x20的图标使用。但为了解决模糊的问题，现在给了一个3倍图，是60x60。此时如果使用qss设置图片，那么我们应该使用border-image而不是image，这是因为image默认并不会缩放图片，而是使用图片的原始尺寸，所以实际并不能表现为20x20的效果，而是60x60；而border-image则是会进行缩放填满控件范围，因此不需要担心尺寸问题，反而因为是大尺寸图片渲染到小尺寸，可以解决图片模糊的问题。

2.2.3.2 QLabel设置图片

还是上面的问题，QLabel默认的属性scaleContents是false，此时如果设置一个pixmap，QLabel会缩放自身的size来使用pixmap的尺寸。而为了解决模糊的问题，应该反过来：给QLabel设置尺寸，设置属性scaleContents为true，然后设置pixmap。

	label->setFixedSize(20,20);
	label->setScaledContents(true);
	label->setPixmap(QPixmap(":/icons/back.png")); // back.png的尺寸为60x60

但需要注意的是，此时不能将pixmap进行缩放操作，然后再设置给label，这样由于从大尺寸图片缩小为了小尺寸，就丢失了图片的细节，仍然不能解决图片模糊的问题：

	label->setFixedSize(20,20);
	label->setScaledContents(true);
  QPixmap pix = QPixmap(":/icons/back.png"); // back.png的尺寸为60x60
  pix = pix.scaled(QSize(20,20));	//错误，这样和直接给一个20x20的图片是一样的，仍然会模糊
	label->setPixmap(pix);

2.2.3.3 QPainter绘制图片

在代码中，有时候会使用QPainter绘制图片，这种操作也会导致图片模糊。还是上面的情况，由于QPainter的drawPixmap不会缩放图片，它使用的是pixmap的原始尺寸，所以绘制出来是60x60的大小；而如果提前将pixmap进行scale操作，和2.2.3.2中一样，图片仍然会模糊，此时我们应该按照**高分辨率版本pixmap **的逻辑来解决这个问题：
注意：pixmap的dpr最好和当前dpi的设置一致。否则，可能会出现图片变形的问题。

QPixmap pix(":/icons/back.png"); // back.png的尺寸为60x60
QSize size(20,20);
qreal pixelRatio = qApp->devicePixelRatio();
pix = pix.scaled(size * pixelRatio, Qt::IgnoreAspectRatio, Qt::SmoothTransformation);
pix.setDevicePixelRatio(pixelRatio);

QPainter painter;
painter.drawPixmap(...);

2.3 其他注意事项

QPainter中应该尽量使用qreal类型的重载函数。
这是因为，当dpi为1.25，1.5这样的值时，对应的尺寸也必须跟着scale倍数放大，如果参数是整数类型，那么可能会因为丢失小数部分而不能体现scale效果
如有必要，可以根据屏幕的尺寸，也就是分辨率，以及dpi的倍数，来调整window和dialog的大小
尽量不要给控件设置固定尺寸，而是通过QSizePolicy给定一个弹性的尺寸范围，然后使用layout自适应窗口尺寸的变化

2.3.1 高DPI下窗口尺寸超出屏幕范围

在100%的缩放率下，窗口的宽度为 width x height，那么在大于100的缩放率下，就会有 width * scale 大于屏幕分辨率宽度或者 height * scale 大于屏幕分辨率高度的情况。这种情况下，建议将 width 和 height 的值修改为当前屏幕支持的最大值，或者直接showMax或者ShowFullScreen 。
注意：上面说的屏幕支持的最大值为：screenSize.width() / dpi 。例如当前缩放率为200%，屏幕分辨率为1920x1080，那么此时如果窗口不想超出屏幕，那么支持的最大宽高为：960x540.
示例代码：

void showEvent(QShowEvent* event) override
{
  auto dlgSize = this->size();
  const qreal scale = window()->screen()->devicePixelRatio();
  const auto screenSize = window()->screen()->size();

  dlgSize = dlgSize * scale;
  qDebug() << "....scale" << scale;

  if (dlgSize.width() > screenSize.width() || dlgSize.height() >= screenSize.height()) {
    // setFixedWidth(screenSize.width() / scale);
    // setFixedHeight(screenSize.height() / scale);
    // showMaximized();
    showFullScreen();
  }

  QDialog::showEvent(event);
}

然而在很多情况下，窗口的尺寸并不能随意变化。例如某些窗口要维持一定的长宽比，否则就不好看；或者将高度或者宽度缩小后，由于其中的子控件设置了固定尺寸而导致子控件堆叠等等。
所以尽量不要设置固定尺寸，使用layout管理子控件，让窗口可以自适应size的变化，这是非常重要的。对于UI设计人员来讲，也应该尽量克制自己对细节的追求，尽量不要使用例如指定固定尺寸，严格指定控件位置等等，这种只适合静态布局的方法，而是要考虑到窗口尺寸变化时子控件跟随变化的合理性。

3.控件堆叠与Unable to set geometry问题

在实际中，会发生子控件堆叠，不能显示完全的问题，或者报警告：Unable to set geometry等。

发生这两种情况的根本原因就是：父窗口的尺寸不足以容纳全部子窗口，或者即使能容纳，子窗口之间也会非常拥挤，甚至发生堆叠，显示不完全。

解决这个问题的思路，大致分为两种：

动态设置window的尺寸，而不是设置固定尺寸
- 可以调用adjustSize()函数，让window自动按照内容调节大小
- 根据当前分辨率和缩放率，调整window的尺寸
使用QScrollArea管理子控件

为了让window拥有可以调节尺寸的能力，这就要求各个子控件的尺寸是可调节的（或者大多数子控件的尺寸是可调节的），因此控件的尺寸只要不要设置为固定尺寸，而是通过QSizePolicy设置为可调节的，这样当window窗口需要放大或者缩小时，layout才能适应这样的尺寸变化。

4. DPI基本概念

首先，我们了解两个概念：

Dots per inch (DPI)：每英寸点数
Device-independent pixel (DIPs)：独立于设备像素，设备自由像素

DPI这个概念，最早来自于文本印刷行业。在这个行业中，文本的大小使用一种叫做点（points)的概念作为单位来衡量，其中：

1 pt = 1 / 72 inch

也就是说，一个点是七十二分之一英寸大小，一英寸为72个点。

我们现在使用的字体中的大小，就叫做point size，就是从印刷行业继承下来的。例如一个12-point大小的字体，它的高度就是 12 / 72 = 1 / 6 英寸。

但当回到屏幕显示的时候，就出现了问题。我们知道，屏幕是以像素为单位的，但在不同的屏幕中，一个像素对应的实际物理宽度是不一样的，这取决于屏幕真实的物理尺寸和屏幕的分辨率。

所以，定义了一个新的单位来表示字体的大小，新单位就是：逻辑单元（logical units）。一个72 point大小的字体被定义为一个逻辑单元高。然后，再将逻辑单元转化为像素。在Windows的发展历史中，默认定义一个逻辑单元的大小为96像素。也就是说，此时一个 72 point大小的字体将被绘制为96个像素。一个12 point 大小的字体会被绘制成为 16 个像素。

此时，DPI的概念就从打印中转移到了屏幕显示中，虽然名字叫 dots per inch，但已经是屏幕显示中的概念了。默认的DPI为96，即每英寸96个像素。（一个逻辑单元为72 point，72 point在印刷中为一英寸）。

而操作系统中设置缩放率，其本质就是在修改DPI的值。如果用户将DPI修改为了144，那么72 point 大小的字体就会显示为144个像素高。标准DPI被设置为100%（96 DPI），125%（120 DPI），150（144 DPI），此外还有其他的设置。

这样，我们就明白了，为什么缩放率改变时，文本的大小会变。这是因为字体的point size没有变化，它的逻辑单元也不会变化，但一个逻辑单元对应的像素发生了变化，最后显示的像素高度就发生了变化。

5.Qt对高DPI的支持

本节内容是对Qt文档《High DPI Displays》的概述。

有两种方式可以对UI界面进行缩放：

Qt不做任何事情，由windows系统负责缩放
windows系统不做任何事情，由Qt负责进行缩放

第一种方法是通过设置相关的环境变量实现的，此时windows会按照缩放图片的方式缩放整个界面，因为无论是文字还是UI，都会同时放大缩小。好处是程序是可用的，坏处是界面必然会模糊。

第二种方法则由Qt来负责缩放，其思路是：为了支持高DPI, Qt会自动缩放字体，并提供一个DPI值，应用程序代码可以使用它来缩放其余的UI。

第二种情况下，所需的内容，已在第一节中说明。

6.Pixmap中的devicePixelRatio

dpr的概念，最初是来自于屏幕，引用网上一段话解释：文章来源地址https://www.toymoban.com/news/detail-751309.html

	我们的主人公是乔帮主和比尔盖茨。此时乔帮主面前有一台mac，屏幕的分辨率是1280*720，这就是物理分辨率。乔帮主对比尔盖茨说，给我的mac开发一个word软件吧。盖茨说OK，于是写了一个软件，这个软件显示的时候长度是1280像素，宽度是720像素，正好能够盖满整个mac屏幕。乔帮主看了之后很满意。

	有一天，乔帮主看自己的mac屏幕觉得很粗糙，一点都不清晰锐利。于是聪明的乔帮主想到，同样是15寸的屏幕，我把像素点翻倍，不就可以更清晰了吗？于是他把mac的物理分辨率改成了2560*1440的分辨率，相当于每个像素点的尺寸减少了4倍（保持原来每个像素占据的面积不变，放了4个像素，这每个像素占据的面积是原来像素占据面积的1/4），这下再也看不出颗粒感了，乔帮主很满意。但是，当乔帮主打开盖茨给他写的word的时候，傻眼了，原本全屏的word现在只占屏幕的四分之一，而且文字非常的小。乔帮主打电话给盖茨说，你的软件怎么出问题了？盖茨回答说，我开发的时候你的mac分辨率就是1280*720，你自己改了硬件尺寸怪我咯，我很忙没空给你改软件代码，你就凑合着用吧。乔帮主稍作思考，马上想出了一个非常聪明的主意！他在软件和硬件之间的系统层加了一层逻辑分辨率。虽然屏幕横向有2560个像素点，但是告诉软件我只有1280个像素点！当word的宽度要占1280个像素的时候，实际上已经占了2560个像素。于是我们的word又占满屏幕了！于是乔帮主把这个机智的想法命名为逻辑分辨率，不管我显示器的硬件有多少个像素点，我只会告诉软件我的逻辑分辨率，这样软件的代码就不用修改也能在不同的屏幕上显示效果一致。在多年后，mac的物理分辨率已经达到了5120 x 2880，但是告诉软件的时候还是说我的分辨率1280*720，相当在盖茨看来的一个逻辑像素点，背后实际上已经有16个物理像素点为其工作了！

而pixmap的dpr概念与之类似，表示的是pixmap的size和想要绘制的设备无关像素之间的比例。例如，一个200x200大小的pixmap，如果它的dpr为2，那么表示它将会被绘制到100x100的设备无关像素矩形内。

我们引用QPainter文档中的《Drawing High Resolution Versions of Pixmaps and Images》一节：

	所谓pixmap的高分辨率版本，指的是device pixel ratio的值大于1的pixmap。当pixmap的dpr和底层的QPinterDevice的ptr一致时，pixmap无需转化，就可以直接绘制到相关设备上。
	例如，一张64x64大小的图片，dpr为2，当他绘制在一个高DPI而且dpr也正好为2的屏幕上时，最后实际绘制出来的时一个32x32像素大小的内容。当Qt中的代码根据pixmap的size来计算布局的尺寸时，会使用图片的dpr得到真实有效的尺寸。这导致pixmap会按照给分辨率版本的形式显示（32x32,但由于将图片提前进行了缩放，显示后的图片不会变得模糊），而不是显示为一个大的图片（64x64）。

简言之，如果想要最终显示为32x32像素大小，那么在dpi为1时，需要提供32x32的图片；dpi为2时，提供32x32的两倍大小的图片，图片的dpr需要设置为2，这样图片会先缩小2倍在放大2倍显示，图片不会变得模糊；依次类推。

到了这里，关于关于Qt适配不同分辨率和缩放率时可能遇到的问题和解决方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

关于Qt适配不同分辨率和缩放率时可能遇到的问题和解决方案