designer 设置按钮的继承类 .designer

目录

一、Designer 设计师（掌握）

二、布局 Layout（掌握）

三、伸展器 Spacer（掌握）

四、基本组件

4.1 QWidget 常用属性（掌握）

4.2 ui指针（重点）

4.3 QLabel 标签组件（掌握）(图片）

4.4 QAbstractButton 按钮类组件（掌握）

4.5 QLineEdit 单行文本编辑框（掌握）

4.6 QComboBox 组合框（掌握）

4.7 一组与数字相关的组件（熟悉）

 

一、Designer 设计师（掌握）

Designer是Qt用于快速开发图形用户界面的工具，可以使程序员脱离编程设计出程序的界面，Designer程序生成的界面设计文件的格式是.ui

Designer程序可以作为一款设计软件单独启动，也可以在Qt Creator中集成使用。对于初学者而言，要使用Qt Creator内置的Designer工具，需要在创建项目时，选中界面文件的选项。

使用上面的方式创建好的项目自带界面，双击进入后，就可以唤醒内置的Designer程序。Designer程序各个区域的功能如下：

二、布局 Layout（掌握）

可以认为布局是一个透明的盒子，不同的组件可以放置到布局中，在布局中的组件会按照某种规则自动排序。

不同的布局类型指定了其内部的组件的规则，常见的布局有：

• 垂直布局

类名为QVBoxLayout，内部的组件会竖着排成一排。

垂直布局的属性如下：

• 水平布局

类名为QHBoxLayout，内部的组件会横着排成一排。

水平布局的属性与垂直布局相同。

• 格点布局

类名为QGridLayout，内部的组件按照表格的方式排序。

如果对布局不满意，可以选中布局后打破布局。

三、伸展器 Spacer（掌握）

有时候需要填充一些空隙，此时可以使用Spacer组件，Spacer有两种，分别是水平和垂直方向的。

可以把伸展器想象为一根弹簧，可以把弹簧两边的组件对象顶开，伸展器本身不可见。

四、基本组件

4.1 QWidget 常用属性（掌握）

QWidget作为所有组件和窗口的基类，规定了所有组件通用的若干属性，之前的课程中主要学习的是宽高和位置，本次讲解其它属性。

下面的每个属性都可以在文档中查询，包括其getter和setter。 

enabled：带对沟的都是布尔类型

X.Y.宽.高:用函数也可以设置

sizePolicy:

Fixed:设置成固定的文件大小（比如垂直方向设置的是Fixed，如果不手动干预的话，无论怎么布局怎么做高度都是固定的

Minimun:可以变大，不能再小

下面的类比一下

minimunSize:最小尺寸

maximunSize:最大尺寸

注意:最大最小相等表示固定尺寸

font:字体

styleSheet：样式表 Alpha透明度

4.2 ui指针（重点）

当创建的项目使用ui文件后，可以在类中发现一个私有的成员变量   文件的格式时.ui

UI指针就是界面本身。

ui指针的工作原理如下所示。

上图为xml

.cpp

#include "dialog.h"
#include "ui_dialog.h"

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog) // 创建ui指针对象构造初始化列表
{
    ui->setupUi(this); // 初始化各个子组件对象  1
    // 一定要在setupUi函数后使用子组件对象
    ui->labelText->setText("你好"); // 2
    //1,2:1中是在designer设置了一段话，2是再c++代码中设置了你好 两个都生效 
但是2 会覆盖1 ，1先2后
    //通过c++代码设置颜色需要两个类 QPalette  QColor
    // 1.首先创建一个调色版对象，用来设置颜色
    QPalette pa;//非组件就不要需要长期存在 栈内存就行用完就丢
    // 2.再创建一个颜色对象  需要一个参数
    QColor color(153, 0, 102);
    // 3.调配颜色通过函数setColor
    // 参数1：角色  枚举选一个就行  指的是颜色用在哪里
    // 参数2：颜色
    pa.setColor(QPalette::WindowText,color);//设置窗口中文字的颜色
    // 通过ui指针调用子组件对象
    ui->labelText->setPalette(pa);
    // ui->labelText这个就是指向了名字叫labeText的按钮（子组件）
    
}

Dialog::~Dialog()
{
    delete ui; // 销毁ui指针和其管理的所有子组件对象
}

用的颜色的函数：第四个参数 不透明度

调配颜色通过函数setColor

.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QPalette> // 调色板
#include <QColor> // 颜色

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT

public:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();

private:
    Ui::Dialog *ui;
};

#endif // DIALOG_H

HIghlightedText:文字高光时的颜色

Highught：高光背景色

Window：窗口背景色

WindowText：窗口中文字的颜色

designer缺点：1.解析xml很慢

                          2.销毁需要等待ui指针销毁了再一起销毁 界面不消失子组件就一直存在

4.3 QLabel 标签组件（掌握）

QLabel组件可以显示文本或图片，常见属性如下。

改变文字颜色可以通过设置样式表的效果完成，也可以在C++代码中完成。

设置图片需要先往项目中导入图片，导入图片的操作步骤如下：

1. 下载图片，尽量使用jpg或png格式

2. 更改图片命名，要求英文小写、字母、下划线的组合形式，且使用英文字母开头。

3. 移动图片到工作目录中。.pro里面

4. 在Qt Creator中，选中项目名称，鼠标右键，点击“添加新文件”。

5. 在弹出的窗口中，按照下图所示进行操作。

6. 在弹出的窗口中，给资源文件命名（例如res）后，点击“下一步”。

7. 在项目管理界面，直接点击“完成”。可以看到项目中多了一个资源文件res.qrc，如下所示。

8. 选中资源文件，依次点击“添加”---“添加前缀”

9. 再次点击“添加”，点击“添加文件”，就可以把图片文件交给资源文件进行管理了。后续每次添加图片直接执行当前步骤即可。

10. 添加成功后，可以在资源文件中看到添加的图片。

11. 如果在Designer中使用该图片，需要重新构建一遍项目，构建项目可以点击

，也可以直接运行项目；如果要在C++代码中使用该图片，则需要在资源文件中选中图片，鼠标右键，点击“复制资源路径到剪切板”。

需要注意的是：

• Qt中使用的图片不要过大
• 尽量不要使用Qt进行图形处理

1.可以在designer中设置图片的大小

2.可以再c++代码中设置图片大小

示例代码下载链接：百度网盘 请输入提取码

提取码：hqyj

--来自百度网盘超级会员V6的分享

.cpp

#include "dialog.h"
#include "ui_dialog.h"

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog) // 创建ui指针
{
    ui->setupUi(this); // 初始化各个子组件对象
    // 一定要在setupUi函数后使用子组件对象


    // 创建一个调色版对象
    QPalette pa;
    // 创建一个颜色对象
    QColor color(153, 0, 102);
    // 调配颜色
    // 参数1：角色
    // 参数2：颜色
    pa.setColor(QPalette::WindowText,color);
    // 通过ui指针调用子组件对象
    ui->labelText->setPalette(pa);

    //图片是有头文件的叫QPixmap
    // 1.创建一个图片对象,参数是资源路径
    QPixmap pic(":/new/prefix1/christmas.jpg");
    // 2.创建缩放的尺寸对象 可以随便设置
    QSize size(200,300);
    // 按照设定模式对图像进行缩放
    // 参数1：缩放的尺寸
    // 参数2：缩放模式
    // 返回值：缩放后的图片对象  scaled：缩放
    pic = pic.scaled(size,Qt::KeepAspectRatioByExpanding);
    // 设置图片显示
    ui->labelPic->setPixmap(pic);
}

Dialog::~Dialog()
{
    delete ui; // 销毁ui指针和其管理的子组件对象
}

图片函数：

缩放函数

第二个参数：缩放模式

4.4 QAbstractButton 按钮类组件（掌握）

QAbstractButton是Qt中按钮类的抽象，拥有按钮类相关的属性和函数。

四个派生类分别是：

• QCheckBox

多选按钮

• QRadioButton

单选按钮

多选按钮和单选按钮可以通过布局或QGroupBox组件分组。

加一个组可以解决只能点一个的问题

• QPushButton

按压式按钮

QPushButton有一个flat属性，此属性设置为true时，不显示背景边框。

• QToolButton

工具按钮，后面讲工具栏时讲解。

QAbstractButton常见属性：

软件设计的图标可以从阿里巴巴矢量图标库下载。

添加标签步骤

1.参考4.3

2.

第一次点击时没有图片 需要点一下运行

然后就可以添加了

QAbstractButton常用信号：

示例代码下载链接：https://pan.baidu.com/s/1Wn37x0eFL4-zO5Wl1u1-qg 

提取码：hqyj

--来自百度网盘超级会员V6的分享

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QDebug>

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT

public:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();

private:
    Ui::Dialog *ui;

    // 自定义槽函数
private slots:
    // 与 toggled信号连接的槽函数  它发送什么你就就收什么参数对应上
    // void toggledSlot(bool checked) 槽函数就是只写类型不写参数类型与信号函数对应起来
    void toggledSlot(bool);
};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);//初始化各个子组件对象


    // 连接信号槽
    //第一个参数 组件对象 需要用ui指针去指向该组件的对象
    //第三个参数 接收者谁去执行槽函数 槽函数是Dialog  就是w  this
    connect(ui->checkBoxDui,SIGNAL(toggled(bool)),
            this,SLOT(toggledSlot(bool)));
}

void Dialog::toggledSlot(bool checked)//这个参数一般形参是什么名字这个就是什么名字
{
    if(checked)//如果选中
        qDebug() << "吃对乙酰氨基酚！";
    else
        qDebug() << "不吃对乙酰氨基酚！";
}

Dialog::~Dialog()
{
    delete ui;
}

上面的代码中如果要同时给多个按钮组件设置信号槽的连接比较复杂，因为需要给每一个按钮组件都进行信号槽连接才能同时监听多个按钮对象的状态。

此时可以使用QButtonGroup类对若干按钮对象进行编组，QButtonGroup对按钮编组是一种逻辑分组，即视觉效果不可见，因此QButtonGroup对象不归ui指针管理，需要程序员手动管理。另外，QButtonGroup最好不要与QGroupBox同时使用；QButtonGroup默认会使QCheckBox具有互斥性，需要手动关闭互斥。

注意：只要是肉眼可见的都是继承QWieget，QButtonGroup继承的是QObject所以它肉眼不可见

• QButtonGroup(QObject * parent = 0)

QButtonGroup的构造函数，parent参数为QObject表示此类的对象无视觉效果。

• void QButtonGroup::addButton(QAbstractButton * button, int id = -1)

添加按钮到按钮组

参数1：按钮对象

参数2：按钮编号，建议从1开始，不重复

signal:

参数区别：第一个是点击按钮本身 第二个是编号

示例代码下载链接：百度网盘 请输入提取码

提取码：hqyj

--来自百度网盘超级会员V6的分享

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
// 按钮组头文件
#include <QButtonGroup>
#include <QDebug>

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT

public:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();

private:
    Ui::Dialog *ui;
    QButtonGroup *group; // 按钮组对象

private slots:
    // 与void	buttonToggled(int id, bool checked)连接
    void btnToggled(int,bool); // 自定义槽函数
};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);

    // 创建按钮组对象，参数使用多态传递QObject是qt中所有类的基类
    //为什么传this 看this是不是QObject的派生类 显然所有的类都是他的派生类
    group = new QButtonGroup(this);
    // 向按钮组中添加按钮对象
    //参数1：按钮对象
    //参数2：按钮编号，建议从1开始，不重复
    group->addButton(ui->checkBox_1,1);
    group->addButton(ui->checkBox_2,2);
    group->addButton(ui->checkBox_3,3);
    group->addButton(ui->checkBox_4,4);
    // 解除互斥  因为同一阶层会互斥
    group->setExclusive(false);
    // 信号槽连接的前提：发射者和接收者对象创建完成
    connect(group,SIGNAL(buttonToggled(int,bool)),
            this,SLOT(btnToggled(int,bool)));
}

void Dialog::btnToggled(int id,bool checked)//定义时必须写上参数
{
    if(id == 1)
        qDebug() << "甲：" << checked;
    else if(id == 2)
        qDebug() << "乙：" << checked;
    else if(id == 3)
        qDebug() << "丙：" << checked;
    else if(id == 4)
        qDebug() << "丁：" << checked;
}

Dialog::~Dialog()
{
    delete group;
    delete ui;
}

4.5 QLineEdit 单行文本编辑框（掌握）

QLineEdit用于录入用户输入。

常用属性如下：

常用信号如下：

示例代码下载链接：https://pan.baidu.com/s/1OPj3I1UbjEy3FiEcbiS6xQ 

提取码：hqyj

--来自百度网盘超级会员V6的分享

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QDebug>

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT

public:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();

private:
    Ui::Dialog *ui;

private slots:
    // 与 textEdited(QString)信号连接
    // 信号函数void textEditedSlot(QString  & text);
    void textEditedSlot(QString);
    // 点击按钮的槽函数
    void btnClickedSlot();
};

#endif // DIALOG_H

主动获取对话框的内容

dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);

    connect(ui->lineEdit,SIGNAL(textEdited(QString)),
            this,SLOT(textEditedSlot(QString)));
    connect(ui->pushButton,SIGNAL(clicked()),
            this,SLOT(btnClickedSlot()));
}

void Dialog::textEditedSlot(QString text)
{
    qDebug() << "当前输入的文字是：" << text;
}

void Dialog::btnClickedSlot()
{
    // 主动获取输入框的内容
    QString text = ui->lineEdit_2->text();
    qDebug() << text;
}

Dialog::~Dialog()
{
    delete ui;
}

4.6 QComboBox 组合框（掌握）

基本功能与QRadioButton类似，实现选项单选的功能，但是相比于QRadioButton，QComboBox占用的版面面积更小。

在Qt中，Item、Project都被翻译为项目，实际上有很大的区别。Project指的是整个工程项目，而Item表达的是条目的意思。

常用属性如下：

常用信号如下：

参数：第一个是把item选项序号发过来 第二个是item文字发过来

示例代码下载链接：https://pan.baidu.com/s/1v9u4vtE3iqtEiE064Cq1hQ 

提取码：hqyj

--来自百度网盘超级会员V6的分享

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QDebug>

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT

public:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();

private:
    Ui::Dialog *ui;

private slots:
    // 与void	currentTextChanged(const QString & text)连接
    void textChangedSlot(QString);
};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);
    connect(ui->comboBox,SIGNAL(currentTextChanged(QString)),
            this,SLOT(textChangedSlot(QString)));
    //当用户编辑后发射信号
}

void Dialog::textChangedSlot(QString text)
{
    qDebug() << text;
}

Dialog::~Dialog()
{
    delete ui;
}

4.7 一组与数字相关的组件（熟悉）

下面的组件都与数字相关，且主要的属性与信号相同。

上述组件最常用的信号是

• void valueChanged(int value)

当前值发生变化时发射的信号

示例代码下载链接：百度网盘 请输入提取码

提取码：hqyj

--来自百度网盘超级会员V6的分享

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT

public:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();

private:
    Ui::Dialog *ui;

private slots:
    // 与void	valueChanged(int value)连接
     //当前值发生变化时发射的信号
    void valueChangedSlot(int);
};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);
    connect(ui->dial,SIGNAL(valueChanged(int)),
            this,SLOT(valueChangedSlot(int)));
}

void Dialog::valueChangedSlot(int value)
{
    // 给所有组件设定数值
    ui->progressBar->setValue(value);
    ui->spinBox->setValue(value);
    ui->horizontalSlider->setValue(value);
    ui->verticalSlider->setValue(value);
    ui->horizontalScrollBar->setValue(value);
    ui->verticalScrollBar->setValue(value);
}

Dialog::~Dialog()
{
    delete ui;
}