【qt】纯代码界面设计

界面设计目录

一.界面设计的三种方式

1.使用界面设计器

开发效率最高,可以进行拖件即可。

但是有的界面效果实现不了。

2.纯代码界面设计

最为强大,可以灵活自如的操控

但是开发效率低

3.混合界面设计

前两种结合生下的孩子,你们的优点都到我这里了。

今天我们先来讲讲纯代码的方式。

二.纯代码进行界面设计

1.代码界面设计的总思路

  • 首先确定需要那些组件
  • 然后定义好组件
  • 初始化组件
  • 用布局将组件添加到窗口
  • 定义槽函数
  • 关联槽函数
  • 实现槽函数

2.创建项目

项目简单,选择对话框即可

因为纯代码,不需要ui文件,使用取消掉Generate form

其他都跟原来的一样。

3.设计草图

因为我们要知道我们需要那些组件,所以说一般我们会先设计一个草图,知道自己需要用那些组件。

从草图中,我们可以知道,我们需要复选框 单选框 文本框 按钮

4.添加组件指针

我们知道了自己需要的,现在就开始进行添加

首先需要加相应组件的头文件。

在dialog.h中

cpp 复制代码
#include <QCheckBox>  //复选框
#include <QRadioButton>//单选框
#include <QPlainTextEdit>//纯文本编辑器
#include <QPushButton>//按钮

然后在private里面把组件添加成成员数据

cpp 复制代码
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中

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()

但是这样的进行添加的话,有两大缺点

首先,你需要设置具体的位置

其次,你如果对窗口进行拉升是不会自动适应的

因此我们要学会使用布局

①水平布局

可以先理解为,将在同一行的多个组件放在一起,就是在一个布局里。

水平布局的头文件

cpp 复制代码
#include <QHBoxLayout>

创建一个水平布局,将同一行的组件添加到布局中

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;

    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的意思是添加组件的意思。

注意添加组件顺序是从左到右的。

这里就把组件都添加到水平布局上面了

②垂直布局

接下来开始垂直布局,就是将从上到下的布局或者组件添加到垂直的布局中。

cpp 复制代码
QVBoxLayout*VLay=new QVBoxLayout;
    VLay->addLayout(HLay1);
    VLay->addLayout(HLay2);
    VLay->addWidget(txtEdit);
    VLay->addLayout(HLay3);

然后将垂直布局添加到对话窗口中就可以进行显示了

cpp 复制代码
setLayout(VLay);

运行结果:

③细节点

效果图很明显没有对应的文字,不用慌,我们在初始化的时候配上文字。

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("退出");

    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);
}

运行结果:

布局的好处就是我可以拉大窗口,组件跟着变

如果水平某个地方你希望空着,不均匀分布。那可以在水平布局里面添加一个拉升器。

在按钮的水平布局里面第三个位置添加了一个拉升器。

cpp 复制代码
QHBoxLayout *HLay3=new QHBoxLayout;
    HLay3->addWidget(btnOK);
    HLay3->addWidget(btnCancel);
    HLay3->addStretch();//添加拉升器
    HLay3->addWidget(btnExit);

运行效果:

是不是很神奇,哈哈哈!

还可以设置默认文本

cpp 复制代码
txtEdit=new QPlainTextEdit;
txtEdit->setPlainText("给我点点关注,我也给你点点关注");

运行结果:

单选框也可以被默认选中。

cpp 复制代码
rBtnBlack=new QRadioButton("黑色");
rBtnBlack->setChecked(true);//黑色默认被选中

运行结果:

OK,现在咱们的界面就设计好了,开始我们的功能具体实现了!

7.定义槽函数

cpp 复制代码
public slots:
void onChkBoxBold(bool checked);
void onChkBoxUnderLine(bool checked);
void onChkBoxItalic(bool checked);
void setTxtColor();

因为复选框可以打开也可以关闭所以说,我们要接受一个bool值,来确定当前的状态。

对于单选框我们只能选一个,功能都是相同的,所以可以只用定义一个槽函数即可。

对于按钮,已经内置了可以用的槽函数,就不需要定义。

8.初始化信号槽

对信号槽的初始化,就是信号槽的关联。

我们也统一定义一个函数(initSignalSlots)去统一关联。

cpp 复制代码
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,现在框架都搭好了,开始实现我们的槽函数了。

对于复选框我们要先拿到文本的字体,然后再继续修改,然后又设置回去。

cpp 复制代码
#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.总结一下:

用纯代码来设计界面是,我们是要遵循一个逻辑循序的,这样你的代码就会条理清晰,且可维护性高。

其次就是组件和布局的应用也是界面设计的重点。

你看不到希望,只是因为你才刚刚开始,仅此而已,加油!

相关推荐
冰茶_1 分钟前
.NET MAUI 发展历程:从 Xamarin 到现代跨平台应用开发框架
学习·microsoft·微软·c#·.net·xamarin
夜夜敲码18 分钟前
C语言教程(十六): C 语言字符串详解
c语言·开发语言
cooldream200919 分钟前
深入理解MVP架构:让UI层与业务逻辑完美分离的设计模式
ui·设计模式·架构·系统架构师
帅云毅20 分钟前
Web3.0的认知补充(去中心化)
笔记·学习·web3·去中心化·区块链
豆豆20 分钟前
day32 学习笔记
图像处理·笔记·opencv·学习·计算机视觉
拖孩23 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
宋康25 分钟前
C语言结构体和union内存对齐
c语言·开发语言
꧁坚持很酷꧂31 分钟前
Linux Ubuntu18.04下安装Qt Craeator 5.12.9(图文详解)
linux·运维·qt
居然是阿宋35 分钟前
Kotlin高阶函数 vs Lambda表达式:关键区别与协作关系
android·开发语言·kotlin
nenchoumi311942 分钟前
VLA 论文精读(十六)FP3: A 3D Foundation Policy for Robotic Manipulation
论文阅读·人工智能·笔记·学习·vln