【Qt】跨平台UI布局,以Windows + Android安卓为例

Qt适合跨平台开发,但跨平台时如何实现UI布局这种基础只是都鲜有人提及。当然也有可能是太基础,大家觉得没有提及的必要。

但总有学习Qt的新人被这一步难住,笔者愿意来介绍一下Qt平台下,如何同时为多平台布局UI,这里以同时兼容Windows应用和Android应用为例。

我们想要达到的效果很基础也很简单,就是在屏幕中央显示一行文字

  • 在Windows中显示Hello Windows
  • 在安卓中显示Hello Android

其中在Windows中,不管窗口大小如何变化, 文字始终保持在窗口中央

笔者分别用Qt Designer和纯代码实现一次

使用Qt Designer

使用Designer虽然直观,通过拖拽和配置就可以完成布局。但Designer也有一些明显的缺点,比如配置麻烦、相关文档少、不适合多人协作开发等,所以在比较大的开发团队中,少见使用Designer开发的。

想要深入学习Qt开发的朋友,还是要学会使用纯代码完成布局。

这里我们在介绍如何实现上述效果的同时,也为大家展示一下Designer配置麻烦的地方

直接拖放Label

打开mainwindow.ui,直接从左边拖一个Label到窗口中:

在Windows中,初始可以保持在中央(毕竟我们放在了中央),但如果改变窗口大小会发现文字是保持不动的。 在安卓中只能看到一点文字

效果如下图:

结合Horizontal Layout + Horizontal Spacer

我们结合Horizontal Layout,先拖入一个Horizontal Layout,再在Layout中增加Label,为了保持Label在屏幕中间,在Label两边各放一个Horizontal Spacer: 在Windows中,初始还是可以保持在屏幕中央,但调整窗口大小时,文字还是保持不动。 在Android中更是直接看不到文字了。

效果如下图:

那么这一步的作用是什么呢?

和直接拖入Label的效果虽然一样,但造成结果的原因不同。前者直接是固定了文字的位置,但后者是因为Horizontal Layout的宽度没有随着窗口大小改变造成的。

为了让Layout能够随着窗口改变大小,在Layout父Widget中点击鼠标右键,选择"布局"->"栅栏布局"

再次运行可以发现,此时不管是在Windows,还是在Android平台,文字可以保持在屏幕中央了。

在Windows平台,改变窗口大小,文字也会随之调整位置,始终保持在屏幕中央。

使用纯代码

利用纯代码实现就相对简单了。

如何改用纯代码方式布局

  1. 删除mainwindow.ui

  2. 编辑mainwindow.hmainwindow.cpp,删除其中ui相关

  3. 用代码添加UI布局

    cpp 复制代码
    #include "mainwindow.h"
    #include <QHBoxLayout>
    #include <QLabel>
    
    MainWindow::MainWindow(QWidget *parent)
    	: QMainWindow(parent)
    {
     	QWidget *container = new QWidget(); // 创建容器widget
    	this->setCentralWidget(container); // 将容器widget设置为mainwindow的central widget
    
    	QHBoxLayout *layout = new QHBoxLayout(container); //为容器wiget添加Horizontal Layout
    	QLabel *l = new QLabel("Hello World"); // 新建Label
    	layout->addStretch(); // 在Label左边添加Spacer
    	layout->addWidget(l); //将Label加入Layout中
    	layout->addStretch(); // 在Label右边添加Spacer
    }
    
    MainWindow::~MainWindow()
    {
    }

    也可以为container增加一些样式,比如将背景颜色设置为红色:container->setStyleSheet("background-color:red;");

效果如下:

为不同平台设置不同文字

Qt中有宏可以判断平台:

  • Q_OS_WIN:Windows
  • Q_OS_MACOS:macOS
  • Q_OS_LINUX:Linux
  • Q_OS_UNIX:UNIX(包括 Linux、macOS、FreeBSD、OpenBSD 等)
  • Q_OS_ANDROID:Android
  • Q_OS_IOS:iOS
  • Q_OS_WASM:WebAssembly
  • Q_OS_DARWIN:Darwin (包括 macOS 和 iOS)

对我们的想要达到的目的,在创建Label时判断平台,创建不同内容的Label:

cpp 复制代码
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    QWidget *container = new QWidget();
    container->setStyleSheet("background-color:red;");
    this->setCentralWidget(container);

    QHBoxLayout *layout = new QHBoxLayout(container);
#if defined(Q_OS_WIN)
    QLabel *l = new QLabel("Hello Windows");
#elif defined(Q_OS_ANDROID)
    QLabel *l = new QLabel("Hello Android");
#endif
    layout->addStretch();
    layout->addWidget(l);
    layout->addStretch();
}
相关推荐
coderlin_2 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
哈市雪花2 小时前
相机:以鼠标点为中心缩放(使用OpenGL+QT开发三维CAD)
qt·相机·opengl·cad·缩放·工业软件·渲染效果
2501_915918413 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
wen's4 小时前
React Native安卓刘海屏适配终极方案:仅需修改 AndroidManifest.xml!
android·xml·react native
编程乐学5 小时前
网络资源模板--基于Android Studio 实现的聊天App
android·android studio·大作业·移动端开发·安卓移动开发·聊天app
Tony小周5 小时前
实现一个点击输入框可以弹出的数字软键盘控件 qt 5.12
开发语言·数据库·qt
没有了遇见7 小时前
Android 通过 SO 库安全存储敏感数据,解决接口劫持问题
android
hsx6667 小时前
使用一个 RecyclerView 构建复杂多类型布局
android
hsx6667 小时前
利用 onMeasure、onLayout、onDraw 创建自定义 View
android
守城小轩7 小时前
Chromium 136 编译指南 - Android 篇:开发工具安装(三)
android·数据库·redis