[Qt] Adaptively adjust the ui size according to the display where the interface is located

Adaptively adjust the UI size according to the display where the interface is located

Get screen information

Use QDesktopWidget, QApplication::screens(), etc. to obtain information such as screen width, height, DPI, etc., see the previous overview for details.

Set the size type of the interface element

We need to set the size type of windows, layouts and controls as relative units, such as:

• Set the size policy of the window to Qt::SizePolicy::Expanding
• Use setBaseSize() + setSizeIncrement() to make the window size grow according to the screen ratio
• Use percentages instead of pixels to size layouts and controls
• Use relative units like em/pt instead of hard-coded pixel values
  ​​For example:

window->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding); 
window->setBaseSize(500, 400);
window->setSizeIncrement(0.2, 0.2); // 窗口大小每次增加20%

layout->setContentsMargins(20%, 10%, 10%, 10%);
label->setMinimumSize(3em, 1em);

Adjust the size of interface elements according to DPI and screen ratio

We can traverse all screens according to screens(), and adjust the window, layout and control size accordingly according to the DPI and aspect ratio of each screen.
For example:

QList<QScreen*> screens = QApplication::screens();
for (QScreen* screen : screens) {
    
    
    qreal dpi = screen->logicalDotsPerInch();
    qreal ratio = (qreal)screen->geometry().height() / screen->geometry().width();
    
    // 根据DPI和ratio调整窗口大小
    int baseWidth = 500 * dpi / 96;     // 96 is Qt's default logical DPI 
    int baseHeight = baseWidth * ratio;
    window->setBaseSize(baseWidth, baseHeight);
    
    // 根据DPI调整padding
    int padding = 20 * dpi / 96;
    layout->setContentsMargins(padding, ...);  
    
    // ...
}

Dynamically update the interface according to screen changes

We need to monitor the signal of screen change, such as:

- QDesktopWidget::screenCountChanged()
- QScreen::geometryChanged()
- QScreen::logicalDotsPerInchChanged()
并在相应的槽函数中重新根据当前屏幕信息调整界面大小。
例如:
cpp
void onScreenCountChanged() {
    
    
    // 获取当前屏幕信息,重新调整窗口大小
    // ...  
}

void onScreenGeomtryChanged(QScreen *screen) {
    
    
    // 获取screen的新信息,根据比例/DPI重新调整界面 
    // ... 
} 

// 连接信号槽   
connect(QApplication::desktop(), &QDesktopWidget::screenCountChanged, 
        this, &Window::onScreenCountChanged);
for (QScreen* screen : QApplication::screens()) {
    
    
    connect(screen, &QScreen::geometryChanged, 
            this, &Window::onScreenGeomtryChanged);  
} 

So, to sum up, in order to dynamically adjust the size of the interface according to the screen information, the main needs are:

1. Get screen information (DPI, aspect ratio, etc.)
2. Set UI element size to relative units
3. Calculate and set the basic size of interface elements based on screen information
4. Monitor the screen change signal and dynamically update the interface
5. If there are multiple screens, you need to perform the above steps for each screen.
   Understanding the screen adaptation process and the application of various technologies can make our applications have good cross-device compatibility and provide users with better vision. experience. Dynamically adjusting the size of the interface is also one of the important contents of responsive layout, and it is a very useful skill that current UI developers should master.
   Hope this overview helps you further understand how screen adaptation is implemented. If you have any other related questions, feel free to ask them below! (REDACTED)