QT纯代码设计UI界面Demo

article/2025/10/3 0:58:42

一、前言

二、界面

三、源码简析

四、Demo/源码

一、前言

UI的设计方法有几种：

①一种是使用Qt Designer，也就是可视化设计，这在小型项目中常见，优点就是可观简便；

②另一种就是纯代码设计UI，也就是不可视设计UI，这在中大型项目常见，优点是界面隐蔽性强。

无论那种方式，实际上都是转化为第二种的方式，只是第一种是QT已经帮忙处理了，处理成第二种纯代码的形式。

本文简析纯代码设计UI的Demo，大家在项目中可以直接套用。

二、界面

界面设计很简便，两个label，两个button，button配槽函数，请配合源码看

三、源码简析

①源码结构

②工程里需要加入model

CUI.pro

QT       += core guigreaterThan(QT_MAJOR_VERSION, 4): QT += widgetsTARGET = CUITEMPLATE = appSOURCES += main.cpp \CUI.cppHEADERS += \CUI.h

③在main里显示CUI界面类

main.cpp

#include <QApplication>
#include "CUI.h"int main(int argc, char *argv[])
{QApplication a(argc, argv); //注意是QApplicationCUI ui;ui.show();return a.exec();
}

④界面类的设计：

CUI.h

#ifndef CUI_H
#define CUI_H#include <QWidget>class CUI : public QWidget
{Q_OBJECTclass Impl;
public:explicit CUI(QWidget *parent = 0);~CUI();private slots:void stClickedbutton1();void stClickedbutton2();private://使用智能指针处理界面的内容QScopedPointer<Impl>    m_Impl;
};#endif // CUI_H

CUI.cpp

#include "CUI.h"
#include <QPushButton>
#include <QLabel>
#include <QGridLayout>//定义界面类的键和函数
class CUI::Impl
{
public:QLabel*             label_1;QPushButton*        button_1;QLabel*             label_2;QPushButton*        button_2;void setupUi(QWidget* parent);void retranslate(QWidget* parent);void signalSlot(QWidget* parent);
};//初始化布局
void CUI::Impl::setupUi(QWidget *parent)
{label_1 = new QLabel;button_1 = new QPushButton;label_2 = new QLabel;button_2 = new QPushButton;QGridLayout* glayReview = new QGridLayout(parent);glayReview->setContentsMargins(10, 10, 10, 10);glayReview->addWidget(label_1, 0, 0, 1, 1);glayReview->addWidget(button_1, 0, 1, 1, 1);glayReview->addWidget(label_2, 1, 0, 1, 1);glayReview->addWidget(button_2, 1, 1, 1, 1);retranslate(parent);signalSlot(parent);
}//初始化名称size等
void CUI::Impl::retranslate(QWidget* parent)
{label_1->setText("label_1");button_1->setText("button_1");label_2->setText("label_2");button_2->setText("button_2");label_1->setMinimumWidth(150);button_1->setMinimumWidth(100);label_2->setMinimumWidth(150);button_2->setMinimumWidth(100);parent->setFixedSize(250,250);
}//初始化信号槽
void CUI::Impl::signalSlot(QWidget *parent)
{connect(button_1, SIGNAL(clicked()), parent, SLOT(stClickedbutton1()));connect(button_2, SIGNAL(clicked()), parent, SLOT(stClickedbutton2()));
}CUI::CUI(QWidget *parent) :QWidget(parent),m_Impl(new Impl)
{//设置UIm_Impl->setupUi(this);
}CUI::~CUI()
{
}void CUI::stClickedbutton1()
{m_Impl->label_1->setText("label_1_change");
}void CUI::stClickedbutton2()
{m_Impl->label_2->setText("label_2_change");
}