【qt】纯代码界面设计

置顶 已于 2024-09-04 19:43:03 修改
阅读量6.4k 收藏 88
点赞数 66
CC 4.0 BY-SA版权
分类专栏： 姚哥Qt 文章标签： qt 开发语言 c++ ui 学习 成长之路
于 2024-05-11 20:30:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_74047911/article/details/138682651

大家好,这里是国中之林!
❥前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。有兴趣的可以点点进去看看←

界面设计目录

一.界面设计的三种方式

1.使用界面设计器

开发效率最高，可以进行拖件即可。
但是有的界面效果实现不了。

2.纯代码界面设计

最为强大，可以灵活自如的操控
但是开发效率低

3.混合界面设计

前两种结合生下的孩子，你们的优点都到我这里了。

今天我们先来讲讲纯代码的方式。

二.纯代码进行界面设计

1.代码界面设计的总思路

  • 首先确定需要那些组件
  • 然后定义好组件
  • 初始化组件
  • 用布局将组件添加到窗口
  • 定义槽函数
  • 关联槽函数
  • 实现槽函数

2.创建项目

项目简单，选择对话框即可
在这里插入图片描述
因为纯代码，不需要ui文件，使用取消掉Generate form
在这里插入图片描述
其他都跟原来的一样。

3.设计草图

因为我们要知道我们需要那些组件，所以说一般我们会先设计一个草图，知道自己需要用那些组件。
在这里插入图片描述
从草图中，我们可以知道，我们需要复选框 单选框 文本框 按钮

4.添加组件指针

我们知道了自己需要的，现在就开始进行添加
首先需要加相应组件的头文件。
在dialog.h中

#include <QCheckBox>  //复选框
#include <QRadioButton>//单选框
#include <QPlainTextEdit>//纯文本编辑器
#include <QPushButton>//按钮

然后在private里面把组件添加成成员数据

private:
    QCheckBox*chkBoxBold; //粗体复选框
    QCheckBox*chkBoxUnderLine;//下划线
    QCheckBox*chkBoxItalic;//斜体
    
    QRadioButton*rBtnRed;//红色单选框
    QRadioButton*rBtnBlack;//黑色
    QRadioButton*rBtnGreen;//绿色
    
    QPlainTextEdit*txtEdit;//纯文本编辑器
    
    QPushButton*btnOK;//确定按钮
    QPushButton*btnCancel;//取消
    QPushButton*btnExit;//退出

这样就添加完成了，变量名要自己能看懂哦

5.初始化组件指针

可以直接在Dialog的构造函数中进行初始化，但是会显的代码杂乱无章。
因此我们可以统一定义一个接口来进行初始化。
在private里定义一个void initUI()的接口
在Dialog的构造函数进行调用。
在这里插入图片描述
然后现在在initUI函数里面做具体实现：
在dialog.cpp中

void Dialog::initUI()
{
    chkBoxBold=new QCheckBox;
    chkBoxItalic=new QCheckBox;
    chkBoxUnderLine=new QCheckBox;
    
    rBtnRed=new QRadioButton;
    rBtnBlack=new QRadioButton;
    rBtnGreen=new QRadioButton;
    
    txtEdit=new QPlainTextEdit;
    
    btnOK=new QPushButton;
    btnCancel=new QPushButton;
    btnExit=new QPushButton;
    
}

6.添加组件到窗口

其实添加组件到窗口有一个接口，就是setGenmetry（）
但是这样的进行添加的话，有两大缺点
首先，你需要设置具体的位置
其次，你如果对窗口进行拉升是不会自动适应的
因此我们要学会使用布局

①水平布局

可以先理解为，将在同一行的多个组件放在一起，就是在一个布局里。
水平布局的头文件

#include <QHBoxLayout>

创建一个水平布局，将同一行的组件添加到布局中

void Dialog::initUI()
{
    chkBoxBold=new QCheckBox;
    chkBoxItalic=new QCheckBox;
    chkBoxUnderLine=new QCheckBox;

    rBtnRed=new QRadioButton;
    rBtnBlack=new QRadioButton;
    rBtnGreen=new QRadioButton;

    txtEdit=new QPlainTextEdit;

    btnOK=new QPushButton;
    btnCancel=new QPushButton;
    btnExit=new QPushButton;

    QHBoxLayout *HLay1=new QHBoxLayout;
    HLay1->addWidget(chkBoxUnderLine);
    HLay1->addWidget(chkBoxItalic);
    HLay1->addWidget(chkBoxBold);

    QHBoxLayout *HLay2=new QHBoxLayout;
    HLay2->addWidget(rBtnBlack);
    HLay2->addWidget(rBtnRed);
    HLay2->addWidget(rBtnGreen);

    QHBoxLayout *HLay3=new QHBoxLayout;
    HLay3->addWidget(btnOK);
    HLay3->addWidget(btnCancel);
    HLay3->addWidget(btnExit);

}

addWidget的意思是添加组件的意思。
注意添加组件顺序是从左到右的。
这里就把组件都添加到水平布局上面了

②垂直布局

接下来开始垂直布局，就是将从上到下的布局或者组件添加到垂直的布局中。

QVBoxLayout*VLay=new QVBoxLayout;
    VLay->addLayout(HLay1);
    VLay->addLayout(HLay2);
    VLay->addWidget(txtEdit);
    VLay->addLayout(HLay3);

然后将垂直布局添加到对话窗口中就可以进行显示了

setLayout(VLay);

运行结果：
在这里插入图片描述

③细节点

效果图很明显没有对应的文字，不用慌，我们在初始化的时候配上文字。

void Dialog::initUI()
{
    chkBoxBold=new QCheckBox("粗体");
    chkBoxItalic=new QCheckBox("斜体");
    chkBoxUnderLine=new QCheckBox("下划线");

    rBtnRed=new QRadioButton("红色");
    rBtnBlack=new QRadioButton("黑色");
    rBtnGreen=new QRadioButton("绿色");

    txtEdit=new QPlainTextEdit;

    btnOK=new QPushButton("确定");
    btnCancel=new QPushButton("取消");
    btnExit=new QPushButton("退出");

    QHBoxLayout *HLay1=new QHBoxLayout;
    HLay1->addWidget(chkBoxUnderLine);
    HLay1->addWidget(chkBoxItalic);
    HLay1->addWidget(chkBoxBold);

    QHBoxLayout *HLay2=new QHBoxLayout;
    HLay2->addWidget(rBtnBlack);
    HLay2->addWidget(rBtnRed);
    HLay2->addWidget(rBtnGreen);

    QHBoxLayout *HLay3=new QHBoxLayout;
    HLay3->addWidget(btnOK);
    HLay3->addWidget(btnCancel);
    HLay3->addWidget(btnExit);

    QVBoxLayout*VLay=new QVBoxLayout;
    VLay->addLayout(HLay1);
    VLay->addLayout(HLay2);
    VLay->addWidget(txtEdit);
    VLay->addLayout(HLay3);

    setLayout(VLay);
}

运行结果：
在这里插入图片描述
布局的好处就是我可以拉大窗口，组件跟着变
在这里插入图片描述
如果水平某个地方你希望空着，不均匀分布。那可以在水平布局里面添加一个拉升器。
在按钮的水平布局里面第三个位置添加了一个拉升器。

QHBoxLayout *HLay3=new QHBoxLayout;
    HLay3->addWidget(btnOK);
    HLay3->addWidget(btnCancel);
    HLay3->addStretch();//添加拉升器
    HLay3->addWidget(btnExit);

运行效果：
在这里插入图片描述
是不是很神奇，哈哈哈！
还可以设置默认文本

txtEdit=new QPlainTextEdit;
txtEdit->setPlainText("给我点点关注，我也给你点点关注");

运行结果：
在这里插入图片描述
单选框也可以被默认选中。

rBtnBlack=new QRadioButton("黑色");
rBtnBlack->setChecked(true);//黑色默认被选中

运行结果：
在这里插入图片描述

OK，现在咱们的界面就设计好了，开始我们的功能具体实现了！

7.定义槽函数

public slots:
void onChkBoxBold(bool checked);
void onChkBoxUnderLine(bool checked);
void onChkBoxItalic(bool checked);
void setTxtColor();

因为复选框可以打开也可以关闭所以说，我们要接受一个bool值，来确定当前的状态。
对于单选框我们只能选一个，功能都是相同的，所以可以只用定义一个槽函数即可。
对于按钮，已经内置了可以用的槽函数，就不需要定义。

8.初始化信号槽

对信号槽的初始化，就是信号槽的关联。
我们也统一定义一个函数（initSignalSlots）去统一关联。

void Dialog::initSignalSlots()
{
    //关联复选框
    connect(chkBoxBold,SIGNAL(clicked(bool)),this,SLOT(onChkBoxBold(bool)));
    connect(chkBoxItalic,SIGNAL(clicked(bool)),this,SLOT(onChkBoxItalic(bool)));
    connect(chkBoxUnderLine,SIGNAL(clicked(bool)),this,SLOT(onChkBoxUnderLine(bool)));
    
    //关联单选框
    connect(rBtnRed,SIGNAL(clicked()),this,SLOT(setTxtColor()));
    connect(rBtnBlack,SIGNAL(clicked()),this,SLOT(setTxtColor()));
    connect(rBtnGreen,SIGNAL(clicked()),this,SLOT(setTxtColor()));
    
    //关联按钮
    connect(btnOK,SIGNAL(clicked()),this,SLOT(close()));
    connect(btnCancel,SIGNAL(clicked()),this,SLOT(close()));
    connect(btnExit,SIGNAL(clicked()),this,SLOT(close()));
}

记得要在dialog的构造函数中进行调用。

9.实现槽函数

ok,现在框架都搭好了，开始实现我们的槽函数了。
对于复选框我们要先拿到文本的字体，然后再继续修改，然后又设置回去。

#include <QPalette>
...
void Dialog::onChkBoxBold(bool checked)
{
    QFont font=txtEdit->font();//取出文本的字体
    font.setBold(checked);//根据checked来设置字体为粗体
    txtEdit->setFont(font);//将字体设回到文本中
}

void Dialog::onChkBoxUnderLine(bool checked)
{
    QFont font=txtEdit->font();
    font.setUnderline(checked);
    txtEdit->setFont(font);
}
void Dialog::onChkBoxItalic(bool checked)
{
    QFont font=txtEdit->font();
    font.setItalic(checked);
    txtEdit->setFont(font);
}
void Dialog::setTxtColor()
{
    QPalette palette=txtEdit->palette();//拿到文本的调色板

    //判断哪一个按钮被点击
    if(rBtnRed->isChecked())
    {
        palette.setColor(QPalette::Text,Qt::red);
    }
    else if(rBtnBlack->isChecked())
    {
        palette.setColor(QPalette::Text,Qt::black);
    }
    else if(rBtnGreen->isChecked())
    {
        palette.setColor(QPalette::Text,Qt::green);
    }
    //将调色板设回文本
    txtEdit->setPalette(palette);
}

颜色的实现思路差不多，先用palette取出调色板,然后设置，Text是对文本有效
记得有调色板要头文件哦！
运行结果：
在这里插入图片描述
完美呀，哈哈哈，终于完成了，你也试试看吧！

10.总结一下：

用纯代码来设计界面是，我们是要遵循一个逻辑循序的，这样你的代码就会条理清晰，且可维护性高。
其次就是组件和布局的应用也是界面设计的重点。

你看不到希望，只是因为你才刚刚开始，仅此而已，加油！在这里插入图片描述

qt界面设计
weixin_50260670的博客
10-08 6539
设计界面时大概可以分三步： 构造出需要的所有控件 通过布局管理器确定控件位置 通过样式表优化控件样式 1.布局管理器 1. QBoxLayout QHBoxLayout 水平布局 QVBoxLayout 垂直布局 1）setStretch 设置部件的拉伸系数 2）setSpacing 设置部件之间的距离 3
Qt纯代码设计UI实例分析
hw5230的博客
10-28 1077
Q_OBJECTprivate://UI 创建与初始化//初始化信号与槽的链接//Underline 的clicked(bool)信号的槽函数//Italic 的clicked(bool)信号的槽函数//Bold 的clicked(bool)信号的槽函数//设置字体颜色public:在 QWDlgManual 类的 private 部分，声明了界面上的各个组件的指针变量，这些界面组件都需要在 QWDlgManual 类的构造函数里创建并在窗体上布局。
【Qt界面个性化】大杀器——qss
Voidsky
05-12 4万+
自学qt一年多了，也捣鼓做了不少东西了，发现qt比mfc强大的地方就在与它的简洁和强大的qss。 如果学qt不知道qss那基本就和美观的界面无缘了。简单来说，qss就源于网页的css（语法也基本一样一样的）所以如果你之前懂一些css的知识，学qss那是非常快的。 css学习：http://www.w3school.com.cn/css/css_syntax.aspqss能做什么？1.可以换
Qt入门指南：快速上手GUI开发
最新发布
lim6ere的博客
06-23 722
本文介绍了Qt框架的基础知识与应用。Qt是一个跨平台的C++图形用户界面框架，主要用于桌面应用开发，支持Windows、Linux、Mac等系统，在嵌入式领域也有广泛应用。文章详细讲解了Qt Creator集成开发环境的特点与安装方法，包括其可视化界面设计器、调试工具等功能。通过分步演示，指导读者如何创建第一个Qt界面项目，并解析了自动生成的代码结构（main.cpp、widget.h/cpp、ui文件等）。最后展示了如何通过Qt Designer以拖拽方式设计GUI界面。文章适合Qt初学者快速了解开发流程
用Qt做个简易的数据分析界面
ordinary_brony的博客
01-02 4317
既然我们之前从用Qt学着做个界面中学到了最基本的GUI搭建方法，那就让我们结合研究生的数据分析日常，让我们来看看一个简单的数据分析界面应该怎么做。主要的分析步骤是根据数据酷客的案例的基础上加以改编，在这里这位佚名作者表示感谢。
qt 如何设计好布局和漂亮的界面。
热门推荐
花狗Fdog的博客
07-28 13万+
文章目录前言一.布局相关组件介绍（:sunny:）1.Layouts(布局):large_blue_circle:Vertical Layouts（垂直布局）:large_blue_circle:Horizontal Layouts（水平布局）:large_blue_circle:Grid Layouts（网络布局）:large_blue_circle:Form Layouts（窗体布局）2.Spacers(空间间隔器/弹簧)3.UI设计器工具栏:large_blue_circle:分割布局器二.Qt样..
QT界面设计
09-06
非常好的QT界面设计实例，便于做界面开发的参考与学习
qt用户界面设计
03-04
qt的界面设计相关，图形用户界面（Graphical User Interface）是指采用图形方式显示的计算机操作用户界面对比：早期的操作系统，如DOS，CUI(Command line User Interface)命令行模式的人机接口 组成部分：桌面、视窗、菜单、按钮、图标等 Qt是跨平台的C++应用程序和UI开发的框架 Qt4有超过500个类和9000多个函数，使用Qt可以迅速开发出期望的应用程序
QT的简要界面设计的一个实例
06-23
这是一个小的QT界面设计程序，作用设计QT的tab qwidget的参考，仅作为入门学习QT用。
Qt----UI界面设计
weixin_47268803的博客
11-18 4737
在新建工程中，我们需要将Generate form勾选上。在项目中，我们发现添加了一个.ui文件，我们以后可以在这个文件里进行UI界面的设计。在.pro文件中，我们也可以看到添加了一些东西。
Qt用户界面设计.pdf
05-28
QT用户界面开发，非常不错的QT开发文档，推荐给大家，更感谢作者的努力付出
基于QT的主界面设计
06-11
基于QT的主界面设计，风格类似于微信/QQ，底部的菜单栏设计
基于QT的界面框架
05-16
基于QT的界面框架QCanpool设计及应用.pptx，通过使用qcanpool做出来的软件，可以长成下图所示的样子，通过效果图也能看出，qcanpool适合于普通类的PC机软件，基于qtwidgets实现的。
qt 纯代码实现界面阴影效果 总结
07-30
qt 纯代码实现界面阴影效果，网上有不少别人的例子，但讲解不够明确。 本例本人亲试，每行均为必须，小朋友们可以少走弯路了
Qt纯代码实现UI界面
hdsHDS6的博客
01-17 2720
设置编辑框内容的字体样式，包括加粗、下划线、斜体、蓝色、红色、黑色。
QT界面纯代码与控件布局学习
08-06
总的来说，QT界面设计是QT开发的关键技能之一，无论是通过拖控件布局还是纯代码实现，都需要理解QT的控件体系、布局管理以及事件处理机制。通过学习和实践，开发者可以创建出高效、美观且易于使用的应用程序界面。
QT纯代码手搓界面转成ui文件界面（基于VS2022、QT5）
m0_65187639的博客
07-05 658
更改原代码继承关系，使得源代码HandInterface继承QtWidgetsApplication1，他们两者是父子关系，相当于使用新设计的ui界面调用原代码的HandInterfact功能。
qt纯代码设计登录界面
07-21
### 回答1： Qt是一个跨平台的应用程序开发框架，通过使用Qt，可以方便地进行图形界面的设计和开发。下面是一个使用纯代码设计登录界面的示例代码（基于Qt C++）： ```cpp #include <QtWidgets> int main(int argc, char *argv[]) { QApplication app(argc, argv); // 创建主窗口 QWidget *window = new QWidget; window->setWindowTitle("登录界面"); // 创建用户名和密码的文本框 QLineEdit *usernameLineEdit = new QLineEdit; QLineEdit *passwordLineEdit = new QLineEdit; passwordLineEdit->setEchoMode(QLineEdit::Password); // 创建登录按钮 QPushButton *loginButton = new QPushButton("登录"); // 创建布局管理器 QVBoxLayout *layout = new QVBoxLayout; layout->addWidget(new QLabel("用户名:")); layout->addWidget(usernameLineEdit); layout->addWidget(new QLabel("密码:")); layout->addWidget(passwordLineEdit); layout->addWidget(loginButton); window->setLayout(layout); // 连接登录按钮的点击事件 QObject::connect(loginButton, &QPushButton::clicked, [&]() { QString username = usernameLineEdit->text(); QString password = passwordLineEdit->text(); // TODO: 处理登录逻辑 }); // 显示窗口 window->show(); // 运行应用程序 return app.exec(); } ``` 上述示例代码使用Qt的组件类来创建用户界面元素，例如：`QLineEdit`用于创建文本框，`QPushButton`用于创建按钮。使用`QVBoxLayout`布局管理器来自动布局这些界面元素。 在点击登录按钮后，可以通过接收该按钮的点击事件来获取用户名和密码，并执行登录逻辑。 以上是使用纯代码设计登录界面的一个简单示例，可以根据实际需求进一步添加和修改界面元素。 ### 回答2： Qt纯代码设计登录界面可以使用QWidget作为登录界面的父窗口，具体实现如下： 1. 创建一个QWidget对象作为登录界面的主窗口，设置窗口大小和标题。 2. 在主窗口中使用QLineEdit控件添加用户名和密码输入框，并设置输入框的样式和大小。 3. 在主窗口中使用QPushButton控件添加登录和退出按钮，并设置按钮的样式和大小。 4. 连接登录按钮的clicked信号与槽函数，用于验证用户名和密码的正确性。 5. 如果用户名和密码正确，弹出登录成功的提示框；否则，弹出登录失败的提示框。 6. 连接退出按钮的clicked信号与槽函数，用于关闭登录界面。 7. 设置主窗口布局管理器，将所有控件添加到布局管理器中进行布局。 8. 设置主窗口的窗口模式为窗口模态，使得登录界面在打开状态下不能操作其他窗口。 9. 调用主窗口的show()函数展示登录界面。 下面是示例代码： ```cpp #include <QApplication> #include <QWidget> #include <QLineEdit> #include <QPushButton> #include <QMessageBox> #include <QVBoxLayout> class LoginWindow : public QWidget { public: LoginWindow(QWidget *parent = nullptr) : QWidget(parent) { // 设置窗口大小和标题 setFixedSize(300, 200); setWindowTitle("登录界面"); // 创建用户名和密码输入框 QLineEdit *usernameEdit = new QLineEdit; QLineEdit *passwordEdit = new QLineEdit; usernameEdit->setPlaceholderText("用户名"); passwordEdit->setPlaceholderText("密码"); usernameEdit->setFixedSize(200, 30); passwordEdit->setFixedSize(200, 30); passwordEdit->setEchoMode(QLineEdit::Password); // 创建登录和退出按钮 QPushButton *loginButton = new QPushButton("登录"); QPushButton *exitButton = new QPushButton("退出"); loginButton->setFixedSize(100, 30); exitButton->setFixedSize(100, 30); // 连接登录按钮的clicked信号与槽函数 connect(loginButton, &QPushButton::clicked, [=]() { QString username = usernameEdit->text(); QString password = passwordEdit->text(); // 验证用户名和密码的正确性 if (username == "admin" && password == "123456") { QMessageBox::information(this, "提示", "登录成功"); } else { QMessageBox::warning(this, "提示", "用户名或密码错误"); } }); // 连接退出按钮的clicked信号与槽函数 connect(exitButton, &QPushButton::clicked, [=]() { close(); }); // 设置布局管理器 QVBoxLayout *layout = new QVBoxLayout; layout->addWidget(usernameEdit); layout->addWidget(passwordEdit); layout->addWidget(loginButton); layout->addWidget(exitButton); setLayout(layout); // 设置窗口模态 setWindowModality(Qt::ApplicationModal); } }; int main(int argc, char *argv[]) { QApplication app(argc, argv); LoginWindow loginWindow; loginWindow.show(); return app.exec(); } ``` 以上是使用Qt纯代码设计登录界面的简单示例，登录界面中包含了用户名和密码的输入框，以及登录和退出按钮。用户在输入正确的用户名和密码后，弹出登录成功的提示框；否则，弹出登录失败的提示框。 ### 回答3： Qt是一个跨平台的C++应用程序开发框架，可以用于构建各种图形用户界面（GUI）应用程序。要使用纯代码设计Qt登录界面，我们可以按照以下步骤进行： 1. 首先，创建一个Qt应用程序项目并打开Qt Creator。 2. 在Qt Creator中，新建一个QWidget类作为登录界面的窗口。 3. 在窗口的头文件中包含必要的Qt库头文件，并声明所需的成员变量和槽函数。 4. 在窗口的源文件中，实现构造函数和析构函数，并初始化界面和成员变量。 5. 在构造函数中，创建布局管理器（如QVBoxLayout或QGridLayout）并将窗口的中心部分设置为该布局管理器。 6. 在布局管理器中，使用各种Qt控件（如QLabel、QLineEdit和QPushButton）来构建登录界面的各个组件。 7. 使用布局管理器的addLayout()和addWidget()方法将控件添加到布局中。 8. 在槽函数中处理登录按钮的点击事件，验证用户输入的用户名和密码，并根据验证结果执行相应的操作（如弹出提示框或打开主界面）。 9. 最后，将视觉样式（如字体、颜色和大小）应用于控件，并将布局管理器应用于窗口。 10. 编译和运行应用程序，即可看到纯代码设计的Qt登录界面。 需要注意的是，以上步骤只是大致的设计思路，具体的实现细节还需根据实际需要进行调整。此外，Qt还提供了丰富的控件和功能，可以根据项目需求进行定制和扩展。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值