インターフェイスが配置されているディスプレイに応じて UI サイズを適応的に調整します
画面情報の取得
QDesktopWidget、QApplication::screens() などを使用して、画面の幅、高さ、DPI などの情報を取得します。詳細については、前の概要を参照してください。
インターフェース要素のサイズタイプを設定します
ウィンドウ、レイアウト、コントロールのサイズ タイプを次のように相対単位として設定する必要があります。
- ウィンドウのサイズポリシーを Qt::SizePolicy::Expanding に設定します。
- setBaseSize() + setSizeIncrement() を使用して、画面比率に応じてウィンドウ サイズを拡大します。
- レイアウトとコントロールのサイズを指定するには、ピクセルの代わりにパーセンテージを使用します。
- ハードコードされたピクセル値の代わりに em/pt のような相対単位を使用します
。例:
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);
DPIと画面比率に応じてインターフェース要素のサイズを調整します
Screens() に従ってすべての画面をトラバースし、各画面の DPI とアスペクト比に従ってウィンドウ、レイアウト、コントロールのサイズを調整できます。
例えば:
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, ...);
// ...
}
画面の変化に応じてインターフェースを動的に更新する
次のような画面変化の信号を監視する必要があります。
- 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);
}
つまり、画面情報に応じてインターフェイスのサイズを動的に調整するには、主に次のようなニーズがあります。
- 画面情報(DPI、アスペクト比など)を取得します。
- UI 要素のサイズを相対単位に設定する
- 画面情報に基づいてインターフェイス要素の基本サイズを計算して設定します
- 画面変更信号を監視し、インターフェースを動的に更新します
- 複数の画面がある場合は、画面ごとに上記の手順を実行する必要があります。
画面適応プロセスとさまざまなテクノロジの適用を理解することで、アプリケーションのデバイス間の互換性が向上し、ユーザーに優れた視覚エクスペリエンスを提供できます。インターフェイスのサイズを動的に調整することもレスポンシブ レイアウトの重要な内容の 1 つであり、現在の UI 開発者が習得すべき非常に便利なスキルです。
この概要が、画面適応の実装方法をさらに理解するのに役立つことを願っています。他に関連するご質問がございましたら、お気軽に下記までお問い合わせください! (編集済み)