C/C++ QT圖形界面基礎組件

QT 是一個跨平台，並使用C++作為開發語言的應用程序開發工具，其提供了一套類庫，該類庫實現全平台支持，但配置時需要注意。QT程序編譯后，需要去qt目錄拷貝幾個文件，與qt程序放在一起，否則會報錯，以下代碼是學習QT時整理的基礎代碼部分。

QT的下載地址為：https://download.qt.io/new_archive/qt/5.11/5.11.3/

1.去Qt安 裝 目 錄 的 bin 目 錄 中 將 libgcc_s_dw2-1.dll 、libstdc++-6.dll、libwinpthread-1.dll、Qt5Core.dll、Qt5Gui.dll 和 Qt5Widgets.dll 這 6 個文件復制過來。
2.將 C:\Qt\Qt5.6.1\5.6\mingw49_32\plugins 目錄中的 platforms 文件夾復制過來，里面只需要保留 qwindows.dll 文件即可。
3.也可以執行命令 windeployqt untitled.exe 完成自動打包，不過，打包后的大小，呵呵！

使用精簡參數打包：windeployqt --no-angle --no-opengl-sw untitled.exe

只保留如下文件即可運行，其他的可全部裁掉。

窗體基本的創建: source/widget.cpp

#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>

Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget)
{

    ui->setupUi(this);

    // 創建第一個按鈕
    QPushButton * btn = new QPushButton;   // 創建一個按鈕
    //btn->show();                         // 用頂層方法彈出按鈕
    btn->setParent(this);    // 設置父窗體(將btn內嵌到主窗體中)
    btn->setText("確定按鈕"); // 設置按鈕text顯示

    // 創建第二個按鈕,窗口會按照btn2大小顯示
    QPushButton * btn2 = new QPushButton("第二個按鈕",this);
    btn2->setParent(this);
    btn2->move(100,100);      // 移動第二個按鈕
    btn2->resize(50,50);      // 重置按鈕2的大小

    this->resize(500,400);            // 重置窗口大小,調整主窗口大小
    this->setWindowTitle("我的窗體");  // 重置主窗體的名字
    this->setFixedSize(600,400);      // 固定窗體大小,不讓其修改

}

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

信號和槽簡單介紹:

#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
#include <iostream>

using namespace std;

void Print()
{
    cout << "aa" << endl;
}

Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget)
{

    ui->setupUi(this);

    // 創建第一個按鈕
    QPushButton * btn = new QPushButton;   // 創建一個按鈕
    //btn->show();                         // 用頂層方法彈出按鈕
    btn->setParent(this);    // 設置父窗體(將btn內嵌到主窗體中)
    btn->setText("確定按鈕"); // 設置按鈕text顯示

    // 創建第二個按鈕,窗口會按照btn2大小顯示
    QPushButton * btn2 = new QPushButton("第二個按鈕",this);
    btn2->setParent(this);
    btn2->move(100,100);      // 移動第二個按鈕
    btn2->resize(50,50);      // 重置按鈕2的大小

    this->resize(500,400);            // 重置窗口大小,調整主窗口大小
    this->setWindowTitle("我的窗體");  // 重置主窗體的名字
    this->setFixedSize(600,400);      // 固定窗體大小,不讓其修改

    // 為按鈕綁定事件 connect(信號的發送者,發送的信號,信號的接受者,處理的函數(槽信號))
    connect(btn2,&QPushButton::clicked,this,&QWidget::close);

    // 將窗體中的第一個按鈕,連接到Print函數中.
    connect(btn,&QPushButton::clicked,this,&Print);
}

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

狀態欄/浮動窗口:

#include "mainwindow.h"
#include <QLabel>
#include <QStatusBar>
#include <QDockWidget>
#include <QTextEdit>

MainWindow::MainWindow(QWidget *parent): QMainWindow(parent)
{
    this->resize(600,400);

// ----------------------------------------------------------
    // 狀態欄的創建
    QStatusBar * stBar = statusBar();
    setStatusBar(stBar);       //  將狀態欄部署到窗體

    QLabel * label = new QLabel("左側提示信息",this);
    stBar->addWidget(label);   // 添加提示信息到左側

    QLabel * label2 = new QLabel("右側提示信息",this);
    stBar->addPermanentWidget(label2); // 添加提示到右側

// ----------------------------------------------------------
    // 鉚接部件,創建浮動窗口
    QDockWidget * dock = new QDockWidget();
    addDockWidget(Qt::BottomDockWidgetArea,dock);

     // 添加核心部件(只能有一個)
    QTextEdit * edit = new QTextEdit();           // 創建文本編輯框
    setCentralWidget(edit);                       // 設置到窗體
    // 設置部件只能停靠在上方和下方
    dock->setAllowedAreas(Qt::TopDockWidgetArea | Qt::BottomDockWidgetArea);
}

MainWindow::~MainWindow()
{
}

菜單欄/工具欄: 菜單欄只能有一個,工具欄可以有多個.

#include "mainwindow.h"
#include <QMenuBar>
#include <QToolBar>

MainWindow::MainWindow(QWidget *parent): QMainWindow(parent)
{
    this->resize(600,400);
// ----------------------------------------------------------
    // 創建菜單欄
    QMenuBar *bar = menuBar();
    this->setMenuBar(bar);  //將菜單欄放入主窗口
    QMenu * fileMenu = bar->addMenu("文件");
    // 添加子菜單
    QAction *newAction = fileMenu->addAction("新建文件");
    fileMenu->addSeparator();  // 添加分割線
    QAction *openAction = fileMenu->addAction("打開文件");

// ----------------------------------------------------------
    //創建工具欄
    QToolBar *toolBar = new QToolBar(this);  // 創建工具欄
    addToolBar(Qt::LeftToolBarArea,toolBar); // 設置默認停靠范圍
    // 只允許工具欄左右側停靠
    toolBar->setAllowedAreas(Qt::LeftToolBarArea |Qt::RightToolBarArea);
    // 設置是否浮動為假,不讓其浮動
    toolBar->setFloatable(false);
    // 設置工具欄不允許移動
    toolBar->setMovable(false);
    // 工具欄添加菜單項
    toolBar->addAction(newAction);
    toolBar->addSeparator();  // 也可以添加分割線
    toolBar->addAction(openAction);
}

MainWindow::~MainWindow()
{
}

底部菜單，二級：

#include <QMenuBar>

MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    // 主菜單
    QMenu *MainMenu = new QMenu(this);

    // 主菜單的子項
    QAction *option = new QAction(MainMenu);
    option->setText("選項");
    QAction *about = new QAction(MainMenu);
    about->setText("關於");

    QList<QAction*> actionList;
    actionList << option << about;

    // 添加子項到主菜單
    MainMenu->addActions(actionList);


    // 子菜單
    QMenu *childMenu = new QMenu();

    //子菜單的子項
    QAction *delfile = new QAction(childMenu);
    delfile->setText("刪除");
    QAction *addfile = new QAction(childMenu);
    addfile->setText("添加");

    QList<QAction *> childActionList;
    childActionList << delfile << addfile;
    childMenu->addActions(childActionList);


    // 設置子菜單歸屬於opion
    option->setMenu(childMenu);
    //主菜單添加子菜單
    MainMenu->addMenu(childMenu);

    // 移動到當前鼠標所在位置
    MainMenu->exec(QCursor::pos());

}

頂部菜單欄二級菜單：

#include <QMenuBar>

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

    // 菜單導航欄
    QMenuBar *MainMenu = new QMenuBar(this);
    this->setMenuBar(MainMenu);

    // 定義主菜單
    QMenu *FileMenu = MainMenu->addMenu("文件");
    QMenu *EditMenu = MainMenu->addMenu("編輯");
    QMenu *AboutMenu = MainMenu->addMenu("關於");

    // EditMemu 的子菜單
    QAction *option = new QAction(EditMenu);
    option->setText("配置模式");
    EditMenu->addAction(option);

    QAction *text = new QAction(EditMenu);
    text->setText("編輯文件");
    EditMenu->addAction(text);


    // option 子菜單的子項
    QMenu *childMenu = new QMenu();
    QAction *set_file = new QAction(childMenu);
    set_file->setText("設置文件內容");
    childMenu->addAction(set_file);

    QAction *read_file = new QAction(childMenu);
    read_file->setText("讀取文件內容");
    childMenu->addAction(read_file);

    // 首先將childMenu注冊到option中
    option->setMenu(childMenu);
    // 然后再將childMenu加入到EditMenu中
    EditMenu->addMenu(childMenu);
}

創建並使用工具欄

#include <QToolBar>
#include <QMenuBar>

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


    // 創建菜單欄
    QMenuBar *bar = menuBar();
    this->setMenuBar(bar);  //將菜單欄放入主窗口
    QMenu * fileMenu = bar->addMenu("文件");
    // 添加子菜單
    QAction *newAction = fileMenu->addAction("新建文件");
    fileMenu->addSeparator();  // 添加分割線
    QAction *openAction = fileMenu->addAction("打開文件");

    //創建工具欄
    QToolBar *toolBar = new QToolBar(this);  // 創建工具欄
    addToolBar(Qt::TopToolBarArea,toolBar); // 設置默認停靠范圍

    // 只允許工具欄停放在上下兩側
    toolBar->setAllowedAreas(Qt::TopToolBarArea |Qt::BottomToolBarArea);

    // 設置是否浮動為假,不讓其浮動
    toolBar->setFloatable(false);
    // 設置工具欄不允許移動
    toolBar->setMovable(false);

    // 工具欄添加菜單項
    toolBar->addAction(newAction);
    toolBar->addSeparator();  // 也可以添加分割線
    toolBar->addAction(openAction);
}

菜單欄添加圖標：

#include <QMenuBar>
#include <QToolBar>

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

    // 創建菜單欄
    QMenuBar *bar = menuBar();
    this->setMenuBar(bar);  //將菜單欄放入主窗口
    QMenu * fileMenu = bar->addMenu("文件");
    // 添加子菜單
    QAction *newAction = fileMenu->addAction("新建文件");
    fileMenu->addSeparator();  // 添加分割線
    QAction *openAction = fileMenu->addAction("打開文件");

    // 設置圖標即可
    newAction->setIcon(QIcon(":/image/a.png"));

    //創建工具欄
    QToolBar *toolBar = new QToolBar(this);  // 創建工具欄
    addToolBar(Qt::BottomToolBarArea,toolBar); // 設置默認停靠范圍

    // 只允許工具欄停放在上下兩側
    toolBar->setAllowedAreas(Qt::TopToolBarArea |Qt::BottomToolBarArea);

    // 設置是否浮動為假,不讓其浮動
    toolBar->setFloatable(false);
    // 設置工具欄不允許移動
    toolBar->setMovable(false);

    // 工具欄添加菜單項
    toolBar->addAction(newAction);
    toolBar->addSeparator();  // 也可以添加分割線
    toolBar->addAction(openAction);
}

只添加菜單欄

#include <QMenuBar>
#include <QToolBar>
#include <iostream>

MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    // 隱藏右擊菜單
    this->setContextMenuPolicy(Qt::NoContextMenu);

    // 創建基礎菜單並讓其隱藏
    QMenuBar *bar = menuBar();
    this->setMenuBar(bar);
    QMenu * fileMenu = bar->addMenu("Ptr");
    bar->setVisible(false);

    // 添加子菜單
    QAction *NewAction = fileMenu->addAction("新建文件");
    QAction *OpenAction = fileMenu->addAction("打開文件");
    QAction *ReadAction = fileMenu->addAction("讀入文件");

    // 分別設置圖標
    NewAction->setIcon(QIcon(":/image/1.ico"));
    OpenAction->setIcon(QIcon(":/image/2.ico"));
    ReadAction->setIcon(QIcon(":/image/3.ico"));

    // 創建工具欄
    QToolBar *toolBar = new QToolBar(this);
    addToolBar(Qt::TopToolBarArea,toolBar);

    // 工具欄添加菜單項
    toolBar->addAction(NewAction);
    toolBar->addAction(OpenAction);
    toolBar->addAction(ReadAction);

    // 設置禁止移動默認貼在上方
    toolBar->setFloatable(false);
    toolBar->setMovable(false);
    toolBar->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);

    // 綁定槽函數
    connect(NewAction,&QAction::triggered,this,[=](){
        std::cout << "new action" << std::endl;
    });

    connect(OpenAction,&QAction::triggered,this,[=](){
        std::cout << "open action" << std::endl;
    });
    connect(ReadAction,&QAction::triggered,this,[=](){
        std::cout << "read action" << std::endl;
    });
}

模態非模態對話框：

#include <QDebug>
#include <QDialog>

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

    // 點擊 New 菜單彈出消息
    connect(ui->actionNew,&QAction::triggered,this,[=]()
    {
        // 模態對話框
        // QDialog dlog(this);
        // dlog.resize(200,100);
        // dlog.exec();

        // 非模態對話框
        QDialog *dlog_nomod = new QDialog(this);
        dlog_nomod->resize(200,100);
        dlog_nomod->show();
        dlog_nomod->setWindowTitle("模態對話框");
        dlog_nomod->setAttribute(Qt::WA_DeleteOnClose);
    });
}

常用對話框：

#include <QDebug>
#include <QDialog>
#include <QMessageBox>


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

    // 點擊 New 菜單彈出消息
    connect(ui->actionNew,&QAction::triggered,this,[=]()
    {
        // 錯誤對話框
        QMessageBox::critical(this,"錯誤!","錯誤信息..");

        // 信息對話框
        QMessageBox::information(this,"提示!","提示信息..");

        // 詢問對話框
        QMessageBox::question(this,"詢問!","詢問提示..");

        // 保存與否
        QMessageBox::question(this,"詢問!","是否保存..",QMessageBox::Save |
                              QMessageBox::SaveAll | QMessageBox::Cancel);

        // 默認激活按鈕,將光標放在save上
        QMessageBox::question(this,"關聯!","關聯save",QMessageBox::Save|QMessageBox::Cancel,
                              QMessageBox::Save);

        // 得到選擇結果
        if(QMessageBox::Save == QMessageBox::question(this,"存檔","是否保存?",QMessageBox::Save|QMessageBox::Cancel))
        {
               qDebug() << "ok";
        }

        // 警告對話框
        QMessageBox::warning(this,"警告!","是否警告",QMessageBox::Yes);
    });
}

顏色選擇與打開關閉文件：

#include <QDebug>
#include <QColor>
#include <QColorDialog>
#include <QFileDialog>
#include <QString>

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

    // 點擊 New 菜單彈出消息
    connect(ui->actionNew,&QAction::triggered,this,[=]()
    {
        // 設置顏色對話框
        QColor color = QColorDialog::getColor(QColor(0,0,0));
        qDebug() << "color: " << color.red() << color.green() << color.blue();

        // 文件對話框
        QString path = QFileDialog::getOpenFileName(this,"打開文件","c:\\","(*.txt *.png)");
        qDebug() << "path = " << path ;
    });
}

實現簡單計算器： 通過點擊，pushbutton跳轉到指定槽函數上，然后輸入以下代碼

void Widget::on_pushButton_clicked(bool checked)
{
    // 得到str1，第一個編輯框的值
    QString str = ui->lineEdit->text();
    int num = str.toInt();

    // 得到第二個編輯框的數據
    str = ui->lineEdit_2->text();
    float price = str.toFloat();

    // 計算總結果
    float total = num*price;

    // 最后輸出
    str = str.sprintf("%.2f",total);
    ui->lineEdit_3->setText(str);
}

lineEdit：讀入十進制數，轉為二進制和十六進制並顯示：

void Widget::on_pushButton_clicked(bool checked)
{
    QString str = ui->lineEdit->text();
    int val = str.toUInt();

    str = str.setNum(val,16);   // 轉為十六進制
    str = str.toUpper();        // 變大寫
    ui->lineEdit_2->setText(str);

    // 轉二進制
    str = str.setNum(val,2);
    // str = QString::number(val,2);
    ui->lineEdit_3->setText(str);
}

SpinBox 數值顯示： 該控件主要用於整數顯示，可以在前后增加特殊符號，如￥等。spinbox,doublespingbox 兩個。

prefix 則是在前方加入 合計： suffix 則是在后方加入kg

void Widget::on_pushButton_clicked(bool checked)
{
    int num = ui->spinBox->value();
    double price = ui->doubleSpinBox->value();
    double total = num * price;
    ui->doubleSpinBox_2->setValue(total);     // 設置時不需要轉換

    QString ss = ui->label->text();

    // ui->label->setText("123");       // 設置字符串
    ui->label->setNum(total);           // 設置計算結果
}

HorizontalSlider 滑塊條： 設置滑塊條，拖動滑塊條自動觸發valueChanged()信號，並設置TextEdit的底色。

void Widget::on_horizontalSlider_valueChanged(int value)
{
    Q_UNUSED(value);
    QColor color;

    int R = ui->horizontalSlider->value();
    int G = ui->horizontalSlider_2->value();
    int B = ui->horizontalSlider_3->value();

    color.setRgb(R,G,B);
    QPalette pal = ui->textEdit->palette();
    pal.setColor(QPalette::Base,color);
    ui->textEdit->setPalette(pal);
}

如上我們只有第一個滑塊條發生變化時才會改變顏色，我們可以將剩下的兩個滑塊條做一個關聯綁定，即可實現任意一個發生變化顏色就應用。

#include "widget.h"
#include "ui_widget.h"
#include <iostream>
#include <QPalette>
#include <QColor>

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

    // 關聯剩下的兩個控件
    QObject::connect(ui->SliderGreen,SIGNAL(valueChanged(int)),  //關聯 SliderGreen 的valueChanged()
                     this,SLOT(on_SliderRead_valueChanged(int)));

    QObject::connect(ui->SliderBlue,SIGNAL(valueChanged(int)), //關聯 SliderBlue的valueChanged()
                     this,SLOT(on_SliderRead_valueChanged(int)));
}

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

void Widget::on_SliderRead_valueChanged(int value)
{
    Q_UNUSED(value);
    QColor  color;
    int R=ui->SliderRead->value();  //讀取SliderRed的當前值
    int G=ui->SliderGreen->value();//讀取 SliderGreen 的當前值
    int B=ui->SliderBlue->value();//讀取 SliderBlue 的當前值
    color.setRgb(R,G,B); //使用QColor的setRgb()函數 獲得顏色

    QPalette pal=ui->textEdit->palette();//獲取textEdit原有的 palette
    pal.setColor(QPalette::Base,color); //設置palette的基色（即背景色）

    ui->textEdit->setPalette(pal);//設置為textEdit的palette,改變textEdit的底色
}

儀表盤配置：

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <iostream>

MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    ui->lcdNumber->display(0);
}

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

void MainWindow::on_dial_valueChanged(int value)
{
    // 設置LCD屏幕顯示
    ui->lcdNumber->display(value);
}

void MainWindow::on_pushButton_clicked(bool checked)
{
    // 設置LCD顯示十進制數
    ui->lcdNumber->setDigitCount(3);  // 設置位數
    ui->lcdNumber->setDecMode();      // 十進制
}

void MainWindow::on_pushButton_2_clicked(bool checked)
{
    // 設置顯示二進制
    ui->lcdNumber->setDigitCount(8);
    ui->lcdNumber->setBinMode();
}

void MainWindow::on_pushButton_3_clicked(bool checked)
{
    // 設置顯示十六進制
    ui->lcdNumber->setDigitCount(3);
    ui->lcdNumber->setHexMode();
}

combox

#include <QString>
#include <iostream>
#include <QMap>
#include <QList>

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

    // 給QComBox添加圖標
    QIcon icon;
    icon.addFile(":/image/n1.ico");
    ui->comboBox->clear();
    for(int x=0;x<10;x++)
    {
        ui->comboBox->addItem(icon,QString::asprintf("item %d",x));
    }

    // 使用Items一次性追加標簽
    ui->comboBox->clear();
    QStringList str_list;
    str_list << "北京" << "上海" << "天津" << "山東";
    ui->comboBox->addItems(str_list);

    // 使用Map映射實現,添加<城市,區號>城市顯示,區號隱藏.
    QMap<QString,int> City_Zone;

    City_Zone.insert("北京",10);
    City_Zone.insert("上海",22);
    City_Zone.insert("天津",21);

    ui->comboBox->clear();
    foreach(const QString &str,City_Zone.keys())
    {
        ui->comboBox->addItem(str,City_Zone.value(str));
        std::cout << str.toUtf8().data() << " : " << City_Zone.value(str) << std::endl;
    }

    QMap<QString,QList <QString>> map;

    QList<QString> tmp;
    tmp.append("大興區");
    tmp.append("昌平區");
    tmp.append("東城區");

    map["北京"] = tmp;

    foreach(const QString &x,map.keys())
    {
        std::cout << x.toStdString().data() << std::endl;
        ui->comboBox_2->addItem(x);
        if(x == "北京")
        {
            QList<QString> tmp;

            tmp = map.value(x);
            for(int y=0;y<tmp.count();y++)
            {
                std::cout << tmp[y].toStdString().data() << std::endl;
                ui->comboBox_3->addItem(tmp[y]);
            }
        }
    }
}