嵌入式 QT纯代码设计UI

news2024/11/18 14:39:24
   

目录

1.1 实例功能

1.2 界面创建

1.3 界面组件的创建与布局

1.4 信号与槽的关联


UI 的可视化设计是对用户而言的,其实底层都是 C++ 的代码实现,只是 Qt 巧妙地进行了处理,让用户 省去了很多繁琐的界面设计工作。
  由于界面设计的底层其实都是由 C++ 语言实现的,底层实现的功能比可视化设计更加强大和灵活。某些界面 效果是可视化设计无法完成的,或者某些人习惯了用纯代码的方式来设计界面,就可以采用纯代码的方式设计界 面,如 Qt 自带的实例基本都是用纯代码方式实现用户界面的。
所以,本节介绍一个用纯代码方式设计 UI 的实例,通过实例了解用纯代码设计 UI 的基本原理。与前面的 可视化 UI 设计相对应,且称之为代码化 UI 设计。

1.1 实例功能

   首先建立一个 Widget Appliation 项目 samp2_3,在创建项目向导中选择基类时,选择基类 QDialog,新类 的名称命名为 QWDlgManual,关键是取消创建窗体,即不勾选“Generate form”(创建界面)复选框。创建后的项目文件目录树下没有 qwdlgmanual.ui 文件。

   该项目通过代码创建一个对话框,实现与 samp2_2 类似的界面和功能。本例完成后的运行效果如图 1 所示, 其界面和功能与 samp2_2 类似。

1.2 界面创建

QWDlgManual 类定义
完成功能后的 qwdlgmanual.h 文件中 QWDlgManual 类的完整定义如下:
#include <QDialog>
#include <QCheckBox>
#include <QRadioButton>
#include <QPlainTextEdit>
#include <QPushButton>
class QWDlgManual : public QDialog
{
 Q_OBJECT
private:
 QCheckBox *chkBoxUnder;
 QCheckBox *chkBoxItalic;
 QCheckBox *chkBoxBold;
 QRadioButton *rBtnBlack;
 QRadioButton *rBtnRed;
 QRadioButton *rBtnBlue;
 QPlainTextEdit *txtEdit;
 QPushButton *btnOK;
 QPushButton *btnCancel;
 QPushButton *btnClose;
 void iniUI();//UI 创建与初始化
 void iniSignalSlots();//初始化信号与槽的链接
private slots:
 void on_chkBoxUnder(bool checked); //Underline 的 clicked(bool)信号的槽函数
 void on_chkBoxItalic(bool checked);//Italic 的 clicked(bool)信号的槽函数
void on_chkBoxBold(bool checked); //Bold 的 clicked(bool)信号的槽函数
 void setTextFontColor(); //设置字体颜色
public:
 QWDlgManual(QWidget *parent = 0);
 ~QWDlgManual();
};
QWDlgManual 类的 private 部分,声明了界面上的各个组件的指针变量,这些界面组件都需要在 QWDlgManual 类的构造函数里创建并在窗体上布局。
private 部分自定义了两个函数, iniUI() 用来创建所有界面组件,并完成布局和属性设置, iniSignalSlots() 用来完成所有的信号与槽函数的关联。
private slots 部分声明了 4 个槽函数,分别是 3 CheckBox 的响应槽函数,以及 3 个颜色设置的 RadioButton 的共同响应槽函数。
注意:与可视化设计得到的窗体类定义不同, QWDlgManual 的类定义里没有指向界面的指针 ui
这几个槽函数的功能与例 samp2_2 中的类似,只是在访问界面组件时,无需使用 ui 指针,而是直接访问 QWDlgManual 类里定义的界面组件的成员变量即可,例如 on_chkBoxUnder() 的代码:
void QWDlgManual::on_chkBoxUnder(bool checked)
{
 QFont font=txtEdit->font();
 font.setUnderline(checked);
txtEdit->setFont(font);
}
界面的创建,以及信号与槽函数的关联都在 QWDlgManual 的构造函数里完成,构造函数代码如下:
QWDlgManual::QWDlgManual(QWidget *parent) : QDialog(parent)
{
 iniUI(); //界面创建与布局
 iniSignalSlots(); //信号与槽的关联
setWindowTitle("Form created mannually");
}
构造函数调用 iniUI() 创建界面组件并布局,调用 iniSignalSlots() 进行信号与槽函数的关联。

1.3 界面组件的创建与布局

iniUI() 函数实现界面组件的创建与布局,以及属性设置。下面是 iniUI() 的完整代码:

void QWDlgManual::iniUI()
{
 //创建 Underline, Italic, Bold 3 个 CheckBox,并水平布局
 chkBoxUnder=new QCheckBox(tr("Underline"));
 chkBoxItalic=new QCheckBox(tr("Italic"));
 chkBoxBold=new QCheckBox(tr("Bold"));
 QHBoxLayout *HLay1=new QHBoxLayout;
 HLay1->addWidget(chkBoxUnder);
 HLay1->addWidget(chkBoxItalic);
 HLay1->addWidget(chkBoxBold);
 //创建 Black, Red, Blue 3 个 RadioButton,并水平布局
 rBtnBlack=new QRadioButton(tr("Black"));
 rBtnBlack->setChecked(true);
 rBtnRed=new QRadioButton(tr("Red"));
rBtnBlue=new QRadioButton(tr("Blue"));
 QHBoxLayout *HLay2=new QHBoxLayout;
 HLay2->addWidget(rBtnBlack);
 HLay2->addWidget(rBtnRed);
 HLay2->addWidget(rBtnBlue);
 //创建确定, 取消, 退出 3 个 PushButton, 并水平布局
 btnOK=new QPushButton(tr("确定"));
 btnCancel=new QPushButton(tr("取消"));
 btnClose=new QPushButton(tr("退出"));
 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\nIt is my demo");
 QFont font=txtEdit->font(); //获取字体
 font.setPointSize(20);//修改字体大小
 txtEdit->setFont(font);//设置字体
 //创建垂直布局,并设置为主布局
 QVBoxLayout *VLay=new QVBoxLayout;
 VLay->addLayout(HLay1); //添加字体类型组
 VLay->addLayout(HLay2);//添加字体颜色组
 VLay->addWidget(txtEdit);//添加 PlainTextEdit
 VLay->addLayout(HLay3);//添加按键组
setLayout(VLay); //设置为窗体的主布局
}
iniUI() 函数按照顺序完成了如下的功能:
创建 3 QCheckBox 组件,这 3 个组件的指针已经定义为 QWDlgManual 的私有变量,然后创建一 个水平布局 HLay1 ,将 3 CheckBox 添加到这个水平布局里。
创建 3 QRadioButton 组件,并创建一个水平布局 HLay2 ,将 3 RadioButton 添加到这个水平布 局里。
创建 3 QPushButton 组件,并创建一个水平布局 HLay3 ,将 3 PushButton 添加到这个水平布局里,并适当添加水平空格。
创建一个 QPlainTextEdit 组件,设置其文字内容,并设置其字体。
创建一个垂直布局 VLay ,将前面创建的 3 个水平布局和文本框依次添加到此布局里。
设置垂直布局为窗体的主布局。
如此创建组件并设置布局后,运行可以得到如图 1 所示的界面效果。这里完全是采用代码来实现组件创建与布局的设置,而这些功能在可视化设计中是由 setupUi() 函数根据界面的可视化设计结果自动实现的。
采用代码设计实现 UI 时,需要对组件的布局有个完整的规划,不如可视化设计直观,且编写代码工作量大。

1.4 信号与槽的关联

在纯代码设计 UI 时,信号与槽的关联也需要用代码来完成。函数 iniSignalSlots() 初始化所有的信号与槽的关联,其完整代码如下:
void QWDlgManual::iniSignalSlots()
{
 //三个颜色 QRadioButton 的 clicked()信号与 setTextFontColor()槽函数关联
 connect(rBtnBlue,SIGNAL(clicked()),this,SLOT(setTextFontColor()));
 connect(rBtnRed,SIGNAL(clicked()),this,SLOT(setTextFontColor()));
 connect(rBtnBlack,SIGNAL(clicked()),this,SLOT(setTextFontColor()));
 //三个字体设置的 QCheckBox 的 clicked(bool)信号与相应的槽函数关联
 connect(chkBoxUnder,SIGNAL(clicked(bool)),
 this,SLOT(on_chkBoxUnder(bool)));
 connect(chkBoxItalic,SIGNAL(clicked(bool)),
 this,SLOT(on_chkBoxItalic(bool)));
 connect(chkBoxBold,SIGNAL(clicked(bool)),
 this,SLOT(on_chkBoxBold(bool)));
 //三个按钮的信号与窗体的槽函数关联
 connect(btnOK,SIGNAL(clicked()),this,SLOT(accept()));
 connect(btnCancel,SIGNAL(clicked()),this,SLOT(reject()));
connect(btnClose,SIGNAL(clicked()),this,SLOT(close()));
}
设计完成后,编译并运行程序,可以得到如图 1 所示的运行效果,且功能与 samp2_2 相同。很显然,采用纯代码方式实现 UI 界面是比较复杂的,代码设计的工作量大而繁琐。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/554521.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据结构—排序算法(归并非比较)

目录 1、 归并排序 1.1 基本思想 1.2 归并排序递归方式的实现 1.3 归并排序非递归方式的实现 1.4 归并排序的特性总结 2、计数排序 2.1 计数排序基本思想 2.2 计数排序的实现 2.3 计数排序的特性总结&#xff1a; 1、 归并排序 1.1 基本思想 归并排序&#xff08;MER…

反射技术

一、获取Class对象 方式一&#xff1a;类名.class // 方式一&#xff1a;类名.classClass<Student> studentClass Student.class;System.out.println(studentClass);方式二&#xff1a;static Class forName(String fullNameWithPackage) 需要注意的是&#xff0c;for…

MAAS搭建

要求 https://maas.io/docs/installation-requirements 安装maas sudo snap install --channel=3.3 maas安装postgres sudo apt update -y sudo apt install -y postgresql设置数据库 sudo -i -u postgres psql -c "CREATE USER \"$MAAS_DBUSER\" WITH E…

深化企业数据智能应用 用友敢当“急先锋”

本篇文章来源于趣味科技v &#xff0c;作者完美主义 面对扑面而来的数字经济时代&#xff0c;一场轰轰烈烈的企业数智化转型正进行得如火如荼。 然而许多企业虽然明知道数智化转型势在必行&#xff0c;但是又担忧自己不具备相关能力。这些企业在数据和智能上面临哪些挑战&…

华为OD机试之TLV解析Ⅰ(Java源码)

TLV解析Ⅰ 题目描述 TLV编码是按[Tag Length Value]格式进行编码的&#xff0c;一段码流中的信元用Tag标识&#xff0c;Tag在码流中唯一不重复&#xff0c;Length表示信元Value的长度&#xff0c;Value表示信元的值。 码流以某信元的Tag开头&#xff0c;Tag固定占一个字节&…

在SecureCRT下使用sz下载和rz上传文件

安装命令&#xff1a;yum install lrzsz 在某些情况下使用ftp不能上传和下载到指定的目录&#xff0c;特别在项目中&#xff0c;比较麻烦&#xff0c;所以可以使用sz和rz命令可以实现在SecureCRT中上传下载 配置上传下载目录&#xff1a;选择某个session标签&#xff0c;点击…

YOLO V3 SPP ultralytics 第四节:YOLO V3 SPP网络的搭建

目录 1. 介绍 2. 代码介绍 2.1 create_modules 部分 2.1.1 不同层的处理 2.1.2 信息的融合 2.1.3 yolo 层的处理 2.2 get_yolo_layers 2.3 前向传播 3. 完整代码 1. 介绍 根据 上一节 解析的cfg文件&#xff0c;本章将配置文件cfg 搭建YOLO V3 SPP网络 本章的代码经过…

VuePress V1 添加 Vssue 评论功能

文章目录 前言选型集成Vssue安装创建 Github OAuth App配置插件使用 Vssue 组件自动创建 Issue 小结参考文献 前言 我的第二本开源电子书《后台开发命令 365》上线啦。 使用 VuePress 将之前记录的后台常用 Linux 命令博文整理成一个系统的开源电子书&#xff0c;方便阅读&am…

LeetCode 周赛 346(2023/05/21)仅 68 人 AK 的最短路问题

本文已收录到 AndroidFamily&#xff0c;技术和职场问题&#xff0c;请关注公众号 [彭旭锐] 提问。 LeetCode 单周赛第 345 场 体验一题多解的算法之美 单周赛 345 概览 T1. 删除子串后的字符串最小长度&#xff08;Easy&#xff09; 标签&#xff1a;栈 T2. 字典序最小回…

Sui基金正在招聘亚太地区市场经理,期待您的加入

Sui基金会致力于支持Sui网络的开发、增长和推广使用。Sui是基于第一原理重新设计和构建而成的L1公有链&#xff0c;旨在为创作者和开发者能够构建从游戏到金融的独特Web3体验。 Sui基金会三大去中心化原则&#xff1a;拥抱透明且公平的竞争环境、公开沟通以建立信任的文化&…

传染病学模型 | Matlab实现SIR传染病学模型 (SIR Epidemic Model)

文章目录 效果一览基本描述模型介绍程序设计参考资料效果一览 基本描述 传染病学模型 | Matlab实现SIR传染病学模型 (SIR Epidemic Model) 模型介绍 SIR模型是一种基本的传染病学模型,用于描述一个人群中某种传染病的传播情况。SIR模型假设每个人可以被感染,感染后会进入恢复…

Kibana:创建你的第一个仪表板

了解从你自己的数据创建仪表板的最常用方法。 本教程将从分析师查看网站日志的角度使用示例数据&#xff0c;但这种类型的仪表板适用于任何类型的数据。 完成后&#xff0c;你将全面了解示例 Web 日志数据。 在本次的展示中&#xff0c;我将使用最新的 Elastic Stack 8.7.1 来…

百分比图:解读数据,驱动业务增长

在当今信息爆炸的时代&#xff0c;数据成为了各行各业决策的重要依据。而在数据展示的众多形式中&#xff0c;百分比图凭借其简洁直观的表达方式和强大的信息传递能力&#xff0c;成为了企业和组织不可或缺的工具。本文将带您一同探索百分比图的魅力&#xff0c;揭示其在决策智…

介绍一下全链路压测平台的相关内容

随着互联网技术的不断发展&#xff0c;越来越多的企业开始依赖互联网来实现业务的发展和增长。而对于这些企业而言&#xff0c;如何保证他们的业务在高并发、高负载的情况下依然能够正常运行&#xff0c;是非常重要的一个问题。为了解决这个问题&#xff0c;企业可以使用全链路…

Vue3+ElementPlus报错集锦

目录 1、导入TS类型报错 2、使用类型报错 3、Vue3引入文件爆红且不提示 4、为defineAsyncComponent引入的component子组件设置类型 1、导入TS类型报错 &#xff08;1&#xff09;报错信息 import type { FormInstance, FormRules } from element-plus 模块 ""e…

精彩回顾 | Fortinet Accelerate 2023·中国区巡展杭州站

Fortinet Accelerate 2023中国区巡展 5月18日&#xff0c;Fortinet Accelerate 2023中国区巡展来到杭州&#xff0c;Fortinet携手太平洋电信、亚马逊云科技等云、网、安合作伙伴&#xff0c;与各行业典型代表客户&#xff0c;就网安融合、网安协同、工业互联网安全、云安全、网…

LC-1080. 根到叶路径上的不足节点(递归DFS)

1080. 根到叶路径上的不足节点 难度中等126 给你二叉树的根节点 root 和一个整数 limit &#xff0c;请你同时删除树中所有 不足节点 &#xff0c;并返回最终二叉树的根节点。 假如通过节点 node 的每种可能的 “根-叶” 路径上值的总和全都小于给定的 limit&#xff0c;则该…

网络安全有什么学习误区?

一、网络安全学习的误区 1.不要试图以编程为基础去学习网络安全 不要以编程为基础再开始学习网络安全&#xff0c;一般来说&#xff0c;学习编程不但学习周期长&#xff0c;且过渡到网络安全用到编程的用到的编程的关键点不多。一般人如果想要把编程学好再开始学习网络安全往…

【STM32系列】基础操作及LED测试

【STM32系列】基础操作及LED测试 资源常用网站整理基本操作恢复出厂设置 欢迎收看由咸鱼菌工作室出品的STM32系列教程。本篇内容主要是开发板的基础操作 资源 首先给大家推荐一些学习micropython的资源网站&#xff0c;文字版直接去我的博客里面翻一下 以下是一些Micropyth…

redis问题汇总

redis的优点 读写性能优异。十万/s的量级&#xff1b; 支持数据持久化。AOF,RDB 支持丰富的数据类型&#xff1b; 支持集群&#xff0c;可以实现主从复制&#xff0c;哨兵机制迁移&#xff0c;扩容等 缺点&#xff1a; 因为是基于内存的&#xff0c;所以虽然redis本身有key过期…