Qt6 案例实战编程（二）代码化UI设计

最新推荐文章于 2024-05-17 06:29:17 发布
最新推荐文章于 2024-05-17 06:29:17 发布
阅读量327 收藏 1
点赞数
文章标签： ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wwzquanpin/article/details/131940607
版权

1）我们做这个project的意义是什么？

        这篇笔记可以作为笔记（一）的一个补充，笔记（一）主要使用可视化UI完成项目的建立，这篇笔记则是用纯代码的方式建立与之相类似的程序和功能。那么，此次训练的目的也是帮助初学者更好的理解Qt这个软件到底该怎么去学习和使用，从底层代码的角度去思考如何制作一个程序。

 2）第一个要关心的问题永远是软件的目的功能

        和本人在Qt6 案例实战编程（一）中所要实现的功能类似，还是可以写入文本，对文本的字体和颜色进行修改，并且可以进行确定、取消和退出操作。软件预期目标效果如下：

        

图2.1 软件预期目标效果图

        使用New File or Project对话框创建一个GUI项目，在向导中选择窗口基类为QDialog，但是不要勾选Generate from复选框，这样创建的项目里就没有窗口UI文件dialog.ui。

图2.2 创建项目时的具体操作 

3）头文件dialog.h的编写

        在头文件中，我们需要写入什么信息呢？当然，我们需要定义所需要的变量，并且对所要用到的函数进行声明。根据我们在预设计阶段所做的规划，我们发现我们总共需要三个Radio Button，三个Check Box Button，一个PlainTextEdit和三个PushButton，那么我们就对其下定义且命名：

private:
    QCheckBox   *chkBoxUnder;
    QCheckBox   *chkBoxItalic;
    QCheckBox   *chkBoxBold;

    QRadioButton    *radioBlack;
    QRadioButton    *radioRed;
    QRadioButton    *radioBlue;

    QPlainTextEdit  *txtEdit;

    QPushButton     *btnOK;
    QPushButton     *btnCancel;
    QPushButton     *btnClose;

         注意这里加了一个private的标志，说明这些指针都是为dialog所有的，并不能被其他文件或者函数直接调用。并且我们所需要的函数功能函数定义如下：

private slots:
    void do_chkBoxUnder(bool checked);  //Underline

    void do_chkBoxItalic(bool checked); //Italic

    void do_chkBoxBold(bool checked);   //Bold

    void do_setFontColor();             //设置文字颜色

        除此之外，手写代码编程的项目还需要自己手动加入ui和信号与槽的初始化，设定好void型函数分别为iniUI（）和iniSignalSlots（）：

void    iniUI();            //UI创建与初始化
void    iniSignalSlots();   //初始化信号与槽的链接

        那么我们总的头文件dialog.h就可以写成下面这样了：

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QCheckBox>    //注意这里还是要加入各个组件的头文件的
#include <QRadioButton>
#include <QPlainTextEdit>
#include <QPushButton>
//#include <QVBoxLayout>

class Dialog : public QDialog
{
    Q_OBJECT

private:
    QCheckBox   *chkBoxUnder;
    QCheckBox   *chkBoxItalic;
    QCheckBox   *chkBoxBold;

    QRadioButton    *radioBlack;
    QRadioButton    *radioRed;
    QRadioButton    *radioBlue;

    QPlainTextEdit  *txtEdit;

    QPushButton     *btnOK;
    QPushButton     *btnCancel;
    QPushButton     *btnClose;

    void    iniUI();            //UI创建与初始化
    void    iniSignalSlots();   //初始化信号与槽的链接

private slots:
    void do_chkBoxUnder(bool checked);  //Underline

    void do_chkBoxItalic(bool checked); //Italic

    void do_chkBoxBold(bool checked);   //Bold

    void do_setFontColor();             //设置文字颜色

public:
    Dialog(QWidget *parent = nullptr);
    ~Dialog();

};

#endif // DIALOG_H

4）源文件dialog.cpp的编写

        我们先对我们加入的组件指针进行一个设计吧，由于我们想使软件界面变得更美观，所以我们需要加入水平排列和垂直排列这两个头文件：

#include    <QHBoxLayout>
#include    <QVBoxLayout>

        那么后面我们一步一步来，不妨先编辑一下字体吧！在头文件dialog.h中我们只是定义了三个属于QCheckBox的指针，但是还未对其做规定，所以我们需要在初始化时对他们做相应的用法规定。此外，对其位置也同样需要做如下说明：

//创建 Underline, Italic, Bold三个CheckBox，并水平布局
    chkBoxUnder=new QCheckBox("Underline");
    chkBoxItalic=new QCheckBox("Italic");
    chkBoxBold=new QCheckBox("Bold");
    QHBoxLayout *HLay1=new QHBoxLayout();
    HLay1->addWidget(chkBoxUnder);
    HLay1->addWidget(chkBoxItalic);
    HLay1->addWidget(chkBoxBold);

        对于颜色选择板块初始化如下（其中默认黑色被选中）：

//创建 Black, Red, Blue三个RadioButton，并水平布局
    radioBlack=new QRadioButton("Black");
    radioBlack->setChecked(true);           //缺省被选中
    radioRed=new QRadioButton("Red");
    radioBlue=new QRadioButton("Blue");
    QHBoxLayout *HLay2=new QHBoxLayout;
    HLay2->addWidget(radioBlack);
    HLay2->addWidget(radioRed);
    HLay2->addWidget(radioBlue);

        对于确定，取消，退出三个按钮初始化如下：

//创建 确定, 取消, 退出 三个 PushButton, 并水平布局
    btnOK=new QPushButton("确定");
    btnCancel=new QPushButton("取消");
    btnClose=new QPushButton("退出");
    QHBoxLayout *HLay3=new QHBoxLayout;
    HLay3->addStretch();
    HLay3->addWidget(btnOK);
    HLay3->addWidget(btnCancel);
    HLay3->addStretch();
    HLay3->addWidget(btnClose);

        创建文本框，并对其初始化：

//创建 文本框,并设置初始字体
    txtEdit=new QPlainTextEdit;
    txtEdit->setPlainText("Hello world\n手工创建");
    QFont   font=txtEdit->font();   //获取字体
    font.setPointSize(20);          //修改字体大小为20
    txtEdit->setFont(font);         //设置字体

        最后对整个窗口进行一个垂直对齐的操作：

//创建 垂直布局，并设置为主布局
    //    VLay=new QVBoxLayout(this);
    QVBoxLayout *VLay=new QVBoxLayout(this);
    VLay->addLayout(HLay1);         //添加字体类型组
    VLay->addLayout(HLay2);         //添加字体颜色组
    VLay->addWidget(txtEdit);       //添加PlainTextEdit
    VLay->addLayout(HLay3);         //添加按键组
    setLayout(VLay);    //设置为窗口的主布局

        综上所述我们得到的对ui界面的初始化函数iniUI（）写为：

void Dialog::iniUI()
{
//创建 Underline, Italic, Bold三个CheckBox，并水平布局
    chkBoxUnder=new QCheckBox("Underline");
    chkBoxItalic=new QCheckBox("Italic");
    chkBoxBold=new QCheckBox("Bold");
    QHBoxLayout *HLay1=new QHBoxLayout();
    HLay1->addWidget(chkBoxUnder);
    HLay1->addWidget(chkBoxItalic);
    HLay1->addWidget(chkBoxBold);

//创建 Black, Red, Blue三个RadioButton，并水平布局
    radioBlack=new QRadioButton("Black");
    radioBlack->setChecked(true);           //缺省被选中
    radioRed=new QRadioButton("Red");
    radioBlue=new QRadioButton("Blue");
    QHBoxLayout *HLay2=new QHBoxLayout;
    HLay2->addWidget(radioBlack);
    HLay2->addWidget(radioRed);
    HLay2->addWidget(radioBlue);

//创建 确定, 取消, 退出 三个 PushButton, 并水平布局
    btnOK=new QPushButton("确定");
    btnCancel=new QPushButton("取消");
    btnClose=new QPushButton("退出");
    QHBoxLayout *HLay3=new QHBoxLayout;
    HLay3->addStretch();
    HLay3->addWidget(btnOK);
    HLay3->addWidget(btnCancel);
    HLay3->addStretch();
    HLay3->addWidget(btnClose);

//创建 文本框,并设置初始字体
    txtEdit=new QPlainTextEdit;
    txtEdit->setPlainText("Hello world\n手工创建");
    QFont   font=txtEdit->font();   //获取字体
    font.setPointSize(20);          //修改字体大小为20
    txtEdit->setFont(font);         //设置字体

//创建 垂直布局，并设置为主布局
    //    VLay=new QVBoxLayout(this);
    QVBoxLayout *VLay=new QVBoxLayout(this);
    VLay->addLayout(HLay1);         //添加字体类型组
    VLay->addLayout(HLay2);         //添加字体颜色组
    VLay->addWidget(txtEdit);       //添加PlainTextEdit
    VLay->addLayout(HLay3);         //添加按键组
    setLayout(VLay);    //设置为窗口的主布局
}

        下一步，对信号和槽进行初始化，建立相应的连接，不再赘述，代码如下：

void Dialog::iniSignalSlots()
{
//三个设置颜色的 QRadioButton
    connect(radioBlue,SIGNAL(clicked()),this,SLOT(do_setFontColor()));
    connect(radioRed,SIGNAL(clicked()),this,SLOT(do_setFontColor()));
    connect(radioBlack,SIGNAL(clicked()),this,SLOT(do_setFontColor()));

//三个设置字体的 QCheckBox
    connect(chkBoxUnder,SIGNAL(clicked(bool)),this,SLOT(do_chkBoxUnder(bool)));
    connect(chkBoxItalic,SIGNAL(clicked(bool)),this,SLOT(do_chkBoxItalic(bool)));
    connect(chkBoxBold,SIGNAL(clicked(bool)),this,SLOT(do_chkBoxBold(bool)));

//三个按钮与窗口的槽函数关联
    connect(btnOK,SIGNAL(clicked()),this,SLOT(accept()));
    connect(btnCancel,SIGNAL(clicked()),this,SLOT(reject()));
    connect(btnClose,SIGNAL(clicked()),this,SLOT(close()));
}

        剩下按钮组件的函数描写与第一篇笔记的一样，如下：

void Dialog::do_chkBoxUnder(bool checked)
{
    QFont   font=txtEdit->font();
    font.setUnderline(checked);
    txtEdit->setFont(font);
}

void Dialog::do_chkBoxItalic(bool checked)
{
    QFont   font=txtEdit->font();
    font.setItalic(checked);
    txtEdit->setFont(font);
}

void Dialog::do_chkBoxBold(bool checked)
{
    QFont   font=txtEdit->font();
    font.setBold(checked);
    txtEdit->setFont(font);
}

void Dialog::do_setFontColor()
{
    QPalette   plet=txtEdit->palette();
    if (radioBlue->isChecked())
        plet.setColor(QPalette::Text,Qt::blue);
    else if (radioRed->isChecked())
        plet.setColor(QPalette::Text,Qt::red);
    else if (radioBlack->isChecked())
        plet.setColor(QPalette::Text,Qt::black);
    else
        plet.setColor(QPalette::Text,Qt::black);

    txtEdit->setPalette(plet);
}

        当然啦~最后还需要再调用并且析构一下这个函数：

Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
{
    iniUI();            //界面创建与布局
    iniSignalSlots();   //信号与槽的关联
    setWindowTitle("手工创建UI");   //设置窗口标题
}

Dialog::~Dialog()
{
}

5）测试与实现

        最后我们按control+R或者F5来运行一下试试吧！测试一下各个按钮的功能是否正常~

图5.1 测试与实现 

wwzquanpin
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
QT学习教程经典的例子
08-04
比较简单的介绍QT编程，很经典，很实用一个简单的Hello World 例子。它只包含你建立和运行Qt 应用程 序所需要的最少的代码
Qt基础-UI美工实例教程文档
09-07
9. **Qt Designer**：这是一个可视化的UI设计工具，允许开发者拖放控件，预览界面布局，生成对应的UI代码。对于快速构建原型和简化开发流程非常有帮助。 10. **调试与测试**：最后，理解如何使用Qt的调试工具，如Qt...
【嵌入式Qt开发入门】使用 UI 设计器（mainwindow.ui）开发程序
cj_lsk的博客
06-29 1160
本文我们继续学习如何使用 Qt Designer 开发程序，Qt Designer 是属于 Qt Creator 的一个功能而已，大家不要搞混了。Qt Designer 也叫 UI 设计师或者 UI 设计器，这都是指的同一 个东西。下面简单介绍如何使用 UI 设计器开发程序，以连接信号与槽为例，简单的介绍这个开发流程。最后我们思考一下这种开发方式的好处以及不便之处。
Qt中多ui使用及简单布局实现交互界面_ubuntu20
最新发布
2401_85014013的博客
05-17 944
前一段时间，写了一篇关于Qt中C++代码搭配UI文件实现简单的交互界面的文章，当时是计划作为一个系列来写的，希望交流一下循序渐进的学习和使用Qt心得。前几天评论中有人催更了，所以这几天在下班后抽了点时间把这第二章整理好发出来，接下来请品鉴。这篇文章质量不符合计划预期，之后有时间的话会持续修改更新，敬请期待。
QT学习_06_UI设计
heqiunong的专栏
11-01 4667
双击这个.ui文件，就可以进入设计界面下面简单的介绍ui设计界面的各模块的作用和功能。
Qt纯代码设计UI实例分析
书写人生
07-21 850
UI 的可视化设计是对用户而言的，其实底层都是C++的代码实现，只是Qt巧妙地进行了处理，让用户省去了很多繁琐的界面设计工作。 由于界面设计的底层其实都是由 C++ 语言实现的，底层实现的功能比可视化设计更加强大和灵活。某些界面效果是可视化设计无法完成的，或者某些人习惯了用纯代码的方式来设计界面，就可以采用纯代码的方式设计界面，如 Qt 自带的实例基本都是用纯代码方式实现用户界面的。 所以，本节介绍一个用纯代码方式设计 UI 的实例，通过实例了解用纯代码设计 UI 的基本原理。与前面的可视化 UI ...
Qt子线程控制主界面UI控件
m0_73443478的博客
02-20 2182
Qt子线程控制主界面UI控件
QT学习教程PDF（《Qt Creator快速入门》；C++ GUI Qt4 编程（第二版） ；Qt及Qt+Quick开发实战精解）
02-19
书中的实战案例可能包括移动应用开发、桌面应用开发以及嵌入式系统的UI设计。 在学习这些教程时，你可以从以下几个方面入手： 1. **基础概念**：理解Qt框架的核心概念，如对象模型、信号与槽机制、MVC模式在Qt中的...
Qt Creator快速入门+实战精解+源代码
10-12
【Qt Creator快速入门+实战精解+源代码】是一套全面的Qt学习资源，适合初学者和有一定经验的开发者，旨在帮助用户迅速掌握Qt Creator这一强大的集成开发环境，并通过实战项目深化理解。Qt是一个跨平台的应用程序开发...
《Qt及Qt Quick开发实战精解》代码
07-23
《Qt及Qt Quick开发实战精解》是一本深入讲解Qt和Qt Quick开发的书籍，其提供的源码集合为读者提供了丰富的实践案例，帮助开发者更好地理解和掌握这两种强大的技术。Qt是一个跨平台的应用程序开发框架，广泛应用于...
Qt5开发实战第二版 光盘资料
04-15
《Qt5开发实战第二版》是...总之，《Qt5开发实战第二版》的光盘资料是学习Qt5不可或缺的辅助材料，它提供了丰富的实践案例，有助于读者巩固理论知识，提升动手能力，对于想要深入理解和应用Qt5的开发者来说，极具价值。
Qt 在UI界面通过键盘控制飞机上下左右移动
wang_chao118的博客
08-23 2404
通过Qt做一个UI界面控制飞机上下左右移动的小实验，通过按下WSAD四个键盘按键，实现飞机的移动，并且在飞机向上移动的状态时，添加飞机尾焰的视觉效果。本实验的主要思路是通过在GUI界面类Widget类中，重写keyPressEvent、keyReleaseEvent进行相关的判断操作，并且重写paintEvent，设定一个定时器，到设定的时间时，不断地调用update()函数进行图形界面的重绘。
最新QT从入门到实战（06 QPushButton创建_）
qq_44294428的博客
03-30 203
这个模块有吧，5.4版本以上是不是都装访了这个模块，你是不是可以直接使啊，对吧？它父类的父类中的一个函数，所以说呢，你既然继承下来这个一个函数也可以的，那答案是这个。一些内容，我们看一下刚才所所说的一个叫按钮叫q button啊，首先呢，在这个。，就是你想使这个类的话，你要包含一个叫Q，就是button的头文件。啊，那么udp也好，TC也好，你看它包含的q make。，这个模块就相当于你要自己知道有这个模块存在啊，有这么。，OK，你可以把这个模块加进去啊，那么现在我们用不到。啊，那么按钮呢，就是你。
QT开发 一个超简单的入门例子（详细）
Sun_tian的博客
02-16 2万+
实现功能：可以通过按钮打开本地图片，并显示在主界面上 如下： 步骤： 1.新建项目
Qt6入门教程 4：Qt Creator常用技巧
草上爬的博客
01-07 3488
在上一篇中，通过创建一个Qt项目，对Qt Creator已经有了比较直观的认识，本文将介绍它的一些常用技巧。Qt Creator启动后默认显示欢迎页面创建项目已经用过了，打开项目也很简单，就是打开一个已经存在的项目。项目历史记录非常有用，能快速打开最近使用过的项目。会话记录及管理不知道是干啥的，平时也用不到。Get Started、示例和教程一看就是些学习资料，不过都是英文的，搭配百度翻译自学效率更高哦。编译、运行及调试在上篇中已做介绍。
Qt概述
量子孤岛
09-27 384
1.1 什么是Qt Qt是一个跨平台的C++图形用户界面应用程序框架。它为应用程序开发者提供建立艺术级图形界面所需的所有功能。它是完全面向对象的，很容易扩展，并且允许真正的组件编程。 1.2 Qt的发展史 1991年 Qt最早由奇趣科技开发 1996年 进入商业领域，它也是目前流行的Linux桌面环境KDE的基础 2008年 奇趣科技被诺基亚公司收购，Qt称为诺基亚旗下的编程语言 20...
Ubuntu20 源码编译安装 QT6.0 教程【有详细图文，亲测可行】
余衫马的博客
10-17 3260
Ubuntu20 源码编译安装 QT6.0
Qt6 案例实战编程（一）UI可视化设计
wwzquanpin的博客
07-26 482
Qt实战案例（一）UI可视化设计 学习&&连载中 欢迎一起讨论！！
Qt学习之界面UI编程应用
热门推荐
wei375653972的博客
12-20 3万+
Qt作为c++的GUI编程框架，在Qt4时代，一直是传统的基于QtWidget的C++编程，而到了Qt5，为了适用当前的移动应用开发浪潮，Qt提供了，另一套界面框架QtQuick，它是基于QML语言（类似于js）的编程，就一个特点：快！。编码量大大减少。 这两套框架虽说用不同的语言开发，但底层还是C++。   基于QtQuick&amp;QML的界面开发主要从以下方面学习： QML中的可视...
如何掌握Qt的UI设计工具Qt Designer以及Qt的UI编程接口
05-14
要掌握Qt的UI设计工具Qt Designer和UI编程接口，可以按照以下步骤进行： 1. 学习Qt基础知识：Qt是一种跨平台的应用程序框架，可以在Windows、Linux等操作系统上运行。因此，要使用Qt Designer和UI编程接口，需要先学习Qt的基础知识，包括Qt的核心类库、信号与槽机制等。 2. 学习Qt Designer：Qt Designer是Qt官方提供的UI设计工具，可以方便地进行UI设计。学习Qt Designer可以通过官方文档、网上教程、视频教程等方式进行。 3. 学习Qt的UI编程接口：除了使用Qt Designer进行UI设计外，还需要学习Qt的UI编程接口，以便在程序中动态创建UI界面、添加事件响应等。学习Qt的UI编程接口可以通过官方文档、示例程序、书籍等途径进行。 4. 练习实战：掌握Qt的UI设计工具和UI编程接口需要不断地进行实践，可以通过编写小型的Qt程序、参与开源项目等方式来提高自己的技能。 总之，要掌握Qt的UI设计工具和UI编程接口，需要付出一定的时间和精力，多方面学习和实践，才能取得良好的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值