当前位置：首页 > news >正文

QT6（可视化UI设计代码实现）

news 2025/8/15 15:39:53

QT6

可视化UI设计代码实现

创建项目这里选择QDialog

在这里插入图片描述

导入资源
File->New FIle

在这里插入图片描述

选择Qt Resource File

在这里插入图片描述

下一步

在这里插入图片描述

这里我们添加一下资源文件给我们左上角默认的图标换一个
可以在网上下一些图标文（推荐阿里云矢量图标库）
在这里插入图片描述

添加好后，我们可以点击一下左下角的构建，方便我们接下来的使用

在这里插入图片描述
选择我们导入的图标

接下来我们要对UI的布局进行一个调整

添加一个Plain Text Edit（纯文本编辑框），双击这个输入框就可以修改里面的默认文本

在这里插入图片描述

添加一个Group Box （组）

在这里插入图片描述

添加几个Check Box（复选框）

在这里插入图片描述

再添加几个Radio Button （单选框）

在这里插入图片描述

最后添加两个按钮

在这里插入图片描述
最后我们可以给每个控件起一个合适的名称

稍微调整一下布局（后面再说！）

在这里插入图片描述

UI界面到此就结束了，后面开始代码功能的实现（信号和槽的概念后面再说！）

在这里插入图片描述

双击跳转到cpp代码的实现

在这里插入图片描述

代码实现

#include "dialog.h"
#include "./ui_dialog.h" // 可以参考这个文件Dialog::Dialog(QWidget *parent): QDialog(parent), ui(new Ui::Dialog)
{ui->setupUi(this);// 建立链接 信号->槽connect(ui->radioButton_black,SIGNAL(clicked()),this,SLOT(do_FontColor()));connect(ui->radioButton_blue,SIGNAL(clicked()),this,SLOT(do_FontColor()));connect(ui->radioButton_red,SIGNAL(clicked()),this,SLOT(do_FontColor()));
}Dialog::~Dialog()
{delete ui;
}// 清除
void Dialog::on_pushButton_cls_clicked()
{// 清空编辑框ui->plainTextEdit->clear();
}// 加粗
void Dialog::on_checkBox_bold_clicked(bool checked)
{// 获取plainTextEdit中的默认字体QFont font = ui->plainTextEdit->font();// 判断是否有选中font.setBold(checked);// 设置到plainTextEdit中ui->plainTextEdit->setFont(font);
}// 斜体
void Dialog::on_checkBox_italic_clicked(bool checked)
{// 获取plainTextEdit中的默认字体QFont font = ui->plainTextEdit->font();// 判断是否有选中font.setItalic(checked);// 设置到plainTextEdit中ui->plainTextEdit->setFont(font);
}// 添加下划线
void Dialog::on_checkBox_underline_clicked(bool checked)
{// 获取plainTextEdit中的默认字体QFont font = ui->plainTextEdit->font();// 判断是否有选中font.setUnderline(checked);// 设置到plainTextEdit中ui->plainTextEdit->setFont(font);
}// 黑色
void Dialog::on_radioButton_black_clicked(bool checked)
{// 获取plainTextEdit中的默认字体QFont font = ui->plainTextEdit->font();// 判断是否有选中font.setUnderline(checked);// 设置到plainTextEdit中ui->plainTextEdit->setFont(font);
}// 定义颜色选择的方法
void Dialog::do_FontColor()
{// 获取调色板QPalette plet = ui->plainTextEdit->palette();// 判断单选框有没有被选中if(ui->radioButton_black->isChecked()){// 设置调色板颜色plet.setColor(QPalette::Text,Qt::black);}if(ui->radioButton_blue->isChecked()){plet.setColor(QPalette::Text,Qt::blue);}if(ui->radioButton_red->isChecked()){plet.setColor(QPalette::Text,Qt::red);}// 给plainTextEdit字体设置颜色ui->plainTextEdit->setPalette(plet);
}