嵌入式 QT纯代码设计UI

这篇具有很好参考价值的文章主要介绍了嵌入式 QT纯代码设计UI。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

   

目录

1.1 实例功能

1.2 界面创建

1.3 界面组件的创建与布局

1.4 信号与槽的关联


qt纯代码不拖控件写界面,全栈,嵌入式,C++,ui,qt,嵌入式硬件

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 类似。
qt纯代码不拖控件写界面,全栈,嵌入式,C++,ui,qt,嵌入式硬件

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() 的完整代码: 文章来源地址https://www.toymoban.com/news/detail-837488.html

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 界面是比较复杂的,代码设计的工作量大而繁琐。

到了这里,关于嵌入式 QT纯代码设计UI的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 嵌入式Qt 第一个Qt项目

    打开Qt Creator 界面选择 New Project或者选择菜单栏 【文件】-【新建文件或项目】菜单项   弹出New Project对话框,选择Qt Widgets Application 选择【Choose】按钮,弹出如下对话框 设置项目名称和路径,按照向导进行下一步   选择编译套件 向导会默认添加一个继承自QMainWindow的类,可

    2024年02月20日
    浏览(46)
  • 嵌入式QT (Qt 信号与槽)

    因为有了信号与槽的编程机制,在 Qt 中处理界面各个组件的交互操作时变得更加直观和简单。 信号 (Signal)就是在特定情况下被发射的事件。 GUI 程序设计的主要内容就是对界面上各组件的信号的响应,只需要知道什么情况下发射哪些信号,合理地去响应和处理这些信号就

    2024年02月02日
    浏览(48)
  • 【嵌入式——QT】容器类

    Qt提供了基于模板的容器类,这些容器类可以用于存储指定类型的数据项,Qt的容器类比标准模板库(STL)中的容器类更轻巧、安全和易于使用。它们还是线程安全的,它们作为只读容器时可被多个线程访问。 容器类是基于模板的类,如常用的容器类QList,T是一个具体的类型,可

    2024年02月22日
    浏览(47)
  • 嵌入式 QT 界面布局管理

    目录 1、实例程序功能 2、界面组件布局 2.1 界面组件的层次关系 2.2 布局管理 2.3 伙伴关系和Tab顺序       创建一个 Widget Application 项目 samp2_2, 在创建窗体时选择基类 QDialog ,生成的类命名为 QWDialog ,并选择生成窗体。     如 此 新建 的项 目 samp2_2 有一 个界 面文 件 qwdi

    2024年02月04日
    浏览(50)
  • 嵌入式Qt Qt中的信号处理

    Qt消息模型: - Qt封装了具体操作系统的消息机制 - Qt遵循经典的GUI消息驱动事件模型 Qt中定义了与系统消息相关的概念;   Qt中的消息处理机制: Qt的核心 QObject::cinnect函数: Qt中的“新”: 实验1 初探信号与槽   运行结果: - 只有QObject的子类才能自定义槽 - 定义槽的

    2024年02月22日
    浏览(51)
  • 嵌入式:QT Day2

    源码: widget.h second.h widget.cpp second.cpp main.cpp    

    2024年02月15日
    浏览(44)
  • 嵌入式:QT Day1

    源码: widge.h  widge.cpp  main.cpp

    2024年02月15日
    浏览(46)
  • 嵌入式:QT Day4

    源码: widget.h widget.cpp main.cpp

    2024年02月14日
    浏览(40)
  • 【嵌入式——QT】QStyledItemDelegate用法详解

    QStyledItemDelegate是所有Qt item视图的默认委托,在创建它们时就会被安装在它们上面。 QStyledItemDelegate类是模型/视图类之一,是Qt模型/视图框架的一部分。委托允许项目的显示和编辑独立于模型和视图进行开发。 模型中数据项的数据被赋值为ItemDataRole;每个物品可以为每个角色存

    2024年01月23日
    浏览(47)
  • 嵌入式开发板qt gdb调试

    1) 启动 gdbserver ssh 或者 telnet 登陆扬创平板 192.168.0.253, 进入命令行执行如下: chmod 777 /home/HelloWorld (2) 打 开 QTcreator-Debug-StartDebugging-Attach to Running Debug Server 进行如下设置,设置监听端口10000. 点击上图中的按钮,由于按钮中的函数设置了断点,则跳到断点,界面如下

    2024年02月04日
    浏览(94)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包