QT 自定义组件界面跳转

一、引用组件需要的类（头文件）

1、按钮类

QPushButton: 普通按钮;

QToolButton: 工具按钮;

QRadioButton: 单选按钮;

QCheckBox: 复选按钮;

QCommandLinkButton: 命令连接按钮;

2、布局类

QHBoxLayout水平

QVBoxLayout垂直

QGridLayout网格

QFormLayout表单

QSrackedLayout.堆栈

3、输出类

QLabel: 标签;

ob->setAlignment(QT::AlignCenter); //文本居中对齐

obj->setPixmap(QPixmap("文件名")); //设置标签图片

obj->setScaledContents(true); //自动缩放显示图片

QMovie *ob = new QMovie("文件名");

obj->setMove(ob); //设置标签动画

ob->start(); //开始播放

QTextBrowser: 文本浏览器;

QCalendarWidget: 日历窗口;

QLCDNumber: 七段数码管;

lcd->setDigitCount(n); //设置显示位数

lcd->display(n); //显示数字n

ProgressBar: 进度条;

pb->setValue(n); //显示进度n

QTimer *t = new QTimer;

connect(t, SIGNAL(timeout()), this, SLOT(updata_value()));

t->start(n);//每过n毫秒修改updata_value中的对象值

4、输入类

QComboBox: 组合框;

cmb->addItem("text"); //添加下拉选项

QFontComBox: 字体下拉框;

QTextEdit: 文本编辑框;

QLineEdit: 行编辑框;

setPlaceholderText("text"); //编辑框内的提示信息

QSpinBox: 自旋框;

QTimeEdit: 调整时间;

QDial: 旋钮;

QScrollBar: 滚动条;

setOrientation(Qt::Horizontal); //水平显示，默认垂直

QSlider: 滑动杆;

setRange(x, y); //设置范围

setMaximum(m); //设置最大值

setSingleStep(m); //设置单步步长

5、容器

QGroupBox: 分组框;

g->setLayout(vbox); //将布局好的ui加入groupbox中

vbox->setwidget(g); //最终的布局使用setWidget装入groupbox窗口

QWidget: 分组(无边框);

QScrollArea: 滚动窗口容器;

setWidget(lb); //将lb放入容器

QToolBox: 工具栏;

QTabWidget: 制表容器;

setTabsClosable(true);//设置标签可关闭

QStackedWidget: 栈容器;

二、使用组件对应的类实例化对象（头文件）

cpp 复制代码

#ifndef WIDGET_H
#define WIDGET_H

//引用需要的类
#include <QWidget>
#include <QWidget>
#include <QDebug>
#include <QIcon>//图标类
#include <QPushButton>//按钮类
#include <QLabel>//标签类
#include <QMovie>//动画类
#include <QLineEdit>//行编辑器
#include <QMessageBox>//对话框

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    Ui::Widget *ui;

    //声明对象（组件）
    //按键
    QPushButton *btn1;
    QPushButton *btn2;

    //标签
    QLabel *lab1;
    QLabel *lab2;
    QLabel *lab3;//抬头

    //行编辑器
    QLineEdit *edit1;
    QLineEdit *edit2;



};
#endif // WIDGET_H

三、设置组件属性（原文件）

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);//将自己的类绑定到Ui

    //1、设置窗口
    this->setFixedSize(499,375);//固定尺寸
    this->setWindowTitle("登录");//设置抬头名称
    this->setWindowIcon(QIcon(":/tabel/kamijo_.webp"));//设置窗口图标
                                //图片路径
    //2、为对象（组件）申请空间
    //按键
    btn1 = new QPushButton("登录",this);
    btn2 = new QPushButton("取消",this);

    //标签
    lab1 = new QLabel("账号",this);
    lab2 = new QLabel("密码",this);
    lab3 = new QLabel(this);//抬头

    //行编辑器
    edit1 = new QLineEdit(this);
    edit2= new QLineEdit(this);

    //3、对象属性编辑
    //尺寸
    btn1->resize(80,40);
    btn2->resize(80,40);

    edit1->resize(265,20);
    edit2->resize(265,20);

    lab1->resize(50,20);
    lab2->resize(50,20);
    lab3->resize(534,375/2);

    qDebug()<<lab1->width()<<lab1->height();

    //坐标
    btn1->move(113,285);
    btn2->move(534-133-100,btn1->y());

    lab1->move(btn1->x()-btn1->width()+32,btn1->y()-60);
    lab2->move(btn1->x()-btn1->width()+32,btn1->y()-30);

    edit1->move(lab1->x()+lab1->width(),lab1->y());
    edit2->move(lab2->x()+lab2->width(),lab2->y());

    //样式
    QMovie *lab3_movie = new QMovie(":/tabel/misak.gif");
    lab3_movie->start();
    lab3->setMovie(lab3_movie);//邦定
    //lab3->setScaledContents(true);//自适应尺寸

    //功能属性
    edit2->setEchoMode(QLineEdit::Password);
    edit2->setPlaceholderText("密码");

    //4、绑定信号与槽
    connect(btn1,&QPushButton::clicked,this,&Widget::Widget_btn1_slot);
    connect(btn2,&QPushButton::clicked,this,&Widget::Widget_btn2_slot);
    //在哪都可以，只要在使用前绑定就可以了
    //由于只需要绑定一次，为了方便和避免重复调用，会放在构造函数中
    //如果需要重复的解除绑定、重新绑定，则根据具体逻辑选择位置
}

//槽函数定义
void Widget::Widget_btn1_slot()
{
    QLabel *lab4 = new QLabel;
    QLabel *lab5 = new QLabel;
    if(edit1->text() == 0)
    {
        //QLabel *lab4 = new QLabel;
        lab4->setWindowTitle("账号为空");
        lab4->setWindowIcon(QIcon(":/tabel/kamijo_.webp"));
        QMovie *lab4_movie = new QMovie(":/tabel/spase.webp");
                                            //动图路径
        lab4_movie->start();
        lab4->setMovie(lab4_movie);//绑定
        lab4->setScaledContents(true);//自适应尺寸
        lab4->show();
    }
    else if(edit1->text() == edit2->text())
    {
       qDebug()<<"login_success";

       emit jump_signals();//信号会发送给所有对象，但只有和该信号绑定的对象才会响应

       this->close();
    }else
    {
        qDebug()<<"false";
        //QLabel *lab5 = new QLabel;
        lab5->setWindowTitle("账号密码不正确");
        lab5->setWindowIcon(QIcon(":/tabel/kamijo_.webp"));
        QMovie *lab5_movie = new QMovie(":/tabel/error.webp");
        lab5_movie->start();
        lab5->setMovie(lab5_movie);//绑定
        lab5->setScaledContents(true);//自适应尺寸
        lab5->show();
        edit2->clear();
    }
}

void Widget::Widget_btn2_slot()
{
    QMessageBox box(QMessageBox::Information,
                    "退出",
                    "确定退出吗？",
                    QMessageBox::Ok | QMessageBox::No,
                    this);

    box.setButtonText(QMessageBox::Ok,"确定");
    box.setButtonText(QMessageBox::No,"取消");

    int res = box.exec();

    if(res == QMessageBox::Ok)
    {
        close();
    }
}

四、信号与槽的设置（界面跳转开始设置）

1、头文件中声明信号与槽

cpp 复制代码

#ifndef WIDGET_H
#define WIDGET_H

//引用需要的类
#include <QWidget>
#include <QWidget>
#include <QDebug>
#include <QIcon>//图标类
#include <QPushButton>//按钮类
#include <QLabel>//标签类
#include <QMovie>//动画类
#include <QLineEdit>//行编辑器
#include <QMessageBox>//对话框

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    Ui::Widget *ui;

    //声明对象（组件）
    //按键
    QPushButton *btn1;
    QPushButton *btn2;

    //标签
    QLabel *lab1;
    QLabel *lab2;
    QLabel *lab3;//抬头

    //行编辑器
    QLineEdit *edit1;
    QLineEdit *edit2;


public slots:
    void Widget_btn1_slot();//槽函数声明
    void Widget_btn2_slot();

signals:
    void jump_signals();//跳转信号声明
};
#endif // WIDGET_H

2、原文件中定义槽函数

cpp 复制代码

//槽函数定义
void Widget::Widget_btn1_slot()
{
    QLabel *lab4 = new QLabel;
    QLabel *lab5 = new QLabel;
    if(edit1->text() == 0)
    {
        //QLabel *lab4 = new QLabel;
        lab4->setWindowTitle("账号为空");
        lab4->setWindowIcon(QIcon(":/tabel/kamijo_.webp"));
        QMovie *lab4_movie = new QMovie(":/tabel/spase.webp");
        lab4_movie->start();
        lab4->setMovie(lab4_movie);//绑定
        lab4->setScaledContents(true);//自适应尺寸
        lab4->show();
    }
    else if(edit1->text() == edit2->text())       //发送事件
    {
       qDebug()<<"login_success";

       //发送跳转信号
       emit jump_signals();//信号会发送给所有对象，但只有和该信号绑定的对象才会响应

       this->close();
    }else
    {
        qDebug()<<"false";
        //QLabel *lab5 = new QLabel;
        lab5->setWindowTitle("账号密码不正确");
        lab5->setWindowIcon(QIcon(":/tabel/kamijo_.webp"));
        QMovie *lab5_movie = new QMovie(":/tabel/error.webp");
        lab5_movie->start();
        lab5->setMovie(lab5_movie);//绑定
        lab5->setScaledContents(true);//自适应尺寸
        lab5->show();
        edit2->clear();
    }
}

void Widget::Widget_btn2_slot()
{
    QMessageBox box(QMessageBox::Information,
                    "退出",
                    "确定退出吗？",
                    QMessageBox::Ok | QMessageBox::No,
                    this);

    box.setButtonText(QMessageBox::Ok,"确定");
    box.setButtonText(QMessageBox::No,"取消");

    int res = box.exec();

    if(res == QMessageBox::Ok)
    {
        close();
    }
}

3、绑定对应的信号与槽

复制代码

    //4、绑定信号与槽
    connect(btn1,&QPushButton::clicked,this,&Widget::Widget_btn1_slot);
    connect(btn2,&QPushButton::clicked,this,&Widget::Widget_btn2_slot);
    //在哪都可以，只要在使用前绑定就可以了
    //由于只需要绑定一次，为了方便和避免重复调用，会放在构造函数中
    //如果需要重复的解除绑定、重新绑定，则根据具体逻辑选择位置

五、跳转目标界面设置

1、头文件

cpp 复制代码

#ifndef LOG_SUCCESS_H
#define LOG_SUCCESS_H

#include <QWidget>
#include <QLabel>//标签类
#include <QMovie>//动画类
#include <QIcon>//图标类

namespace Ui {
class log_success;
}

class log_success : public QWidget
{
    Q_OBJECT

public:
    explicit log_success(QWidget *parent = nullptr);
    ~log_success();

private:
    Ui::log_success *ui;

    QLabel *lab4;

    QMovie *lab4_movie;

public slots:
    void jump_slot();

};

#endif // LOG_SUCCESS_H

2、原文件

cpp 复制代码

#include "log_success.h"
#include "ui_log_success.h"

log_success::log_success(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::log_success)
{
    ui->setupUi(this);
    //界面写在构造函数内的话 启动就会调用

//    未将组件绑定到ui 需要单独调用
    lab4 = new QLabel;
//    lab4 = new QLabel(this);//绑定到ui
    lab4->setWindowTitle("登录成功");
    lab4->setWindowIcon(QIcon(":/tabel/kamijo_.webp"));

    lab4_movie = new QMovie(":/tabel/misak_mikoto.gif");
    lab4_movie->start();
    lab4->setMovie(lab4_movie);//绑定
    lab4->setScaledContents(true);//自适应尺寸

}

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

//跳转响应槽函数
void log_success::jump_slot()
{
    //单独调用
    log_success::lab4->show();

    //调用整个ui -> form
    //show();
}

六、绑定跳转信号和跳转响应槽函数（主函数）

cpp 复制代码

#include "widget.h"
#include "log_success.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();

    log_success l;

    QObject::connect(&w, &Widget::jump_signals, &l, &log_success::jump_slot);

    return a.exec();
}

QT 自定义组件 界面跳转

一、引用组件需要的类（头文件）

二、使用组件对应的类 实例化对象（头文件）

三、设置组件属性（原文件）

四、信号与槽 的设置（界面跳转开始设置）

1、头文件中声明 信号与槽

2、原文件中定义 槽函数

3、绑定对应的信号与槽

五、跳转目标界面设置

1、头文件

2、原文件

六、绑定跳转信号和跳转响应槽函数（主函数）

QT 自定义组件界面跳转

二、使用组件对应的类实例化对象（头文件）

四、信号与槽的设置（界面跳转开始设置）

1、头文件中声明信号与槽

2、原文件中定义槽函数