如果没有特殊的处理,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可能不同,可能相同。大概规则如下:
所以,如果想要获取一个图片对应当前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的尺寸为60x60QSize 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的概念,最初是来自于屏幕,引用网上一段话解释:
我们的主人公是乔帮主和比尔盖茨。此时乔帮主面前有一台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倍显示,图片不会变得模糊;依次类推。