Qt-C++基础界面开发（3- 简单Input Widget控件和Containers等多窗口操作）

爬楼的猪

已于 2022-05-07 16:36:05 修改

阅读量2.2k

点赞数 8

分类专栏： C++基础文章标签： qt c++

于 2022-05-05 05:31:52 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42727752/article/details/124581087

版权

C++基础专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了Qt-C++中ComboBox、LineEdit和TextEdit的基本操作，以及Containers控件的使用，包括页面跳转、参数传递和多窗口切换技巧。从基础控件到多界面协作，一步步教你构建复杂应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 Input Widget的简单使用

1.1 Combo Box控件的基本操作

1、在界面的UI设计combo box变量
2、在cpp文件中利用lambda表达式实现其功能操作
3、Combo box包括下拉改变状态、获取当前状态、设置当前状态为未选择等基础操作

1、在界面的UI中设计combo box的变量名为cbx，并且添加一个label用于显示状态变化的文字
在这里插入图片描述

2、在界面的cpp文件中，对界面进行实现mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    // 代码在此后面添加

    // 1、设计下拉按钮标签文字
    for(int i = 0 ; i < 10;++i){
        QString str = "第" + QString::number(i) + "个";
        ui->cbx->addItem(str);
    }
    // 2、默认未勾选任何批次,将当前index设置为-1即可
    ui->cbx->setCurrentIndex(-1);

    // 3、设计下拉按键实现不同功能（主要在于触发事件为currentTextChanged）
    connect(ui->cbx,&QComboBox::currentTextChanged,this,[=](){
        // 3.1、当前下拉按钮的位置
        int index = ui->cbx->currentIndex();
        //  更改label的内容
        ui->label->setText("我是" +QString::number(index)+"个按钮");
    });
}

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

3、实现效果：
在这里插入图片描述

1.2 Line Edit控件的基本操作

1、在界面的UI设计Line Edit变量
2、在cpp文件中利用lambda表达式实现其功能操作
3、Line Edit包括当前内容变化等触发事件和获取当前内容的操作等

1、在UI中设计Line Edit 并命名

2、在cpp中实现对line edit的内容读取（触发事件是实时读取的）mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    // 代码在此后面添加
    // 1、line edit的内容变化，触发label显示该内容
    connect(ui->let,&QLineEdit::textChanged,this,[=]{
        // 2、 此时的label显示内容是实时的
        // line edit一般用来作为输入窗口配合按钮使用，来获取输入内容
        ui->label->setText(ui->let->text());
    });
}

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

3、效果如下所示：
在这里插入图片描述

1.3 Text Edit控件的基本操作

1、在界面的UI设计Text Edit变量
2、在cpp文件中利用lambda表达式实现其功能操作
3、Text Edit包括当前内容变化等触发事件和获取当前内容的操作等
4、Text Edit 和 Line Edit的区别在于Text Edit可以输入多行，且得到的文本还是作为一个字符串，且Text Edit获取文本的函数为toPlainText()

1、在UI中设计Line Edit 并命名

2、在cpp中实现对line edit的内容读取（触发事件是实时读取的）mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    // 代码在此后面添加

    // 1、类似于line edit利用文件变化触发，获取text edit的内容
    connect(ui->ted,&QTextEdit::textChanged,this,[=]{
        // 2、 text edit和line edit区别在于text edit输入可以是多行文本
        ui->label->setText(ui->ted->toPlainText());
    });
}

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

3、效果如下所示：
在这里插入图片描述

2 Containers等控件和多窗口操作

2.1 页面跳转（推荐）

1、该模式比隐藏主界面模式简单
2、控件点击后，直接打开界面B，然后关闭界面A（主界面）

2.1.1 页面A和页面B的设计

1、其中只包括label显示其为页面1，和按钮push button且命名为pbt实现页面跳转的功能
在这里插入图片描述

2、添加页面B进入到工程

1、右键工程，如test添加新文件，如下图所示，选择Qt中的Qt 设计师界面类
2、根据需求，选择Main Window或者 Widget即可
3、设计类名，并且是要添加到工程文件夹下面

在这里插入图片描述

4、设计页面B，包含一个label显示这个是页面B和一个按钮返回页面A

2.1.2 添加头文件

1、在页面A的头文件中添加页面B，即只要包含一句#include "formb.h"即可，页面A的文件mainwindow.h如下：

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include "formb.h"

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

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

private:
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

2、在页面B的头文件中添加页面A，即只要包含一句#include "mainwindow.h"即可，页面B的formb.h如下所示：

#ifndef FORMB_H
#define FORMB_H

#include <QWidget>
#include "mainwindow.h"

namespace Ui {
class FormB;
}

class FormB : public QWidget
{
    Q_OBJECT

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

private:
    Ui::FormB *ui;
};

#endif // FORMB_H

2.1.3 在源文件实现打开页面操作

1、对于页面A，此时对按键进行功能实现：点击后打开页面B，并关闭页面A，mainwindow.cpp如下所示：

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    
    // 点击按钮打开页面B，关闭页面A
    connect(ui->pbt_a,&QPushButton::clicked,this,[=]{
        // 新建页面B的对象，并打开
        FormB* nf = new FormB();
        nf->show();
        // 页面A关闭
        this->close();
    });
}

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

2、此时即已经实现点击按钮跳转页面就打开了页面B
3、同样的，对页面B进行点击按钮实现打开页面A，关闭页面B，此时formb.cpp如下所示

#include "formb.h"
#include "ui_formb.h"

FormB::FormB(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::FormB)
{
    ui->setupUi(this);
    // 点击按钮打开页面B，关闭页面A
    connect(ui->pbt_b,&QPushButton::clicked,this,[=]{
        MainWindow* nf = new MainWindow();
        nf->show();
        this->close();
    });
}

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

4、至此完成界面的跳转

总结：
1、以上四个文件即包括了所有代码
2、打开页面B的对象，关闭页面A，即实现页面的切换

2.2 页面跳转（隐藏主界面模式）

1、设计触发跳转页面的控件，例如按钮等
2、控件触发后，打开新页面，自身可以隐藏也可以不隐藏
3、新界面触发事件，发出信号给旧界面实现页面切换

在这里插入图片描述

1、页面A的按钮点击，发送出跳转信号，被页面B接收
2、在页面A头文件中添加页面B
3、在按钮的Lambda或者槽函数中实现页面跳转

2.2.1 界面设计

见前面2.1.1

2.2.2 页面A触发跳转操作并隐藏（非最终跳转代码）

1、在页面A的头文件中添加页面B，即只要包含一句#include "formb.h"即可

2、在.cpp文件实现页面跳转mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    // 代码在此后面添加

    // 1、页面A的按钮触发
    connect(ui->pbt_a,&QPushButton::clicked,this,[=]{
        // 2.1 、新建页面B并显示，至此打开新界面
        FormB* nf = new FormB();
        nf->show();
        // 2.2 、主界面A隐藏
        this->hide();

    });
}

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

此时实现的效果页面A能打开页面B，但是页面B打开不了页面A！！

2.2.3 页面B触发跳转实现页面AB之间的切换（最终跳转代码）

1、在页面 B的头文件 中添加页面A和信号，返回界面A， 注意信号声明在public 下！！

signals:
    //  返回页面A
    void backA();

整个代码如下所示：formb.h

#ifndef FORMB_H
#define FORMB_H

#include <QWidget>
#include "mainwindow.h"

namespace Ui {
class FormB;
}

class FormB : public QWidget
{
    Q_OBJECT

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

signals:
    //  返回页面A
    void backA();

private:
    Ui::FormB *ui;
};

#endif // FORMB_H

2、页面B在cpp文件实现向页面A跳转操作formb.cpp

#include "formb.h"
#include "ui_formb.h"

FormB::FormB(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::FormB)
{
    ui->setupUi(this);
    
    // 1、 按键触发页面B隐藏并发信号，打开页面A
    connect(ui->pbt_b,&QPushButton::clicked,this,[=]{
        // 发出信号
        emit backA();
        // 页面B隐藏
        this->hide();
    });
}

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

此时针对页面A的cpp文件mainwindow.cpp，添加触发事件：值得注意的有：

1、页面B返回页面A的信号是在页面A跳转到页面B的事件中实现的
2、在跳转回页面A时候，页面B被当做一个控件

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    // 代码在此后面添加

    // 1、页面A的按钮触发
    connect(ui->pbt_a,&QPushButton::clicked,this,[=]{
        // 2.1 、新建页面B并显示，至此打开新界面
        FormB* nf = new FormB();
        nf->show();
        // 2.2 、主界面A隐藏
        this->hide();
        // 3 页面B触发事件打开页面A
        connect(nf,&FormB::backA,this,[=]{
            // 打开页面A
            this->show();
        });

    });
}

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

2.3 页面跳转传递参数

2.3.1 实现页面跳转（隐藏主界面）

此时见 2.2 节实现即可

2.3.2 设计传参控件（可以不需要）

此时，在页面A中添加一个拖动条（Horizontal Silder），且命名为hs

在这里插入图片描述

此时，在页面B中添加一个label命名为lab_hs来显示页面A的托拉条数据
在这里插入图片描述

2.3.3 在页面B中设计传参函数

1、由A打开B，B获得A的参数
2、因此在A打开B的时候，B调用其中某个函数获取A的参数

在这里插入图片描述
此时页面B的头文件中设计传参函数getHsData，注意其添加在页面B的slot函数内，且为public，此时formb.h如下

#ifndef FORMB_H
#define FORMB_H

#include <QWidget>
#include "mainwindow.h"

namespace Ui {
class FormB;
}

class FormB : public QWidget
{
    Q_OBJECT

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

public slots:
    void getHsData(int);

signals:
    //  返回页面A
    void backA();

private:
    Ui::FormB *ui;
};

#endif // FORMB_H

此时在页面B的cpp文件对该槽函数进行实现，即在lab_hs下显示内容：
此时的formb.cpp有：

#include "formb.h"
#include "ui_formb.h"

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

    // 1、 按键触发页面B隐藏并发信号，打开页面A
    connect(ui->pbt_b,&QPushButton::clicked,this,[=]{
        // 发出信号
        emit backA();
        // 页面B隐藏
        this->hide();
    });
}

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

// 对获得到的数据进行显示
void FormB::getHsData(int a){
    ui->lab_hs->setText(QString::number(a));
}

2.3.4 在页面A中调用传参函数

由于传参函数是在页面B中的，因此也在打开页面B的时候调用传参函数

此时的页面A的cpp文件mainwindow.cpp如下：

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    // 代码在此后面添加

    // 1、页面A的按钮触发
    connect(ui->pbt_a,&QPushButton::clicked,this,[=]{
        // 2.1 、新建页面B并显示，至此打开新界面
        FormB* nf = new FormB();
        nf->show();
        // 2.2 、主界面A隐藏
        this->hide();
        // 传递参数
        nf->getHsData(ui->hs->value());

        // 3 页面B触发事件打开页面A
        connect(nf,&FormB::backA,this,[=]{
            // 打开页面A
            this->show();
        });

    });
}

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

此时实现的效果如下所示：
在这里插入图片描述

2.4 在页面A上显示页面B之Scroll Area容器

1、在页面A上设计scroll area容器
2、设计好页面B
3、在页面A的cpp文件实现scroll area显示页面B

1、在页面A界面上设计scroll area重命名为sa

在这里插入图片描述
2、类似2.1.1操作创建页面B

3、在页面A上显示页面Bmainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    // 代码在此后面添加

    // 1、新建页面B
    FormB* nf = new FormB();
    // 2、显示页面B
    ui->sa->setWidget(nf);
}

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

3、最终实现效果
在这里插入图片描述

同样的，在页面A上添加一个line edit命名为ldt，此时可以在 页面A中对页面B进行操作：mainwindow.cpp有

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    // 代码在此后面添加

    // 1、新建页面B
    FormB* nf = new FormB();
    // 2、显示页面B
    connect(ui->ldt,&QLineEdit::textChanged,this,[=]{

        nf->getHsData(ui->ldt->text().toInt());
    });

    ui->sa->setWidget(nf);
}

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