【qt】纯代码界面设计

news2024/11/17 17:52:55

界面设计目录

  • 一.界面设计的三种方式
    • 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.总结一下：

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

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

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

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

相关文章

如何禁止打开PDF文件？推荐2种方法！

如何禁止打开PDF文件？推荐2种方法！

在工作中&#xff0c;我们经常会使用到PDF文件&#xff0c;对于重要的文件&#xff0c;不想被随意打开怎么办呢&#xff1f;下面小编分享2个方法&#xff0c;第二个很实用&#xff0c;记得收藏起来&#xff01; 方法1&#xff1a;设置密码保护 我们可以通过PDF编辑器&#xff…
阅读更多...
【图像识别】Swin Transformer

【图像识别】Swin Transformer

一、引言 论文&#xff1a; Swin Transformer: Hierarchical Vision Transformer using Shifted Windows 作者&#xff1a; Microsoft Research Asia 代码&#xff1a; Swin Transformer 特点&#xff1a; 提出滑动窗口自注意力 (Shifted Window based Self-Attention) 解决Vi…
阅读更多...
恶意软件正劫持安全软件更新进行分发

恶意软件正劫持安全软件更新进行分发

GuptiMiner 是一个高度复杂的威胁&#xff0c;最早在 2018 年发现&#xff0c;主要为了在大型企业中分发后门。一种是 PuTTY Link 的增强版本后门&#xff0c;能够针对本地网络进行 SMB 扫描&#xff0c;并通过网络横向移动到网络上其他可能易受攻击的 Windows 7 和 Windows Se…
阅读更多...
如何盘点选择的连锁收银系统贵不贵

如何盘点选择的连锁收银系统贵不贵

在选择连锁收银系统时&#xff0c;成本是一个至关重要的考量因素。盘点连锁收银系统的成本既涉及到系统本身的购买费用&#xff0c;也包括了系统的维护、培训以及可能带来的附加费用。下面将从四个方面对连锁收银系统的成本进行盘点。 1. 初始投资成本 连锁收银系统的初始投资…
阅读更多...
Python基础详解四

Python基础详解四

一&#xff0c;Json解析 字典转换为JSON&#xff1a; import jsondata [{"name":"袁震","age":20},{"name":"张三","age":21},{"name":"李四","age":22}] str json.dumps(data) …
阅读更多...
c++父类指针指向子类

c++父类指针指向子类

有一个常见的c题&#xff0c;就是父类和子类的构造函数和析构函数分别调用顺序&#xff1a; 父类构造函数子类构造函数子类析构函数父类析构函数 以及父类中的函数在子类中重新实现后&#xff0c;父类指针指向子类后&#xff0c;该指针调用的函数是父类中的还是子类中的&…
阅读更多...
【GlobalMapper精品教程】079：投影坐标系转地理坐标系（UTM转WGS1984/2000）

【GlobalMapper精品教程】079：投影坐标系转地理坐标系（UTM转WGS1984/2000）

文章目录 一、矢量UTM转WGS1984/20001. UTM转WGS19842. UTM转CGCS2000二、栅格UTM转WGS1984/2000一、矢量UTM转WGS1984/2000 加载配套实验数据（data079.rar）中的矢量数据，如下所示： 查看源坐标系：双击图层的，图层投影选项卡，为UTM投影，Zone48N。 设置系统坐标系：点击…
阅读更多...
【MATLAB源码-第206期】基于matlab的差分进化算法(DE)机器人栅格路径规划，输出做短路径图和适应度曲线。

【MATLAB源码-第206期】基于matlab的差分进化算法(DE)机器人栅格路径规划，输出做短路径图和适应度曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 差分进化算法&#xff08;Differential Evolution, DE&#xff09;是一种有效的实数编码的进化算法&#xff0c;主要用于解决实值函数的全局优化问题。本文将详细介绍差分进化算法的背景、原理、操作步骤、参数选择以及实际应…
阅读更多...
2024数维杯数学建模竞赛A题完整代码和思路论文解析

2024数维杯数学建模竞赛A题完整代码和思路论文解析

2024数维杯数学建模完整代码和成品论文已更新&#xff0c;获取↓↓↓↓↓ https://www.yuque.com/u42168770/qv6z0d/bgic2nbxs2h41pvt?singleDoc# 2024数维杯数学建模A题34页论文已完成&#xff0c;论文包括摘要、问题重述、问题分析、模型假设、符号说明、模型的建立和求解&…
阅读更多...
Qt之常用控件一

Qt之常用控件一

Widget常见属性及其作用 属性作用enabled 设置控件是否可使⽤. true 表⽰可⽤, false 表⽰禁⽤ geometry 位置和尺⼨. 包含 x, y, width, height 四个部分. 其中坐标是以⽗元素为参考进⾏设置的. windowTitle 设置 widget 标题 windowIcon 设置 widget 图标 windowOpa…
阅读更多...
【姿态解算与滤波算法】

【姿态解算与滤波算法】

姿态解算 一、主线 姿态表示方式&#xff1a;矩阵表示&#xff0c;轴角表示&#xff0c;欧拉角表示&#xff0c;四元数表示。 惯性测量单元IMU&#xff08;Inertial Measurement Unit&#xff09;&#xff1a;MPU6050芯片&#xff0c;包含陀螺仪和加速度计&#xff0c;分别测…
阅读更多...
为啥我说英语能决定程序员的天花板？

为啥我说英语能决定程序员的天花板？

看到知乎有这样的一个问题&#xff0c;作为程序员的你&#xff0c;大学最后悔没有好好学哪门课&#xff1f; 很多人回答《软件工程》、《线性代数》、《微积分》等&#xff0c;各种都有。。 但我觉得&#xff0c;这些课都很重要&#xff0c;但没学好不妨碍自学。 其实对程序…
阅读更多...
芯课堂 | 如何使用SWM系列产品的TIMER功能(一）

芯课堂 | 如何使用SWM系列产品的TIMER功能(一）

01 TIMER简介 TIMER是一种定时器工具&#xff0c;用来在一个后台线程计划执行指定任务。它可以计划执行一个任务一次或反复多次。 我司的SWM系列单片机提供的TIMER个数和功能有些微差别&#xff0c;为了让您更加简单的使用这一功能&#xff0c;下面将以SWM190为例&#xff0…
阅读更多...
高效视频剪辑：视频批量调色，如何利用色调调整提升效率

高效视频剪辑：视频批量调色，如何利用色调调整提升效率

在视频剪辑的后期处理中&#xff0c;调色是一个至关重要的环节。它不仅能够改变视频的整体氛围和风格&#xff0c;还能够突出视频的重点&#xff0c;增强观众的视觉体验。然而&#xff0c;对于大量的视频素材进行逐个调色处理&#xff0c;无疑会耗费大量的时间和精力。我们可以…
阅读更多...
在IDEA中使用 Spring Initializr 新建 spring boots 项目

在IDEA中使用 Spring Initializr 新建 spring boots 项目

【在IDEA中使用 Spring Initializr 新建 spring boots 项目 - CSDN Apphttp://t.csdnimg.cn/mVs5P Spring Initializr 创建spring boots项目 添加到pom.xml <dependency> <groupId>mysql</groupId> <artifactId>mysql-connec…
阅读更多...
鸿蒙开发接口Ability框架：【(窗口扩展能力)】

鸿蒙开发接口Ability框架：【(窗口扩展能力)】

窗口扩展能力 WindowExtensionAbility基于ExtensionAbility&#xff0c;WindowExtensionAbility中展示的内容作为一个控件(AbilityComponent)内容展示在其他应用窗口中&#xff0c;实现在一个窗口中展示多个应用程序内容的功能。 说明&#xff1a; 本模块首批接口从API versio…
阅读更多...
Android 13 aosp 默认关闭SELinux

Android 13 aosp 默认关闭SELinux

通过adb修改 adb root adb shell setenforce 0 // 开SELinux&#xff0c;设置成模式permissive adb shell setenforce 1 // 关SELinux&#xff0c;设置成模式enforce adb shell getenforce // 获取当前SELinux状态源码修改 Android_source/system/core/init/selinu…
阅读更多...
前端笔记-day05

前端笔记-day05

文章目录 01-结构伪类选择器02-结构伪类选择器-公式用法03-伪元素选择器04-盒子模型-组成05-盒子模型-边框线06-盒子模型-单方向边框线07-盒子模型-内边距08-盒子模型-padding多值写法09-盒子模型-尺寸计算10-盒子模型-版心居中11-清除默认样式12-元素溢出overflow13-外边距合并…
阅读更多...
Redis如何避免数据丢失？——RDB

Redis如何避免数据丢失？——RDB

目录 1. RDB机制的配置 2. fork()函数和写时复制(Copy On Write&#xff09; 什么是Copy On Write 系统fork中使用Copy On Write机制 3. RDB文件结构 RDB文件内容和内容顺序 InfoAuxFields是rdb信息数据 数据库数据 数据 数据存储格式 字符串编码 操作码 4. RDB的2…
阅读更多...
Coursera吴恩达深度学习专项课程01: Neural Networks and Deep Learning 学习笔记 Week 03

Coursera吴恩达深度学习专项课程01: Neural Networks and Deep Learning 学习笔记 Week 03

Neural Networks and Deep Learning Course Certificate 本文是学习 https://www.coursera.org/learn/neural-networks-deep-learning 这门课的笔记 Course Intro 文章目录 Neural Networks and Deep LearningWeek 03: Shallow Neural NetworksLearning Objectives Neural Ne…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023