【qt】纯代码界面设计

界面设计目录

  • 一.界面设计的三种方式
    • 1.使用界面设计器
    • 2.纯代码界面设计
    • 3.混合界面设计
  • 二.纯代码进行界面设计
    • 1.代码界面设计的总思路
    • 2.创建项目
    • 3.设计草图
    • 4.添加组件指针
    • 5.初始化组件指针
    • 6.添加组件到窗口
      • ①水平布局
      • ②垂直布局
      • ③细节点
    • 7.定义槽函数
    • 8.初始化信号槽
    • 9.实现槽函数
    • 10.总结一下：

一.界面设计的三种方式

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.总结一下：

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

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

最新！TOP200高校！5月ESI排名，公布！

最新！TOP200高校！5月ESI排名，公布！

【SciencePub学术】5月9日&#xff0c;ESI数据库更新了2024年5月最新ESI数据。据统计&#xff0c;全球共有9019家科研机构上榜&#xff0c;其中有449所中国内地高校。 ESI&#xff08;基本科学指标数据库&#xff09;是目前世界范围内普遍用以评价高校、学术机构、国家或地区国…
阅读更多...
JavaScript 动态网页实例 —— 事件处理应用

JavaScript 动态网页实例 —— 事件处理应用

前言 事件处理的应用很广泛。在事件处理的应用中，鼠标事件的应用是最常用到的。本章给出几个鼠标事件处理应用的示例，包括:页面预览、图像切换、点亮文本、鼠标跟随、鼠标感应和禁用鼠标按键。在这些示例中，有的可以直接拿来应用，有的则只提供了一种应用的方法，稍加拓展，…
阅读更多...
深入解析RedisSearch：全文搜索的新维度

深入解析RedisSearch：全文搜索的新维度

码到三十五 &#xff1a; 个人主页 在当今的数据时代&#xff0c;信息的检索与快速定位变得尤为关键。Redis&#xff0c;作为一个高性能的内存数据库&#xff0c;已经在缓存和消息系统中占据了重要地位。然而&#xff0c;Redis并不直接支持复杂的搜索功能。为了填补这一空白&am…
阅读更多...
QT7_视频知识点笔记_3_自定义控件，事件处理器⭐，定时器，QPainter,绘图设备，不规则窗口

QT7_视频知识点笔记_3_自定义控件，事件处理器⭐，定时器，QPainter,绘图设备，不规则窗口

第三天&#xff1a; 自定义控件&#xff0c;事件处理器⭐&#xff0c;定时器&#xff0c;QPainter,绘图设备&#xff0c;不规则窗口实现 1.自定义控件&#xff1a; 创建新的QT控件类&#xff0c;然后再需要使用的地方--》提升为 来使用如何使用基础控件的信号和槽函数&…
阅读更多...
Flutter-Statewidget 创建State过程State＜XXXX＞ createState() =＞ _XXXXState()的解释

Flutter-Statewidget 创建State过程State＜XXXX＞ createState() =＞ _XXXXState()的解释

文章目录 创建widget 的状态对象示例代码解析 完整的代码示例总结 创建widget 的状态对象 今天有个同学问了我下State createState() > _XXXXState()时什么意思。这个代码在flutter开发中一直看到&#xff0c;很多人都不关心这个&#xff0c;直接当模板使用。今天来介绍下这…
阅读更多...
Python中tkinter编程入门3

Python中tkinter编程入门3

在使用tkinter创建了窗口之后&#xff0c;可以将一些控件“放置”到窗口中。这些控件包括标签、按键以及输入框等。 1 在窗口中“放置”标签 在窗口中“放置”标签主要有两个步骤&#xff0c;一是创建标签控件&#xff0c;二是将创建好的标签“放置”到窗口上。 1.1 创建标签…
阅读更多...
Maven- Profile详解

Maven- Profile详解

前言 Profile能让你为一个特殊的环境自定义一个特殊的构建&#xff1b;profile使得不同环境间构建的可移植性成为可能。 <project><profiles><profile><build><defaultGoal>...</defaultGoal><finalName>...</finalName><…
阅读更多...
通过自建镜像方式搭建RabbitMQ集群

通过自建镜像方式搭建RabbitMQ集群

通过自建镜像方式搭建RabbitMQ集群 1. 应用准备1.1 应用目录结构1.2 配置文件1.2.1 .erlang.cookie1.2.2 hosts1.2.3 rabbitmq.conf1.2.4 rabbitmq-env.conf 2. 编写DockerFile2.1 将所有本地文件拷贝到工作目录2.2 拷贝文件到源目录&增加执行权限2.3 安装Erlang & rab…
阅读更多...
WAAP全站防护理念，发现和保护敏感数据

WAAP全站防护理念，发现和保护敏感数据

数据是现代企业的新石油&#xff1a;正确使用它可以促进公司的发展并帮助企业在竞争中领先。就像石油一样&#xff0c;原始数据和未被发现的数据是毫无用处的&#xff0c;企业将无法从中受益&#xff1b;在最坏的情况下&#xff0c;它可能会导致安全事件。这也是企业投资敏感数…
阅读更多...
Python | Leetcode Python题解之第75题颜色分类

Python | Leetcode Python题解之第75题颜色分类

题目&#xff1a; 题解&#xff1a; class Solution:def sortColors(self, nums: List[int]) -> None:n len(nums)p0, p2 0, n - 1i 0while i < p2:while i < p2 and nums[i] 2:nums[i], nums[p2] nums[p2], nums[i]p2 - 1if nums[i] 0:nums[i], nums[p0] num…
阅读更多...
R语言数据探索与分析-碳排放分析预测

R语言数据探索与分析-碳排放分析预测

# 安装和加载需要的包 install.packages("readxl") install.packages("forecast") install.packages("ggplot2") library(readxl) library(forecast) library(ggplot2)# 数据加载和预处理 data <- read_excel("全年数据.xlsx") co…
阅读更多...
全新神经网络架构KAN——本文用于学习与探索

全新神经网络架构KAN——本文用于学习与探索

论文地址&#xff1a;https://arxiv.org/pdf/2404.19756 Github&#xff1a;GitHub - KindXiaoming/pykan: Kolmogorov Arnold Networks 文档说明&#xff1a;Welcome to Kolmogorov Arnold Network (KAN) documentation! — Kolmogorov Arnold Network documentation 本文仅…
阅读更多...
A计算机上的程序与B计算机上部署的vmware上的虚拟机的程序通讯 如何配置？

A计算机上的程序与B计算机上部署的vmware上的虚拟机的程序通讯 如何配置？

环境&#xff1a; 在A计算机上运行着Debian11.3 Linux操作系统&#xff1b;在B计算机上运行着Windows10操作系统&#xff0c;并且安装了VMware软件&#xff0c;然后在VMware上创建了虚拟机C并安装了CentOS 6操作系统 需求&#xff1a; 现在A计算机上的程序需要同虚拟机C上的软…
阅读更多...
【RAG 论文】Contriever：对比学习来无监督训练文本嵌入模型

【RAG 论文】Contriever：对比学习来无监督训练文本嵌入模型

论文&#xff1a;Unsupervised Dense Information Retrieval with Contrastive Learning ⭐⭐⭐⭐⭐ Facebook Research, arXiv:2112.09118 Code&#xff1a;github.com/facebookresearch/contriever 一、论文速读 本文使用对比学习的方法来对文本检索模型做无监督学习训练&am…
阅读更多...
MySQL-索引篇

MySQL-索引篇

文章目录 什么是索引&#xff1f;索引的优缺点索引底层数据结构选型Hash表二叉查找树AVL树红黑树B树&B树 索引类型总结主键索引二级索引聚集索引与非聚集索引聚集索引非聚集索引 覆盖索引与关联索引覆盖索引联合查询最左前缀匹配原则 索引下推如何正确使用索引选择合适的字…
阅读更多...
信息检索（35）：LEXMAE: LEXICON-BOTTLENECKED PRETRAINING FOR LARGE-SCALE RETRIEVAL

信息检索（35）：LEXMAE: LEXICON-BOTTLENECKED PRETRAINING FOR LARGE-SCALE RETRIEVAL

LEXMAE: LEXICON-BOTTLENECKED PRETRAINING FOR LARGE-SCALE RETRIEVAL 标题摘要1 引言2 相关工作3 LEXMAE&#xff1a;词典瓶颈屏蔽自动编码器3.1 语言建模编码器3.2 词典瓶颈模块3.3 弱化掩蔽式解码器3.4 词汇加权检索器的预训练目标和微调 4 实验4.1 主要评估4.2 效率分析与…
阅读更多...
「云渲染教程」3D渲染时GPU内存不足怎么解决？

「云渲染教程」3D渲染时GPU内存不足怎么解决？

在进行三维场景渲染时&#xff0c;如果遇到模型较为复杂&#xff0c;用户们可能会面临图形处理单元&#xff08;GPU&#xff09;内存不足的挑战。这种情况通常意味着现有的硬件配置不足以满足渲染任务的需求。为了缓解GPU的工作压力&#xff0c;可以采取一些策略来优化资源的分…
阅读更多...
如何使用联合体判断一个机器是大端还是小端

如何使用联合体判断一个机器是大端还是小端

如何使用联合体判断一个机器是大端还是小端 #include<iostream> using namespace std; union Checker//联合体中的数据共享内存 {int val;char ch[2]; }; int main() {Checker checker;checker.val 0x1234;if (checker.ch[0] 0x34)//数组中的数据是由低地址往高地址存放…
阅读更多...
Arduino-ILI9341驱动开发TFT屏显示任意内容三

Arduino-ILI9341驱动开发TFT屏显示任意内容三

Arduino-ILI9341驱动开发TFT屏显示任意内容三 1.概述 这篇文章介绍使用ILI9341驱动提供的函数控制TFT屏显示字符串、图形、符号等等内容的编辑和展示。 2.硬件 2.1.硬件列表 名称数量Arduino Uno12.8" TFT彩色液晶触摸屏模块&#xff08;ILI9431&#xff09;110K 电阻…
阅读更多...
什么是web3D？应用场景有哪些？如何实现web3D展示？

什么是web3D？应用场景有哪些？如何实现web3D展示？

Web3D是一种将3D技术与网络技术完美结合的全新领域&#xff0c;它可以实现将数字化的3D模型直接在网络浏览器上运行&#xff0c;从而实现在线交互式的浏览和操作。 Web3D通过将多媒体技术、3D技术、信息网络技术、计算机技术等多种技术融合在一起&#xff0c;实现了它在网络上…
阅读更多...
最新文章

Copyright @ 2022~2023